라이프사이클과 useEffect

리액트의 모든 컴포넌트들은 라이프사이클이 존재하는데 그거에 대해 크게생각해 본적도 없지만 기술면접때 중요할꺼 같아 정리하려고 한다 🥲

 

 

 

리액트의 라이프사이클은 크게 4가지로 설명할 수 있다.

최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와

초기에 화면을 그려줄 때와, 업데이트가 될 때 호출되는 render() 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할이다

 

Mounting

컴포넌트가 처음 실행될 때 Mount라고 한다

컴포넌트가 시작되면 context, deflautProps와 state를 저장  => componentWillMount메소드를 호출 =>render 함수로 컴포넌트를 DOM에 부착하고 Mount가 완료된 후=>ComponentDidMount가 호출

componentWillMount에서는 Props나 state를 바꾸면 안된다 (Mount중이기 때문이며  DOM에 render하지 않았기 때문에, DOM에도 접근할 수 없다. )

 

Props UpDate

props가 업데이트될 때의 과정이다.

업데이트 되기 전에 업데이트가 발생하였음을 감지하고, componentWillReciveProps 메소드가 호출 => shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 => 업데이트가 완료(render)되면 componentDidUpdate가 된다. 

shouldcomponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render을 취소할 수 있다. =>성능 최적화를 한다. 쓸데없는 update가 일어나면 여기서 걸러낸다

State Update

setState 호출을 통해 state가 없데이트 될 때의 과정이다.

props update와 과정이 같지만, componentWillReceiveProps메소드는 호출되지 않는다. 메소드의 두 번재 인자로는 바뀔 state대한 정보를 가지고 있으며. componentDidUpdate는 두 번재 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있다.

 

Unmount

컴포넌트가 제거되는 것은 Unmount라고 한다

컴포넌트를 사용하지 않을 때 발생하는 이벤트는 componentWillUnmount이다. componentDidUnmount는 없다. componentWillUnmount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러가지 정리 활동을 한다.

 

LifeCycle Method들은 클래스형 컴포넌트에서만 사용 할 수 있는데 useEffect 훅이 componentDidMount, componentDidUpdate, componentWillUnmount를 모두 합쳐 놓은 것과 같은 기능을 한다

마운팅(componentDidMount)

-마운팅 시에만 실행하고 싶은 경우에는 두 번째 매개변수로 빈 배열을 전달

function App(props) {
  useEffect(() => {
      console.log(' mounting');
  },[]);
  return <div>useEffect on mounting</div>;
}

언마운팅(componentWillUnmount)

-언마운팅 시에만 실행하고 싶은 경우에는 함수를 리턴하면서 두 번째 매개변수로 빈 배열을 전달

function App(props) {

useEffect(() => {

console.log('useEffect on mounting');

return () => {
console.log('useEffect on unmounting');
}

},[]);

return <div>unmounting</div>;
}

 

 데이터 업데이트마다 설정(componentDidUpdate)

-useEffect에서 두 번째 매개변수를 전달하지 않으면 렌더링마다 해당 훅이 실행된다.

하지만 관련 없는 데이터로 인한 리렌더링에도 훅이 실행되면 의도치 않은 결과를 낳거나 성능의 저하를 불러올 수 있으므로 실행의 기준이 되는 데이터를 지정하고 실행 시점을 설정할 수 있다=>두 번째 매개변수인 배열에 체크할 데이터를 넣는다

 

function App(props) {

useEffect(() => {
console.log('re rendering');
});

useEffect(() => {
console.log('props is changed');
},[props.data]);

return <div>changed</div>;
}