🤔 LifeCycle이란?
사람이 한평생 살아가면서 태어나서 죽는 것과 같이 리액트에서의 LifeCylce도 비슷한 개념이다.
렌더링이 제대로 되어졌는지 안 되어졌는지 알려주는 함수가 필요하여 만든 것이 LifeCycle 함수이다.
예를 들어 state는 업데이트 되었는데 잘 되었는지 확인하기 위하여 호출하는 함수 등이 있다고 생각하면 된다.
리액트의 LifeCycle
이미지를 보고 확인해보자면
마운트(생성될 때)
- 컴포넌트가 실행되어지면 제일 먼저 constructor가 호출되어진다.
- 앱이 실행되자마자 바로 해줘야만 하는 작업들을 constructor에 넣는다.
- UI를 렌더링하는
render(), DOM이 렌더링된후 실행되어지는 API호출,
이벤트 리스너 등록에 사용되어지는 메서드
componentDidMount()등이 있다.
업데이트
- state가 업데이트되고 UI가 업데이트 되어질 때
언마운트(제거할 때)
- 컴포넌트가 종료될 때를 의미한다.
- 이벤트 리스너 제거,타이머 정리 등에 사용되는 메서드
componentWillUnmount()가 있다.
이렇게 각각의 특정 단계에서 사용되어지는 LifeCycle 함수들이 존재한다.
하지만 이런 메서드들은 클래스 컴포넌트 내부에서만 동작하므로
많이 쓰이는 함수형 컴포넌트에서 사용이 불가능하다.
🤔 함수형 컴포넌트에서는 그럼 어떻게 사용해야하지?
바로 리액트 훅중 하나인 useEffect()이다.
이 메서드는 클래스 컴포넌트의 componentDidMount()를 대신하는
함수형 컴포넌트의 메서드이다.
컴포넌트가 렌더링 되어지고 실행되어지므로 각종 API 호출시 사용이 된다.
비동기처리를 하는 리액트 작업에서는 바로 반영된 값을
사용할 수 없으므로 업데이트가 된 새로운 state 값을 받기 위해 사용을 한다.
이런 useEffect()는 인수로 콜백함수와 배열을 받는데
배열 내부에 넣는다면 다양한 state들의 값을 받아볼 수 있다.
넣은 두가지의 state인 count와 value의 최신화된 값이 잘 출력되어진다.
만약 배열 내부에 받는 하나의 상태가 변하지 않는다면 어떻게 될까?
그래도 문제없이 다른 하나의 최신화된 값을 받아오는 것을 확인할 수 있다.
이로써 둘중 하나의 값만 상태가 변하더라도 호출되어지는 것을 볼 수 있다.
또 두개의 값이 변하더라도 한번만 실행이 된다.
기존에 같은 배열 내에 사용되던 다른 값이라도 독립시켜
새로운 useEffect()를 호출해 다른 내용의 동작을
할 수 있게 구현이 가능하다.
💡 결론은?
useEffect() 의 인수 내부 배열에 값이 없으면
컴포넌트가 마운트 직후에 호출 되어지는 componentDidMount()처럼
사용되어지고 배열 내부에 값까지 존재한다면
컴포넌트가 리렌더링 되어질 때 사용되어지는
componentDidUpdate()의 용도까지 더해져 사용이 되어진다.
