- 리엑트의 라이프사이클 매서드, react hook
모든 리엑트 컴포넌트는 아래와 같은 라이프사이클이 존재한다.
저, 리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되고, 사라질 때 동작하는 코드를 넣을 수 있게 도와준다고 보면 된다.
그 중에서도 대표적으로는 constructor, componentDidMount, componentDidUpdate, componentWillUnmount 가 있다.
처음에는 클래스형 컴포넌트가 주로 사용되었는데, 이 친구들은 라이프사이클 메서드를 이용해서 상태 관리나 라이프사이클 이벤트를 처리했다. 그런데 리액트 v16.8부터 Hook이라는 걸 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다.
useState는 컴포넌트의 상태를 관리하고, useEffect는 컴포넌트가 화면에 그려진 후에 어떤 작업을 할지 정의할 수 있게 해준다. 즉, 클래스형 컴포넌트에서의 componentDidMount, componentDidUpdate, componentWillUnmount 같은 라이프사이클 메서드의 대체재인 것.
useState, useEffect 같은 훅을 이용하면 클래스형 컴포넌트에서 사용하던 라이프사이클 메서드와 비슷한 기능을 할 수 있게 되어서, 좀더 가독성이 좋고 직관적인 함수형컴포넌트+hook조합이 대세가 되었다.
Hook은 이름에서 알 수 있듯이, 기능을 '걸어놓는다'는 의미가 있다. 더 쉽게 말하면, 컴포넌트의 상태와 라이프사이클을 '걸어놓고' 필요할 때 사용하는 것이다.
가장 기본적인 Hook은 useState와 useEffect다. useState는 컴포넌트의 상태를 관리하는 Hook이며, useEffect는 라이프사이클을 관리하는 Hook이다.
useState는 상태 값을 가지고 있으며, 이 값을 업데이트하는 함수를 제공한다. 이렇게 하면, 컴포넌트가 리렌더링 될 때마다 동일한 상태를 공유할 수 있게 해준다.
useEffect는 3 가지 주요한 목적을 가지고 있다. 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트 될 때마다, 그리고 컴포넌트가 언마운트 될때 실행해야 하는 코드를 정의한다.
즉, useEffect는 클래스형 컴포넌트에서 본 componentDidMount, componentDidUpdate, componentWillUnmount 메서드들의 조합으로 이해할 수 있다.
2. 회고
점점 시간이 빨리간다.
react-redux에 대한 익숙해짐이 시급함.
