[JUSTCODE] Basic Foundation - React CRA, Component, JSX

CRA

React를 시작하기 위해서는 CRA를 설치해야한다. 설치하는 명령어는 다음과 같다.

1. npx create-react-app <react-project명>
2. <react-project> 디렉토리 진입 cd <react-project명>
3. 로컬 서버 띄우기 npm run start
4. http://localhost:3000로 접속하여 리액트 로고가 빙글빙글 돌고있는지 확인

CRA의 기본 폴더 및 파일 초기 구성

• node.modules
• package.json
• .gitignore
• index.html
• index.js
• App.js
• public 폴더
• src 폴더

 

Component

React에서 사용하는 페이지의 구성 단위

 

Component의 특징

1. 유지보수가 쉽다.
2. 부모 Component가 자식 Component를 가질 수 있다.
3. 재활용하여 사용하기 좋다.

Component에는 Class형과 함수형이 존재하는데, 현업에서는 함수형이 더 많이 사용되고 있다.

 

 

JSX

Class형에서 반환되어야 하는 값이며, Javascript의 확장형 문법

 

장점

html태그를 사용하면서 Javascript를 JSX안에서 동작시킬 수 있다.

 

특징

모든 것을 감싸는 최상위 요소인 Fragments를 사용할 수 있다. 

//Fragments
<></>

JSX에서의 style 태그의 사용법은 아래와 같다.

<div style={{color : "black"}}>Midnight In Coding</div>