React 2 - CRA 초기 세팅 & JSX

CRA 초기 폴더 및 파일 세팅

CRA 세팅 시에 초기 폴더에 구성되는 요소들에 대한 설명입니다.

 

1. node.modules : CRA를 구성하는 모든 노드 패키지 종류와 소스 코드가 존재하는 폴더입니다.

2. package.json : CRA 기본 패키지 외에, 추가로 설치된 라이브러리/패키지의 종류와 버젼이 기록되는 파일입니다.

 - "dependencies" : 리액트를 사용하기 위한 모든 패키지의 종류와 버젼 확인

  * package.json의 존재 이유 : 협업을 할 때, 리액트 구동에 필요한 모든 소스코드 및 패키지 (ex : node_modules)를 모두 깃헙에 올리는 건 번거롭고 불편합니다. 대신에, package.json에 사용된 모든 라이브러리를 명시해놓고, 다른 사람이 해당 소스를 pull 하여 npm install만 지정해주면 package.json에 명시된 모든 라이브러리를 자동으로 설치할 수 있습니다다.

 - "scripts : 프로젝트를 build하거나 서버를 실행하기 위한 명령어를 관리하는 메뉴

 - "gitignore" : 깃헙에 push 할 때 올리지 않아도 될 파일들을 지정할 수 있습니다. 

 

index.html, index.js, App.js

1. Public 폴더의 index.html : 최종 렌더링이 이루어질 HTML파일을 정의

2. src 폴더의 index.js : 리액트의 출발 지점으로, index.html에 렌더링할 컴포넌트를 지정할 수 있습니다.

 - ReactDOM.render( <App /> , document.getElement.ById('root') )

3. src 폴더의 App.js : 처음 CRA를 설치했을 때에 보여지는 초기 컴포넌트로, 다른 컴포넌트로 대체하여 사용하면 됩니다.

 

기타 폴더 구성

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리 (추후 세션을 통해 다룰 예정)

2) src 폴더

• components - 공통 컴포넌트 관리
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.scss
  • Main- Main.js, Main.scss
• styles 폴더
  • reset.scss - css 초기화
  • commom.scss - 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)
• 참고) components vs. pages
  • 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리합니다. (ex. Header, Nav, Footer)
  • 페이지 컴포넌트의 경우 pages 폴더에서 관리합니다.
  • 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 컴포넌트 폴더 하위에서 관리합니다.

JSX

1. JSX 정의

• JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
• cf) 바벨(Babel)

2. JSX 장점

• HTML 태그 형식으로 그대로 사용하기 때문에 가독성이 좋습니다.
• HTML 태그를 사용하는 동시에 자바스크립트도 JSX에서 동작하게 할 수 있습니다.

3. JSX 특징

• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)
• 자바스크립트 표현 : { ... javascript... }
• class vs. className
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />

다음 포스팅에서는 React UI의 가장 기본 단위라고 할 수 있는 컴포넌트에 대해서 알아보겠습니다.