패스트캠퍼스 챌린지 49일차 (Hooks 를 통한 해결)

22.3.13 (일) +49days

2. Hooks 를 통한 해결

Too many hooks

• useState <> Component.state / setState
  • 함수형 컴포넌트 내에서 상태 관리가 가능해짐
• useEffect <> Component.componentDidMount / componentDidUpdate / componentWillUnmount
  • Lifecycle Method 대체 가능
• useRef <> React.createRef
  • DOM Element 등, 렌더링 시점에 상관 없이 참조되는 값 저장하기
• useContext <> Context.Consumer / Component.contextType
  • 여러 컴포넌트에서 공유할 수 있는 상태 만들기 (Scoped state?)
• useCallback / useMemo - 참조 유지
  • 자식 컴포넌트에 Props 전달할 때, 무조건적인 렌더링 발생 방지

요약

짧고, 간결하고, 빠진 기능이 없으며, 재사용성이 확보된

“Why we’ve started using FC + Hooks?”

클래스 컴포넌트의 구조적 문제 해결

props, state 변조 현상 및 this 바인딩 문제 방지

간결하고 일관적인 문법

Lifecycle Hooks = useEffect

Component.state ⇒ useState, useRef, useContext

커스텀 훅을 활용한 코드 재사용성 향상

고차 컴포넌트, Mixin, ... ⇒ Hooks 통일

 

 

---

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다