Hook?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.
Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
1. 개요
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
2. 동기
컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능합니다.
Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어줍니다.➜ 자신만의 Hook 만들기
복잡한 컴포넌트들은 이해하기 어렵습니다.
각 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 합니다. 함께 변경되는 상호관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해칩니다.
이같은 문제를 해결하기위해, 생명주기 메서드를 기반으로 쪼개는 것 보다는, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다. ➜ Effect Hook
Class은 사람과 기계를 혼동시킵니다.
- JavaScript의 this 키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주고, 코드의 재사용성과 구성을 매우 어렵게 만듦
- Class에 대한 이해가 까다로워서, React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등은 숙련된 React 개발자 사이에서도 의견이 일치하지 않음
- 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하길 원했음
이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다.
3. 사용 규칙
- 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
- React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.
내장 Hook
useState
- useState는 현재의 state 값과 이 값을 업데이틑 하는 함수를 쌍으로 제공함
이것은 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있습니다.
- 인자로 초기 state 값을 하나 받음
- 하나의 컴포넌트 내에서 state hook을 여러개 사용할 수도 있음
- 대신에 React는 매번 렌더링할 때 useState가 사용된 순서대로 실행함
useEffect
- 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업과 같은 동작을 side effects (혹은 effects)라고 함.
➜ 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줌 - 기본적으로 React는 매 렌더링 이후에 effects를 실행함. 첫 번째 렌더링도 포함해서
- effect를 해제할 필요가 있다면 해제하는 함수 반환하면 됨. (선택)
useEffect(() => { return () => { effect를 해제하는 함수 }}); - Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 class 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
useContext
const value = useContext(MyContext);- const 객체 (React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환함
- useContext로 전달한 인자는 context 객체 그 자체여야함
useContext(MyContext)O
useContext(MyContext.Consumer)X
useContext(MyContext.Provider)X - useContext로 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 됨. 리렌더링 줄이고 싶다면 메모이제이션을 사용해 최적화 가능함
