리액트 생명주기(class , hooks)

과거 class 문법에서는

1. 최초에 constructor가 실행되어 props와 states를 비교하고 컴포넌트를 렌더링한다. 이에 따라 DOM을 업데이트를하고, componentDidMount가 실행된다.

2. component가 업데이트가 될때에는 , props와 states를 비교한뒤, shouldComponentUpdate가 실행된다. 그리고 바뀐값이 있는지 없는지 rerender를 결정한다. DOM을 업데이트한뒤에, componentDidUpdate를 실행한다.

3. componentWillUnmount를 실행한다.

최근 hooks문법에서는

1. useEffect가 위의 모든 역할을 대신한다. (componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할)

2. 문법 → useEffect(<function>,<array>) 첫번째 인자에 실행할 함수, 두번째인자에 실행할 조건

3. 함수를 return할수있는데, clean-up이라고 한다. (useEffect가 실행될때마다 실행되는함수)