Virtual Dom
가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
컴포넌트
UI의 조각이다. 엘리먼트를 독립적으로 만들어준다. 즉! 재사용성을 높인다.
앱의 기능을 단위별로 캡슐화 하는 React의 기본 단위이다.
Hook
컴포넌트에서 데이터를 관리(state)하고 데이터가 변경될 때 상호작용 하기 위해 사용한다.
useState 가 State Hook 이다.
기존에는 class component에서 state와 생명주기를 관리해야 했는데, 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가된 것이 Hook이다.
Hook은 React함수 내에서만 사용이 가능하며, 이름은 반드시 'use'로 시작해야 한다.
또한 최상위 level, 그니까 가장 바깥 괄호에서만 사용할 수 있다. (if, for, cb 안에서 안됨)
State Hook
useState는 컴포넌트 내 동적인 데이터를 관리하는 hook이다.
state는 읽기전용이다. 직접 수정하면 안된다.
state가 변경되면 자동으로 컴포넌트가 재 렌더링된다.
Effect Hook
함수 컴포넌트에서 side effect를 수행할 수 있다.
컴포넌트가 최초로 렌더링 될 때, 그리고 지정한 state나 prop이 변경될 때마다 이펙트 콜백함수가 호출된다.
useEffect(() => {
...
...
return () => {
// 여기는 re-rendering 되기 전과 컴포넌트가 없어질 때(destory) 호출할 함수를 작성한다.
}
})useMemo
지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다.
useMomo는 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하는 건 피하는게 좋다. 지속적으로 메모리를 잡아놓는 친구이다.
useCallback
함수를 메모제이션 하기 위해 사용하는 Hook. 컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
useMemo(() => func, deps)
useCallback(func, deps)
// 둘이 동일하다.useRef
컴포넌트 생애 주기 내에서 유지할 ref객체를 반환한다.
current 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
useRef에 의해 반환된 ref객체가 변경되어도 컴포넌트가 재렌더링 되지 않는다.
React에서 DOM Element에 접근할 때 사용된다.
Custom Hook
자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다.
한 로직이 여러 번 사용될 경우 함수를 분리하는 것과 같이 새로운 Hook을 만드는 것이다.
이름은 'use'로 시작해야하고, Hook내의 state는 공유되지 않는다.
Custom Hook을 여러곳에서 사용하게 될 텐데, 그렇게 되면 서로는 state를 공유하지 않는다는 말이다.
SPA
하나의 페이지 요청으로 전체 웹앱을 사용한다. 유저는 웹페이지를 마치 모바일 앱을 사용하는 것 같은 경험을 할 수 있다.
SPA의 특징
- CSR, Client-side routing 기술을 활용해서 페이지 진입 시에 리로드 없이 라우팅한다.
- AJAX 기술을 활용해, 페이지 이동시에 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다.
- MPA와는 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다.
- 자바스크립트만을 활용해 전체 페이지를 만들기 때문에, 첫 요청시에 빈 페이지를 받는다.
SPA 장점
- 서버에서 페이지를 만들 필요가 없으므로 CDN(Content Delivery Network)에 캐싱이 가능하다.
- 매번 페이지 요청을 할 필요가 없으므로 네트워크 요청이 줄어든다. 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다.
- 웹사이트를 개별 페이지 보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴 적용이 가능하다. 상태관리, 라우팅, 컴포넌트 재사용, Hook을 통한 로직 재사용 등등...
CDN
한국에서 netflix에 어떤 요청을 보냈다. 북미에 있는 서버는 해당 요청을 받고, 대서양을 건너 한국에다가 HTML, CSS, JS 등등...을 보내 줄 것이다. 물리적으로 엄청난 거리고, 심지어 netflix같은 플랫폼은 스트리밍 데이터를 계속 보내줘야 한다. 이는 굉장히 비효율적인 작업이 될 것이다. 이런 경우 netflix가 한국과 좀 가까운 쪽에 CDN서버를 만들어 둘 수 있을 것이다. 일본의 도쿄쯤? CDN서버를 만들어두고 데이터를 캐싱해 둔다면, 내 요청은 대서양을 건너지 않고, 일본의 CDN서버로 가서 캐싱된 데이터를 받아올 것이다.
SPA 단점
- MPA보다 SEO에 불리하다.
- 하나의 자바스크립트 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용이 중요하다.
- 여러 페이지를 전송받는 것 보다 하나의 거대한 JS앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느리다.
(code-splitting, tree-shaking, lazy-loading 등을 통해서 번들 사이즈를 줄이고, 필요한 경우에만 로드하는 등의 고민이 지속적으로 필요하다.)
MPA
서버에 미리 여러 페이지를 두고, 유저가 네비게이션 요청에 적합한 페이지를 전달한다.
미리 서버에서 전체 페이지를 빌드해서 브라우저로 전송한다. 서버에 라우팅을 처리하는 기능이 있고, 여러페이지를 관리한다.
페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기가 힘들다.
SPA에서의 라우팅
History API를 이용해서 페이지 리로드 없는 페이지 전환을 구현한다.
history, location등 HTML5 API를 활용한다.
visibilitychange, popstate, beforeunload... window event를 활용해 페이지 전환등의 이벤트 시 핸들러 등록
react-router 사용
React Router v5
Declarative routing for React
Imperative vs Declarative
둘은 상반되는 의미이다. 번역기를 돌려보면
명령적인 vs 선언적
Imperative
좀 더 직접적으로 작성하는 방식이다.
hitory를 사용해서 구현하게 된다.
handleClick = () => push('/login')Declarative
태그를 두고 사용자가 누르면 이동하게 하는 방식이다.
React의 JSX방식으로 구현하게 된다.
<Link to="/login">react-router의 기능
- React 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입 시 컴포넌트를 렌더링하게 한다.
- query, path variable 등 URL parameter를 얻어 활용한다.
- 조건에 맞지 않을 경우 redirect한다.
- 페이지 이동 시, 이벤트 핸들러를 등록한다.
- nested route를 구현한다.
react-router의 사용
BrowserRouter로 감싸 Router Context를 제공해야 한다.- Route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포너트를 넣는다.
- Link로 특정 페이지로 이동 시, 리로드 없이 페이지가 이동한다.
- Switch로, 매칭되는 라우트 하나를 렌더링하게 한다.
Switch
- 여러 Route중 매치되는 Route 위에서부터 하나 선택해서 렌더링한다.
- 매칭되는 Route가 없으면 아무것도 보여주지 않는다. 404page를 띄우던가
- path='/'의 경우 모든 path에 매칭되므로 exact키워드를 추가하거나 가장 아래로 내린다.
Redirect
Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동한다.
Switch 안에서 쓰이면, from, to를 받아 이동한다.
Link, NavLink
- to prop을 특정 URL로 받아, 클릭 시 네이게이션 한다.
- anchor tag를 래핑한다.
- NavLink는 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있다.
- to에 location object나 함수를 받을 수 있다.
useHistory, useLocation, useParams, useRouterMatch
최상위 컴포넌트가 아니더라도 hook으로 react-retouer 관련 객체에 접근 가능하다.
history, location, params, match객체에 접근한다.
Private Route
특정 조건이 충족되지 않는다면 다른 페이지로 Redirect 하도록 한다. 유저의 상세 페이지, 개인정보 변경 페이지 등을 만들 때 사용한다.
query string 활용
URL의 query string 정보를 활용해서 앱을 구성할 수 있다.
URLSearchParams API를 활용한다.
// detail?email=malza@gmail.com&address=ilsan
const loc = useLocation();
const searchParams = new URLSearchParams(loc.search);
const email = searchParams.get('email') // malza@gmail.com
const address = searchParams.get('address') // ilsan