React Hooks
이 글은 리액트 공식 문서의 내용을 참고하여 작성했습니다.
Hook 이란?
- Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(Hook into)”할 수 있게 해주는 함수이다.
- useState, useEffect와 같은 내장 Hook도 있고 직접 Hook을 만들 수도 있다.
- State Management 라이브러리를 따로 사용하지 않더라도 어느정도 까지 리액트에서 기본적으로 제공되는 방법들을 이용해서 상태 관리를 할 수 있겠다.
useState
리액트에서 state 값이라함은 함수가 끝나고 나서도 유지되는 값 정도로 이해할 수 있다. useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.
javascript의 배열 구조 분해 문법을 통해서 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다.
const [age, setAge] = useState(26)
useState로 부터 array를 리턴값으로 받게 되는데, 첫 번째 값에 state, 두 번째 값에 state를 변경할 수 있는 함수를 받게 된다. useState 인자에는 초기값을 세팅할 수 있다.
useEffect
React에서 effect라 함은 리액트 컴포넌트 안에서 데이터를 가져오거나 DOM을 직접 조작하는 작업을 하는 등의 동작을 일컫는다. (side-effects를 줄여서 effects) 이 동작들은 모두 다른 컴포넌트에 영향을 미칠 수 있고 렌더링 과정에서는 구현할 수 없는 작업이기 때문이라고 한다.
useEffect는 두 개의 인자를 받는데
- 함수 : 동작할 함수
- dependencies array
- dependencies array에 값을 넣지 않으면
componentDidMount와 같은 효과이다. - dependencies array에 dependency를 넣으면, 이 값이 변경될 때마다 useEffect 함수를 실행한다.
- 함수 안에 return 함수를 작성할 수 있는데, 이는
Unmount되었을 때 동작할 함수이다.
custom Hooks
상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생기는데,그럴 때는 custom Hooks를 작성하면 된다.
custom Hook 작성
use로 시작하는 이름을 짓고- 안에서 다른 Hook을 호출한다.
Hooks관련 작성한 코드들을 모두 다른 파일에 옮겨담고 외부에서 엑세스 할 것들을 return 해주면 일반적인 Hook을 사용하는 것처럼 외부에서 사용할 수 있다.
Hook 사용 규칙
- (반복문이나 조건문 내부가 아닌) 최상위에서만 Hook을 호출할 것
- React 함수 컴포넌트에서만 호출할 것
이 규칙들은 linter plugin 에서 강제하고 있음.
