브라우저를 열고 사이트에 들어가며 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 많다.
이런한 이유로 웹페이지 보다 웹 어플리케이션이라는 단어가 많이 사용된다.
웹어플리케이션에서 다양한 UI,UX를 구현하기 위해서는 이전의 (DOM,jQuery)로는 코들르 유지보수한는 것이 어려워지자 좀 더 편리한 조작과 관리를 위해 Frontend Framework(Library)가 등장하게 되었다. 그 중 가장 많이 사용되는 것이 Angular, Vue, React 이다.
1.React의 장점
UI를 빠르게 업데이트
리액트는 화면의 한 부분을 컴포넌트라는 단위로 나눌 수 있어 독립적으로 관리할 수 있다.
컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게 해주어서 코드의 재사용성을 높여준다.
선언적 프로그램
Javascript는 How로 접근하여 단계적으로 풀어나가는 방식이지만, 리액트는 상호작용이 많은 UI를 만들때 생기는 어려움을 줄여준다. 어플리케이션의 상태에따라, 데이터의 변경에 따라 적절한 컴포넌트만 효율적으로 갱신하고 랜더링한다.
Virtual DOM
기존에는 DOM을 조작해서 브라우저에 화면을 나타내는 형식이었다. 그런데 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링 하기때문에 느려 질 수 밖에 없었다. 그래서 리액트는 가상DOM을 이용해서 실제 DOM을 조작하는 횟수를 줄여 성능을 빠르게 개선하였다. 리액트에서 데이터를 변경하면 가상 DOM을 기존의 가상 DOM과 비교하여 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용한다.
2.작업환경 설정
Node.js & npm
Node.js
Node.js는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는데 필요한 주요 도구들 (ex바벨, 웹팩)이 Node.js기반이기에 설치해야 한다. Node.js를 설치하면 npm이 자동으로 설치된다.
npm
npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
3.CRA(create-react-app)
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며,개발환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 했을때 패키지 버전만 올리면 된다.
3-1.CRA설치
npx create-react-app directoryName
로컬 서버 띄워서(npm start) 확인해보면 http://localhost:3000 주소를 확인 할 수 있다. 
3-2.CRA기본 폴더 및 파일 구성
1) node.modules
CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
2) package.json
CRA기본 패키지 외 추가 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
-dependencis
3) .gitignore
.gitignore파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
4) public - index.html
<div id="root"></div>5) src - index.js
ReactDOM.render( <App /> , document.getElementById('root'))- ReactDOM.render 함수의 인자는 두 개
- 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
- 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
6) src - App.js
- 현재 화면에 보여지고 있는 초기 컴포넌트
- 작업 시
<Login /> 컴포넌트, <Main /> 컴포넌트를 그 자리에 대체하여 작업하면 된다.
- React Router 를 배운 후에는
<Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.
