DAY02

https://npmtrends.com/

npm trends: Compare NPM package downloads

우리가 react를 배워야 하는 이유... react가 많은 비율을 차지하고 있음.

이미 만들어져 있는 프로젝트들이 대부분 react기 때문에 react를 배워야 함.

그렇다고 vue와 angular가 react보다 극도로 좋냐? 그건 아니다. 이미 많은 것들이 react고, vue와 큰 차이가 없기 떄문에 굳이 비용을 넣으며 바꿀 필요성이 없기 때문.

 

html, css는 동적으로 데이터를 가져오는 것에 한계가 있음.

 

Javascript는 실시간, 동적 데이터 이동에 더 유리하다.

그래서 Javascript를 이용하고자 생각한 것.

 

 

---

 

1. React.js란?

복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해서 페이스북에서 제작되었다. 자바스크립트 기반의 라이브러리 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 주로 사용된다.

특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하는 것이 아닌, 기존 코드를 없애고 다시 새롭게 랜더링한다.

 

2. 랜더링(Rendering)

- 화면에 보여주는 것

- 코드가 번역되어 실행된 뒤 화면을 통해 사용자에게 보여진다.

 

3. 초기 랜더링(Mount)

- 가장 처음으로 랜더링 되는 것

- render() 함수를 사용하여 view를 정의하고 초기 랜더링을 진행하게 된다.

 

4. 리랜더링(Re-rendering)
- 뷰를 업데이트 해야 할 때 다시 지웠다가 그려야 하며, 이를 리랜더링이라고 한다.

- 전체를 모두 지우고 다시 그리는 것은 비효율적이기 때문에 이전 DOM 트리와 새로운 DOM 트리를 비교한다.

- 비교한 뒤 변경된 요소의 부분만 리랜더링 된다. 단, 부모가 리랜더링되면 자식도 리랜더링된다.

- 반대로 자식이 리랜더링되면, 부모가 리랜더링 될 수 있다.

 

5. 컴포넌트(Component)
- 리액트에서 앱을 이루는 최소한의 단위를 의미한다.

- 컴포넌트(자식)가 모여있는 곳을 컨테이너(부모)라고 함

- 컴포넌트가 모여서 하나의 앱이 되며, 각 컴포넌트는 분리되어 재사용이 가능하다.

 

6. 버츄얼 돔(Virtual DOM)

- 화면보다 가상돔에 먼저 랜더링이 된다. (즉시 값의 변화를 비교한다.)
- 컴포넌트에 변화가 감지되면 Virtual DOM에 랜더링이 되며, 이전 Virtual DOM과 현재 Virtual DOM을 비교하여 이로 인해 필요한 부분을 리랜더링 시킨다.

- Javascript에 확장이 가능한 XML 특성을 더한 JSX 문법으로 React가 구동된다.

 

7. 프롭스(props)

- 컨테이너를 부모, 컴포넌트를 자식이라고 부르기도 함

- 컴포넌트들을 관리하기 위해서 부모에 있는 속성들을 넘겨주는 것을 props라고 함

- 프로퍼티가 모여있다고 해서 props라고 함

 

---

초기 설정 하기

 

1. index.js 파일의 React.StrictMode 삭제

불필요하기 때문에 삭제해도 된다.

이렇게 삭제해주면 된다.

 

2. App.js에 있는 기존 코드를 싹 날려준다.

이 상태로 만들어주면 된다.

 

 

3. 컴포넌트 파일 이름은 무조건 대문자로 시작해야 한다. 실수로 소문자로 만들게 되면 인식에 에러가 계속 생길 수 있으므로 삭제하고 다시 대문자로 시작하도록 파일을 새로 만들어야 한다.