22.3.14 (월) +50days
Re-Introduction of React Hooks
3. Hooks의 제약 조건과 구현 방식의 연관성
다시 보기
컴포넌트 밖에서 실행하거나, 실행되는 Hook의 갯수가 일정하지 않다면…..
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
Invariant Violation: Hooks can only be called inside the body of a function component.
👉 https://ko.reactjs.org/docs/hooks-rules.html
Hooks, 어떻게 생겼을까
구현 방법 예상해보기
매번 함수형 컴포넌트가 실행될 때마다 이전 상태를 확인하고 기능을 수행함
실행된 Hooks 갯수가 달라져 실행 순서가 바뀔 경우 이전 상태를 비교하는 기준이 없어짐
⇒ Hooks 생성 시점에 unique key를 제공 했더라면?
const [name, setName] = useState({ key: ‘NameForGreeting’, state: ‘students!’}); // (...)
관리적은 측면에서 힘들어 진다.
⇒ Component 인스턴스를 내부에서 생성해 Key를 컴포넌트 영역에 한정 짓는다면?
함수형 컴포넌트가 내부적으로 클래스 컴포넌트에 감싸져서 ⇒
인스턴스를 생성하고 ... ⇒
Hooks 는 사실 클래시 컴포넌트 API 를 감싼 것처럼 변환될 뿐인... ⇒
감히 변환방법을 예상하기 힘들다
⇒ 매번 실행될 때마다 필요한 값(state, effect ...)을 컴포넌트 외부에 순서대로 붙여두자! = Closure
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
댓글