1. What is Hooks?
React에서 컴포넌트를 선언하는 방식에는 2가지가 있다.
첫 번째는 1차 프로젝트 때 사용했던 Class형 컴포넌트 방식이고,
다른 하나는 이번 2차 프로젝트 때 사용했던 함수형 컴포넌트 방식이다.
그러나 우리가 앞서 배웠던 함수의 특징을 생각해보면 이상하다는 생각이 든다.
함수는 상태를 저장하지 않는다고 배웠기 때문이다.
또한 함수는 실행이 완료되면 함수 내에서 사용했던 모든 메모리들을 정리한다.
우리는 이를 garbage collector라고 알고 있다.
그렇다면 함수형 컴포넌트를 통해서 어떻게 State 관리와 Lifecycle이 가능할까?
그 기능을 담당해주는 것이 바로 Hooks이다.
Hooks를 사용하면 따로 Class를 사용할 필요가 없다!
2. UseState와 UseEffect
리액트 공식문서의 Hooks를 살펴보면 Hook을 사용하는 경우가 크게 3가지로 나와있다.
그 3가지는 UseState와 UseEffect, Custom hook(자신만의 Hook 만들기)인데, 이번 블로깅에서는 가장 보편적인 Hook에 대해 설명하고자 한다.
(1) UseState()
State hook은 함수형 컴포넌트에서 state를 사용할 수 있도록 해주는 hook이다.
const [foo, setFoo] = useState(초기값)
- UseState는 변수(foo)와 변수의 상태를 갱신하는 함수(setFoo)한 쌍으로 이루어져 있으며 (변수의 이름은 의미에 따라 마음대로 지을 수 있음)
- 함수의 인자에는 초기값이 들어간다.
여기서 말하는 변수는 우리가 클래스형 컴포넌트에서 사용했던 this.state와 같은 기능을 수행한다고 보면 된다.
그렇다면 변수 뒤에 오는 변수의 상태를 갱신하는 함수는 클래스형 컴포넌트의 this.setState와 같은 기능을 수행한다고 볼 수 있겠다.
React 공식문서 참고!!
(2) UseEffect()
함수형 컴포넌트에서 Effect Hook을 사용하면 Side effect를 수행할 수 있다.
(side effect는 컴포넌트가 render된 이후, 비동기적으로 처리되는 event들을 의미한다.)
useEffect(() => { fetchChart(); }, []);
- useEffect는 인자로 함수와 배열을 넣을 수 있다.
- 여기서 함수는 render이후 동작하게 될 함수를 의미하며,
- 배열deps(dependency)은 동작 시점을 정할 수 있도록 하는 의존값을 가지고 있는 배열이다.
팁
리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.
(리액트 공식문서 참조)
