1. 리액트의 특징

보통의 자바 스크립트 프레임워크들은 모델(데이터를 관리하는 영역)과 뷰(사용자에게 보이는 부분)을 같이 제어합니다. 모델이 수정되면, 뷰를 다시 변형시키는 형태이죠, 하지만 리액트는 자바 스크립트 라이브러리로 오직 뷰만을 제어하는 라이브러리입니다.

virtual DOM을 사용하며 Dom을 업데이트 할 때는 업데이트 이전 내용과 비교하여 바뀐 부분만 실제 Dom에 적용합니다. 그래서 업데이트에 좀더 쉽게 접근할 수 있습니다.

사전에 설치해야 할 것들

Node.js

웹이 아닌 곳에서도 자바스크립트를 사용할 수 있게 해줍니다

NPM >

Node Package Maneger Node.js의 패키지의 모듈(재사용 가능한 코드) 매니저 도구로, 패키지를 설치하고 버전을 관리할 수 있습니다.

2. 리액트 시작하기

CRA

Creat React App

create-react-app 을 통해서 하나의 명령어로 react web app 을 set up 할 수 있습니다.

성공적으로 실행되었다면 app 이름으로 된 폴더가 생기고 해당 폴더로 들어가면 다음과 같은 파일트리 구조를 가집니다.

↓ 참 고 ::세 폴더 중 알아두어야 할것

ReactDom.render( )

component를 페이지에 렌더링 해주는 역할을 한다. 인자를 두개받으며, 내용은 아래에서 설명!

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);