[React] Hooks

songtak·2020년 11월 10일
0

React

목록 보기
2/3
post-thumbnail

Hook은 React 16.8에 새로 추가된 기능입니다. 
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다.
이것은 독립적인 테스트와 재사용이 가능합니다. 

Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 
이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉬워집니다.

Hook은 Class없이 React 기능들을 사용하는 방법을 알려줍니다. 
개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다.

Hook 개발 이유

React는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않습니다.
(예를 들어, 스토어에 컴포넌트를 연결하는 것)
만약 이전부터 React를 사용해왔다면, 이것을 해결하기 위해 render props 그리고 고차 컴포넌트와 같은 패턴에 익숙할 것입니다.

그러나 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게 만듭니다.

React 개발자 도구에서 전형적인 React 애플리케이션을 본다면,
providers, consumers, 고차 컴포넌트, render props 그리고
다른 추상화에 대한 레이어로 둘러싸인 “래퍼 지옥(wrapper hell)“을 볼 가능성이 높습니다.

개발자 도구에서 걸러낼 수 있지만, 요점은 더 깊은 문제입니다.
React는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요합니다.

👋 Hook 사용규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

1. 상위(at the top level)에서만 Hook을 호출해야 합니다.

반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다.
이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도
Hook의 상태를 올바르게 유지할 수 있도록 해줍니다.

만약에 조건부로 effect를 실행하기를 원한다면, 조건문을 Hook 내부에 넣을 수 있습니다.

2.  React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.

일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.
(Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다.)

👉 state 호출 순서

React는 어떻게 특정 state가 어떤 useState 호출에 해당하는지 알 수 있을까요? 
정답은 React가 Hook이 호출되는 순서에 의존한다는 것입니다. 
모든 렌더링에서 Hook의 호출 순서는 같습니다.

profile
멋쟁이 개발자

0개의 댓글