React 공식문서 - Hook
함수형 컴포넌트에서 React state와 생명주기(lifecycle)을 연동할 수 있게 하는 함수
Hook을 이용해 기존 Class 바탕의 코드를 작성할 필요없이 React 기능을 사용할 수 있다.
-
Hook을 반드시 사용할 필요는 없고 선택일 뿐이다.
-
Hook은 React 개념에 좀 더 직관적인 API를 제공한다.
사용 규칙
-
최상위에서만 Hook을 호출해야한다. 반복문,조건문 등 함수 내에서 Hook을 사용하지 않는다.
-
함수형 컴포넌트에서만 호출한다. 일반 JS함수에서는 호출하지 않는다.
나만의 Hook 만들기
- 컨벤션 : 이름이
use로 시작하고, 안에서 다른 Hook을 호출하면, 그 함수를 custom hook이라고 부른다.
useState
-
useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공
-
useState 는 this.setState 와 유사하지만, 이전 state와 새로운 State를 합치지 않는다는 차이가 있다.
-
초기값은 첫번째 렌더링에만 한번 사용된다.
-
useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 된다.
-
함수형 컴포넌트는 this를 가질 수 없기 떄문에 this.state를 할당하거나 읽을 수 없어서 useState를 통해 사용
useEffect
-
함수형 컴포넌트 내에서 side effect를 조작할 수 있게 한다.
-
React 컴포넌트에서 DOM을 직접 조작하는 작업을 side effect , 짧게 effect 라고 한다.
-
이 것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서 구현할 수 없기 떄문이다.
-
컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지를 말한다.
- DOM 업데이트를 수행한 이후에 불러낼 것
-
생명주기 함수들을 통합한 것
- componentDidMount
- componentDidUpdate
- componentWillUnmount
-
DOM을 바꾼뒤에 effect 함수를 실행할 것
-
컴포넌트 안에 선언이 되어있어서, props와 state에 접근도 가능하다.
-
컴포넌트를 렌더링할 때, React는 우리가 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행
Clean-up
-
effect를 해제하는 법은 해제하는 함수로 가능하다 (return)
- 컴포넌트가 마운트 해제 될 때 실행이 된다.
-
componentWillUnmount 상황에서 정리하는 것
useEffect(()=>{
~~
return ()=>{~~}
})effect에서 함수를 반환하는 이유는 무엇일까
effect를 위한 추가적인 정리 매커니즘이다. 모든 effect는 정리를 위한 함수를 반환할 수 있다.
의존성 배열
useEffect의 두번째 인수로 배열을 넘기면 그 값의 변경했을때만 작동한다.
- 컴포넌트 범위 내에서 바뀌는 값들과 effect에 의해 사용되는 값들을 모두 포함하는 것
