리액트 - 공식문서로 디테일 잡기 (고급)
목차
1️⃣ Hooks
2️⃣ Composition
3️⃣ HOC
4️⃣ Memoization
5️⃣ Context
6️⃣ Portal
7️⃣ Render Props
8️⃣ PropsTypes
9️⃣ Reconciliation
🔟 React Developer Tools
🧑🏻💻 오늘의 회고
1️⃣ Hooks
Hook 이란? 공식 문서
Class의 단점을 보완하면서
라이프사이클 등과 관련된 함수를 재사용 가능토록 함
Hooks 기본 정리
Hooks 등장
➡️ Class의 단점 보완 / 재사용성 강화
(관련 있는 코드는 떨어져있고, 관련 없는 코드는 붙어있는 단점이 있었음.)Hooks 사용 규칙
➡️ 최상위 (this 없이 state를 그냥 부를 수 있음) / 함수형 컴포넌트 /custom Hook 에서만 사용가능Class의 state
➡️ Hook을 먼저 배웠기에 고민 할 필요 X ~
Effect Hook
Effect Hook 이란? ( == useEffect)
React component가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록 하는 리액트 Hook이다.
사용하는 경우
- 데이터 가져오기
- 구독 설정하기
- 수동으로 리액트 컴포넌트의
DOM을 수정하기
(componentDidMount/componentDidUpdate/componentWillUnmount이 3개가 합쳐진 것 이라고 볼 수 있음)
clean up
➡️ 구독과 구독해지를 한 공간에서 가능
dependency array
➡️ 특정 값의 변경시에만
useEffect를 실행해서 성능 최적화 가능
Custom Hook
Custom Hook이란? 공식 문서
컴포넌트들에 반복되는 Hook들을 묶을 수 있음.
다양한 Hooks
useState,useEffect,useContext,useReducer등등..
결론 : 목적에 맞는
Hook을 쓰되, 필요하면 자유롭게 만들자!
강사님의 한마디..
한국어 공식문서가 좋지 않은 경우도 있다.
아무래도 번역에는 번역한 사람의 의도가 들어가기 때문에
저자의 의도를 놓치는 경우가 발생 할 수 있으므로,
원어로도 한번 보는것을 추천한다! (feat. 파파고)
2️⃣ Composition
Composition(합성) 이란? 공식 문서
컴포넌트에 다른 컴포넌트를 담는 것.
(children, custom)
객체지향에서 합성이란?
서로 다른 객체를 여러개 붙여서 새로운 기능이나 객체를 구성하는 것.
일반적으로 합성 할 클래스를 변수에 할당 후 사용하는 구조.
이렇게 합성 한 경우, 상속과는 다르게 클래스간의 유기적으로 서로의 클래스를 융통성있게 합성 할 수 있음. (has-a)
리액트에서 화면 분리 방법? (left, right)
Composition 확장
typeof로 type을 체크해서, 다양한 요소들을 추가할 수 있음.
요런식으로!
3️⃣ HOC
HOC(Higher Order Component) 란?
고차 컴포넌트는 컴포넌트를 가져와서 새 컴포넌트를 반환하는 함수
4️⃣ Memoization
Memoization 이란?
메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
React.memo 공식 문서
동일한 props로 렌더링을 한다면, React.memo를 사용하여 성능 향상을 누릴 수 있음.
memo를 사용하면, React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된된 결과를 재사용함.
💡 Profiler API
➡️ 렌더링 빈도와 비용 측정해줌
강사님의 한마디...
무언가를 만들려는데 스타일링이 막연하다면?
다른 사이트를 카피해보자. 개발자도구로 스타일을 다 들여다 볼 수 있다.
(프론트엔드는 공개되어있다는 장점이 있다.)동작도 카피해보자!
검색하면 다 나온다!
(까짓것 하면 돼지 뭐~ 라는 마인드로 ㄱㄱ)
너무 맞는 말이다. 나도 맨 처음 심리테스트를 만들려고 리액트를 접했을때,
github에서 기존에 존재하던 코드를 cloning 한뒤 필요한 동작들만 그때그때 검색해서 써먹었었다! 왠만하면 진짜 다 만들수 있다 ~ !
📌 5️⃣ Context
Context 란?
컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법
(props를 넘기지 않고도 그 값을 자식에서 쓸 수 있음)
장점 : Props drilling의 한계 해소
단점 : Context를 사용하면 재사용하기 어려움
6️⃣ Portal
Portal 이란? 공식 문서
DOM계층 구조 바깥에 있는DOM노드로 자식을 렌더링하는 최고의 방법
createPortal
➡️ 부모 컴포넌트 DOM 트리로부터 벗어날 수 있음
<Component /> <div />이럴때 Component 위에 div가 쌓이는데,
<Portal/>로 묶으면 Component가 가장 위에 쌓임
7️⃣ Render Props
무엇을 렌더링할 지 알려주는 함수.
(컴포넌트 재사용의 한 방법)
🗣 강사님의 한마디..
개발을 잘하는 사람의 특징
- 개발을 진짜 좋아한다.
- 책임감이 강하다. (결국에는 해냄)
- 센스가 좋다. (게으름 + 일머리)
- 근본을 파고든다. (WHy에 대한 답을 확실하게 알고 넘어감)
제일 잘하는 사람 : 책임감을 가지고 근본을 파고 드는 사람
8️⃣ PropsTypes
Props의 타입을 확인하기 위한 도구. 공식 문서
(개발 모드에서만 동작함)
childrend의 갯수를 제한할 수 있음.
예시) 이런식으로 비교해서 유효하지 않는 prop에 대한 경고를 줌.
(
isRequired: 무조건 포함되어야 하는 값. 없으면 error뜸)
9️⃣ Reconciliation (재조정)
Reconciliation 이란?
➡️ 실제 DOM과 Virtual DOM과의 동기화 (공식 문서)
(UI 갱신에 대한 React의 접근법)
- 루트부터 비교
- 트리를 파괴 -> 부모가 바뀌었다면 트리를 버린다.
- Keys -> 자식 재귀 처리 시 효율성 확보.
Virtual DOM
Virtual DOM이란?
➡️ 실제 DOM과 동기화 할 가상 표현
가상의 표현을 메모리에 저장하고 실제 DOM과 동기화하는 과정 == 재조정 공식 문서
Design Principles
리액트가 무엇을 하고 무엇을 하지 않는지에 대한 개발 철학 공식 문서
리액트의 스케쥴링 업데이트 (setState가 비동기적인 이유)
🔟 React Developer Tools
리액트 개발자 도구 (크롬 익스텐션 링크)
➡️ 크롬 상에서 리액트의 구조를 살펴보고, 성능을 측정할 수 있음. (개꿀~
console.log안찍어도됨~)
📌 React로 사고하기
리액트로 무언가를 설계하고 만들때, 어떤 패턴으로 진행하면 좋은지에 대한 내용. 공식 문서
순서)
1. 컴포넌트 나누기
2. 데이터 가져오기
3. 상태 관리하기
4. 각각 기능 구현하기
5. 디자인 입히기
🧑🏻💻 오늘의 회고
오늘까지 리액트를 대충 한번 훑은 것 같아서 일단 기분은 좋았다!
그리고 오늘 국비지원 수강자들을 대상으로 한 k-digital 해커톤 서류 결과 발표가 있었는데,
다행히 합격했다 ~~ !! 와 ~~ 🥳 (무려 60팀이나 있었다 ㄷㄷ)
인생이나 코딩이나 실전을 통해 배우는걸 즐기는 나로서는, 좋은 기회가 와서 너무 기뻤고,
이제 막 리액트를 끝냈는데 써먹을 프로젝트가 바로 생기다니,
참 기가 막힌 타이밍인 것 같아서 또 기분이 좋았다 ~
입상을 목표로 죽기살기로 가볼 예정이다 ~ 🔥 🔥 🔥 🔥 🔥 🔥
