// from 드림코딩 React강의
React란 무엇인가?
javascript 라이브러리다.
프레임워크와 라이브러리의 차이?
프레임워크란 무언가를 만드는데 필요한 모든 것들이 갖춰져
제공(UI제작, Routing, HTTP Clients(네트워크 통신), State management)된다고
생각하면 된다.
ex) 집을 짓기 위해 갖춰진 골격 or 자동차, 비행기, 배 등의 이미 정해진 탈 것
라이브러리는 단순 활용 가능한 기능들의 집합니다.
ex) 집을 짓기 위한 공구들(망치, 톱 등등)
프레임워크는 라이브러리에 비해 자유도가 낮고 많은 규칙을 익혀야 하기 때문에 학습 시간이 오래 걸릴 수 있다.
React 컴포넌트를 만들 때는?
React 컴포넌트는 독립적이며 재사용성이 높게 제작하는 것이 좋다.
- 함수형 컴포넌트를 만들때는 항상 첫번째에 대문자를 표기해야 한다. ex) function App(){}
- js파일을 만들때는 컴포넌트의 이름과 똑같이 하는 것이 통상적이다. ex) App.js
Next.js에서는 app-app.js식으로 많이 짓는다고 한다.
파일 확장자로 js를 사용해도 되고 jsx를 사용해도 된다.
React의 동작 원리
일반적인 HTML로 구조를 잡게 되면 브라우저에서는 DOM Tree를 만들어 고정한다.
하지만 React는 가상의 DOM Tree(Virtual DOM Tree)를 가지게 되는데
만약 어떤 상태값이 변경되어 업데이트 된다면 DOM Tree를 바로 업데이트 하는 것이 아니라
상태값이 변경되기 전의 Virtual DOM Tree와 비교를 하게 된다.
그리고 비교를 통해 변경사항을 확인하게 되면 변경된 노드만 DOM Tree에서 업데이트 하게 된다.
React 핵심
React는 데이터를 State(내부 상태) Props(외부로부터 전달받은 상태)와 이를 나타내는 render가 있다.
상태가 변경될 때마다 re-render된다.
React Hooks
2019년 이전에는 class 형태로 컴포넌트를 만들었다.
하지만 class의 난이도, this 바인딩 이슈, 로직들을 재사용 하기 어렵다는 등의 단점들로 인해 function 형태의 컴포넌트가 등장했다.
React Hooks는 갈고리처럼 연결하다, 낚아채다라는 의미로 즉 재사용 가능한 로직들의 연결을 뜻한다.
** Hooks(함수들)은 값의 재사용이 아니라 로직의 재사용을 위한 것이다.
