tonirr

create-react-app 프로젝트의 구조 React 개발환경 설치에서 생성한 create-react-app 프로젝트의 기본 구조에 대해 알아보겠습니다. create-react-app으로 프로젝트를 생성하면 기본적으로 node_modules, public, src, .gitignore, package-lock.json, package.json 파일이 생성됩니다. 위부터 차례대로 살펴보겠습니다. node_modules 설치된 외부 라이브러리가 포함되어 있으며 라이브러리 구조를 파악할 수 있습니다. create-react-app을 생성하면 node_modules 폴더에 기본 라이브러리가 추가되어 있습니다. 추가적으로 라이브러리가 필요할 경우 npm install 명령어를 통해 설치할 수 있습니다. npm..

React는 컴포넌트들로 이루어져 있습니다. 컴포넌트를 만드는 방법은 대표적으로 Class를 사용하는 방법과 Function을 사용하는 방법이 있습니다. 각각의 특징에 대해 알아보도록 하겠습니다. Class 컴포넌트 - React에서 제공하는 컴포넌트를 extends하여 사용 state Class에 포함되는 데이터가 저장되는 객체입니다. state가 변경되면 render()가 호출되면서 컴포넌트를 다시 그립니다. render() render()는 클래스 컴포넌트에서 반드시 정의해야 하는 메서드입니다. React에서 정의한 컴포넌트, 여러개의 엘리먼트를 묶어 표시할 수 있는 Fragment등이 render()에 포함됩니다. 브라우저와 직접적인 상호작용을 하지 않습니다. lifecycle methods li..

1) nodejs 다운로드 Download Link https://nodejs.org/ko/ 참고 https://javacpro.tistory.com/62 2) Editor - Visual Studio Code Download Link https://code.visualstudio.com/ 관련 Extension Reactjs code snippets react관련 템플릿을 자동으로 생성해줌 Auto Import 필요한 기능을 자동으로 import해주며 component간 상대경로를 자동으로 파악해주어서 유용함 Prettier 코드를 가독성있게 정리 3) React 설치 및 create-react-app 생성 다운로드 방법(공식문서) https://reactjs-kr.firebaseapp.com/docs..