What is React?
React의 철학과 구조에 대해 알아보자
2.1 Why React?
What’s React?
A JavaScript library for building user interfaces
유저 인터페이스를 만들기 위한 자바스크립트 라이브러리
2019년부터 함수형 컴포넌트 (Hooks)의 등장
SPA / CSR
Single Page Application
Client Side Rendering : Client 측에서 Rendering이 이뤄짐
SSG/R : Static Side Generation, Server Side Rendering
2.2 Libraries vs Frameworks
Frameworks
Routing, UI, HTTP Clients, State management 등 Application을 빌드하는데 필요한 모든것이 갖춰진 것을 말함
ex) Angular, Vue ( Vue도 Framework에 속하지만, http clients나 state management를 제공하지 않는다는 점에서 경량화된 framework라고 보는게 맞음)
단점 : Framework에서 권장하는 모든 것을 다 공부해야한다. 자율성이 떨어진다.
Libraries
웹 어플리케이션을 만드는데 필요한 솔루션
장점 : 진입장벽이 낮고, 배우는데 시간이 비교적 적게 든다.
2.3 React Philosophy
💡 Renders UI and responds to events
UI를 Components 단위로 보여주고 events에 반응하는 라이브러리
Components
A highly cohesive building block for UIs loosely coupled with other components
⇒ 즉 내부에서는 밀집도, 응집도가 높게 결합하면서도 다른 컴포넌트들과의 연결성은 매우 약한게 가장 이상적인 컴포넌트다.
React’s Components Structure
Root : 단 하나의 최상위 요소 (화면 전체)
Navbar : 네비게이션 바
Content : 컨텐츠 박스
2.4 How to divide the components?
어떤 단위로 컴포넌트를 나눠야 할까?
재사용성: DRY ( Don’t Repeat Yourself )단일책임: SR ( Single Responsibility )
- 한 UI에서는 하나의 도메인만을 담당해서 보여줄 수 있도록 한다.
- 설령 재사용하지 않는 부분이더라도, 단일부분만을 책임 질 수 있도록 한다.
2.5 How React works?
리액트란? - 컴포넌트들의 집합체
함수 컴포넌트 ( Function Component )
-
하나의 컴포넌트를 정의할 때는
함수로 만들 수 있다. -
컴포넌트는 항상
대문자로 시작한다. -
한 컴포넌트는
JSX를 반환해야 한다. -
컴포넌트가 가지고 있는
data, 즉 상태 값은useState라는 함수를 이용해 변수형태로 상태값을 저장한다. -
외부에서 변경 가능한 속성 값은
props를 통해 전달이 된다. -
각각의 UI 컴포넌트들은 상태값을 가지고 있는
state들로 구성이 되어 있다.⇒ 즉 React 는 render, state, props로 구성되어 있다.
Virtual DOM
- React도 HTML처럼 가상의 Virtual DOM Tree를 가지고 있다.
- 상태값이 변경되어 업데이트가 된다면 바로 Virtual DOM Tree를 업데이트 시키는 것이 아니라, Previous Virtual DOM Tree와 비교한다. 이후에 실제로, Browser에서 바뀌어야하는 Real DOM Tree 요소를 업데이트 시킨다.
- 즉, React에서 state를 많이 변경한다 하더라도, Browser에서는 변경되어야 하는 부분만 변경이 된다.
- 사용자가 빠르고 편안하다고 느끼기 위한 정도는 60fps인데, 리액트에서 자체적으로 효율적으로 update를 한다.
[참조] Virtual DOM에 대한 설명
정리
내부상태를 나타내는 State
외부로부터 전달받은 상태 Props
이 두개의 데이터를 나타내는 render 파트가 있다.
상태가 변경될 때 마다 re-render 된다.
상태가 변경된다면 Browser에는 실제로 변경된 부분만 화면에 업데이트 된다.
2.6 What is React Hooks?
2019년 이전 class 컴포넌트의 단점들
- 배우는 난이도가 어려움 ( 클래스, 상속 등등 )
- this 바인딩 이슈
- 로직들을 재사용하기가 어렵다.
React Hooks
즉, Hook은 함수 컴포넌트의 lifecycle과 state와 같은 재사용 가능한 로직들 을 갈고리처럼 낚아 채 연결하는 역할을 한다.
⇒ 즉, React Hooks는 use로 시작하는 재사용 가능한 함수다.
⇒ custom hooks를 만들더라도 use로 시작해야 한다.
ex) useState, useEffect, useRef, useMemo, usecallback …
useState : 상태관리 로직
useEffect : 컴포넌트 생애주기 관리 로직
useUser : 서버에서 받아온 사용자