React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다. 리액트와 같은 프론트 엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업뎅이트 해준다는 점이다. 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트 한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI업데이트는 줄고, 성능은 좋아진다.
Node.js는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미한다. 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager)이 자동으로 설치된다.
npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다. 마찬가지로 npm 버전을 확인하는 명령어를 통해 설치가 정상적으로 이루어졌는지 확인해 볼 수 있다. (npm -v)
CRA는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많다. 전반적인 스스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.
리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)
을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
1) node.modules
2) package.json
"dependencies"
node.modules
폴더에 존재"scripts"
npm run start
.3) .gitignore
.gitignore
파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.push
를 해도 .gitignore
파일에 작성된 폴더와 파일은 올라가지 않는다.1) public - index.html
<div id="root"></div>
2) src - index.js
ReactDOM.render( <App /> , document.getElementById('root'))
3) src - App.js
<Login />
컴포넌트, <Main />
컴포넌트를 그 자리에 대체하여 작업하면 된다.<Routes />
컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.1) public 폴더
2) src 폴더
Login.js
, Login.scss
Main.js
, Main.scss
reset.scss
- css 초기화commom.scss
- 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)컴포넌트는 재활용 가능한 UI 구성 단위이다. 예를 들어 , westagram main페이지를 컴포넌트로 나눈다면, 크게 Nav 컴포넌트와 Main컴포넌트, 그리고 Main컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로 나눌 수 있습니다.
컴포넌트의 특징:
1. 재활용하여 사용 가능
2. 코드 유지보수에 좋다
3. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다
4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다( 부모 컴포넌트 - 자식 컴포넌트)
컴포넌트의 종류:
1. Class component
JSX(javascript Syntax Extension)이란 자바스크립트 확장 문법입니다. 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
장점:
1.HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
2.HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.
3.vs.DOM + Event
특징:
1.모든 요소를 감싸는 최상위 요소(<>..<>)
2.자바스크립트 표현:(...javascript...)
3.class vs className
4.inline Styling: <div style = {{color : "red"}}>Hello React
5.Self Closing tag: