리액트의 프로젝트들은 컴포넌트로 구성되고, 그 컴포넌트들은 생명주기를 가진다.
리액트의 컴포넌트들은 클래스형과 함수형으로 나뉘는데 각 컴포넌트별 생명주기에 대해 알아봤다
먼저 요즘은 잘 안쓰는 클래스형 컴포넌트는,
이 그림 하나로 쉽게 설명이 가능하다.
컴포넌트가 처음 실행되는 것이 마운트,(마운팅)
render로 컴포넌트를 dom에 부착 후 MOUNT완료되면 componentDidMount가 호출된다. 이것이 updating.
그리고 컴포넌트가 제거되는 것이 unmount이다. componentWillUnmount가 unmounting에 해당된다.
그런데, 리액트17부터는 이 라이프사이클들이 deprecated된다.
그리고 훅(Hook)이란것이 등장한다.
useEffect, useRef등의 훅이 있고, 그 외에도 useReducer, useContext등의 훅도 존재한다.
훅을 사용하여 위의 길디긴 코드를 작성할 필요없이 상태값을 조작할 수 있다.
훅의 제약사항이 있는데,
1) 확실히 매번 같은순서로 매번같은 개수로 실행되어야 한다.
그래서 함수안이나 조건문 안에서는 훅이 있으면 안된다.
2) use+이름 형식으로 이름을 짓는다
등이다.
함수 컴포넌트에서는 데이터를 기준으로 라이프사이클이 진행된다. 그래서 state가 바뀌는 것에 따라 라이프사이클을 정할 수 있다.
componentDidMount와 componentDidUpdate는 합쳐진 것으로도 볼 수 있는데, 그것이 useEffect이다. useEffect에 return으로 함수를 제공하게 되는것은 componentWillUnmount의 역할을 대체하는 것으로도 볼 수 있다.
리렌더링과 상관없이 한번 만들어진 컴포넌트에서 이전 데이터를 유지하고 싶을 때 쓰는 훅은 useRef라는 훅이다. 이렇게 생성된 데이터는 리렌더링 여부와 상관없이 같은값이 유지된다. 초기값은 useRef의 파라미터로 넣어주면 된다. 접근시에는 .current속성을 사용해야한다. useRef는 DOM노드를 저장하는 데에도 사용할 수 있다. ref props로 넣고 나중에 DOM에 직접 접근하면 된다.
