Ellen's Web Note

import { createElement } from "react"; function Container({ children }: { children: JSX.Element | JSX.Element[] }) { const childArray = Array.isArray(children) ? children : [children]; return ( {childArray.map((child, idx) => { return createElement(child.type, { ...{ ...child.props, idx: idx, value: `value${idx}` } }); })} ); } 예시 : 의 자식으로 여러개의 노드를 사용하는 경우 JSX.Element[] 배열을 통해 선언되어 있는 모든 자식 노드를 ..

리액트 프로젝트 만들기 yarn create react-app 'project_name' npm create-react-app 'project_name' 디렉터리 구조 node_modules - Node.js 기본 도구 모음 - npm, yarn으로 설치한 패키지 파일 모음. public - 실제 화면에 보여지는 파일 - Index.html : 화면에 출력되는 HTML : jsx에서 리턴한 가상 DOM을 에 추가해서 실행. - manifest.json : 앱의 홈화면에 보여지는 아이콘, 이름 등을 설정 - Robots.txt : 사이트맵 설정 src - React를 구현할 폴더 - Index.js : 프로젝트 실행 시 제일 처음 접근하는 파일. 경로(route) 설정 - App.js : 프로젝트 실행 시..