Udemy React 파일 구성 / JSX

리액트 프로젝트 생성

  1. npx create-react-app 프로젝트명
  2. cd 프로젝트명
  3. npm start
  • package.json : 프로젝트에서 어떤 패키지들을 사용하고 있는지를 보여줌.
  • src : 개발자가 작업하는 실제 소스코드가 들어있음.

외부에서 프로젝트를 다운 받은 경우,

  • npm install

  • npm start

  • node_modules : 로컬 컴퓨터에 다운로드한 패키지

index.js

페이지가 로드되면 가장 먼저 실행되는 코드

ReactDOM이라는 객체를 react-dom이라는 서드파티 라이브러리에서 가져온다. 이 라이브러리는 의존성 중 하나로 로컬에 다운로드/설치 되어있다. (package.json에서 확인 가능)

즉, react 기능을 사용하는 것이다.

index.html

이 단일 html 파일이 브라우저에 로딩된다. 이 html만 사용되는 싱글 페이지 어플리케이션.

App.js

APP은 컴포넌트이다. root라는 id를 갖는 요소가 있는 곳에 렌더링 되는 컴포넌트이다.

index.html의 body 태그 안의 root라는 id를 갖는 div 태그 내에 렌더링 된다.

JSX

자바스크립트 XML(=HTML)

npm start를 하면, 자바스크립트 코드를 브라우저에 맞춘 코드로 변환시킨다.

  • 개발자 도구 > Sources

우리의 소스 코드 + 전체 리액트 패키지 코드

자바스크립트와 JSX의 차이점

자바스크립트에서는 다음과 같이 명령형 접근 방식을 따르고 있다.

const para = document.createElement('p');
para.textContent = 'hello';
document.getElementById('root').append(para);

리액트의 JSX를 이용하면, js안에 html태그를 사용하여 쉽게 생성 가능하다.

리액트의 컴포넌트 트리

image

  • 소문자 : 내장 되어있는 것
  • 대문자 : 사용자 지정 컴포넌트