Key 속성 설정하기 리액트는 리액트 컴포넌트 뿐 아니라 사용자 컴포넌트에도 Key속성을 제공 위 사진 처럼 코드릉 작성하면, key 속성이 없다고 경고가 뜸 따라서 p 태그에 key값을 중복되지 않게 설정해주어야 함 Key 속성 같은 이름의 컴포넌트가 여러개일 때, 이들을 구분하기 위해 사용 map 메서드 등을 사용할 때, Key값으로 인덱스를 구분하여 불러오거나.. 그런 식으로 사용 children 속성 설정하기 children 속성 같은 경우 값을 설정하지 않아도 되는 선택 속성 div 태그 등 자식 요소를 포함할 수 있는 컴포넌트에만 사용이 가능 컴포넌트 내부에서 children 속성 사용하기 해당 코드를 작성하고 App.tsx에서 P 컴포넌트를 사용한다. 기존 p 코드로 쌌던 부분을 P 태그로 ..

디렉터리를 하나 생성하고, 이전에 사용했던 data와 prettier를 복사해온다. 컴포넌트 객체지향 언어의 원조인 스몰토크에서 유래 화면 UI를 처리하는 클래스를 의미 MVC 설계지침에 따라 구현되어야 함 리액트 16.8버전 이후, 리액트 훅이라는 새로운 메커니즘을 통해 객체지향만의 클래스가 아닌 단순한 함수 형태로도 구현이 가능하게 되었음 -> 가능한 함수컴포넌트와, 리액트 훅을 사용하라고 권장 됨 리액트 컴포넌트와 사용자 컴포넌트 리액트 컴포넌트 리액트 프레임워크가 제공하는 리액트 제공 컴포넌트 div, h1 ... 사용자 컴포넌트 사용자가 직접 지정하는 컴포넌트 MyChild, MyComponent... 처음 글자는 무조건 대문자(카멜 케이스) 리액트 컴포넌트 컴포넌트를 React.createEl..

npx create-react-app (프로젝트 이름) --template typescript //타입스크립트 파일 생성 이후 기존에 만들었던 src/data, prettier를 복사한다 cp -r ../(폴더)/src/data ./src/data cp -r ../(폴더)/.*. React.createElement의 호출의 복잡성 문제 React.createElement란 가상 DOM객체를 만들어주는 함수 HTML 요소가 부모/자식 관계로 구성되면 코드가 복잡해지는 문제가 있음 이를 해결하기 위해 JSX 기능을 언어 확장 형태로 추가 React vs JSX React // const rootVirtualDOM = CE("ul", null, [ // CE("li", null, [ // CE("a", { h..

문제 여행을 떠난 세준이는 지도를 하나 구하였다. 이 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 한 칸은 한 지점을 나타내는데 각 칸에는 그 지점의 높이가 쓰여 있으며, 각 지점 사이의 이동은 지도에서 상하좌우 이웃한 곳끼리만 가능하다. 현재 제일 왼쪽 위 칸이 나타내는 지점에 있는 세준이는 제일 오른쪽 아래 칸이 나타내는 지점으로 가려고 한다. 그런데 가능한 힘을 적게 들이고 싶어 항상 높이가 더 낮은 지점으로만 이동하여 목표 지점까지 가고자 한다. 위와 같은 지도에서는 다음과 같은 세 가지 경로가 가능하다. 지도가 주어질 때 이와 같이 제일 왼쪽 위 지점에서 출발하여 제일 오른쪽 아래 지점까지 항상 내리막길로만 이동하는 경로의 개수를 구하는 프로그램을 작성하시오. 입력 첫..