[React.js] React 라이프 사이클

React Life Cycle

---

Reacts는 컴포넌트(component) 기반의 View를 중심으로 한 라이브러리이다.
따라서 각각의 컴포넌트에는 라이프사이클, 즉 컴포넌트의 수명 주기가 존재하는데, 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

아래의 사진이 바로 리엑트 라이프 사이클을 나타낸 것이다.
(사이트는 여기 참고)

Mount (생성될 때)

---

1. constructor

   • 페이지 로드 되고 컴포넌트가 만들어질 때 처음으로 실행됨
   • 초기 state 설정이 필요할 때 사용됨

   // Class
   class Example extends React.Component {
       constructor(props) {
           super(props);
           this.state = { count: 0 };
   }
   
   // Hooks
   const Example = () => {
       const [count,setCount] = useState(0);
   }
   

2. static getDerivedStateFromProps(nextProps, prevState)

   • React 16.3버전 이후에 생긴 메서드
   • props로 받아 온 값을 state에 동기화시키는 용도
   • 컴포넌트가 마운트, 업데이트될 때 호출됨
   • 리턴타입을 Javascript Object로 설정해야 함
   • 리턴된 Object는 State에 반영됨

   // Class
   class Example extends React.Component {
       static getDerivedStateFromProps(nextProps, prevState) {
           if (nextProps.value !== prevState.value) {
               return value: nextProps.value;
           }
           return null;
       }
   }
   

3. Render()

   • React component의 유일한 필수 메서드
   • state 변경이 있으면 side effect 발생
   • 함수형 컴포넌트에서는 render 사용 없이 렌더링 가능

   // Class
   class Example extends React.Component {
     render() {
       return <div>컴포넌트</div>
     }
   }
   
   // Hooks
   const example = () => {
     return <div>컴포넌트</div>
   }
   

4. componentDidMount()

   • 컴포넌트가 DOM에 추가 된 후 실행
   • DOM과 상호작용하거나 서드파티 라이브러리들을 사용하는 코드들을 여기서 작성 (ajax 등)
   • 함수형 Hooks에서는 useEffect를 활용하여 구현
     • useEffect의 [] 의존성 배열을 지워야 똑같은 메소드로 구현할 수 있음

   // Class
   class Example extends React.Component {
       componentDidMount() {
           ...
       }
   }
   
   // Hooks
   const Example = () => {
       useEffect(() => {
           ...
       }, []);
   }
   

Update (업데이트 할 때)

---

1. static getDerivedStateFromProps(nextProps, prevState)

   • Mount 단계와 동일

2. shouldComponentUpdate

   • 리턴 타입은 True, False
   • 리턴되는 결과에 따라 DOM에 리 렌더링을 여부를 결정
   • 성능 개선을 위해 사용이 가능

   // Class
   class Example extends React.Component {
       shouldComponentUpdate(nextProps) {
           return nextProps.value !== this.props.value
       }
   }
   
   // Hooks
   const Example = React.memo(() => {
           ...
       }, (prevProps, nextProps) => {
           return nextProps.value === prevProps.value
       }
   )
   

3. Render()

   • Mount 단계와 동일

4. getSnapshotBeforeUpdate

   • Virtual DOM이 실제 DOM에 반영되기 직전에 실행됨
   • 이전과 현재의 props와 state애 접근 가능
   • return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달됨
   • 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI에서 주로 사용
   • 함수형에서는 아직 이 기능을 대처할만한 hook이 없음

   class Example extends React.Component {
       getSnapshotBeforeUpdate(prevProps, prevState) {
           if (prevProps.list.length < this.props.list.length) {
               const list = this.listRef.current
               return list.scrollHeight - list.scrollTop
           }
           return null
       }
   }
   

5. componentDidUpdate

   • 매 업데이트마다 UI sync와 서드파티 라이브러리를 사용하는 코드 작성
   • 리랜더링을 완료 후 실행: 업데이트가 끝난 직후이므로 DOM관련 처리를 해도 무방

   // Class
   class Example extends React.Component {
       componentDidUpdate(prevProps, prevState) {
           ...
       }
    }
   
   // Hooks
   const Example = () => {
       useEffect(() => {
           ...
       });
   }
   

UnMount (제거할 때)

---

1. ComponentWillUnMount

   • DOM에서 컴포넌트가 지워질때 실행
   • 컴포넌트와 관련된 것을 정리하는데 사용
     ex) 로그아웃시 주 구성 Component를 해제하기 전에 사용자 세부정보와 모든 인증 토큰을 지운다거나 setInterval을 clear하는 등에 사용
   • 함수영 컴포넌트에서는 useEffect CleanUp 함수로 구현

   // Class
   class Example extends React.Component {
       coomponentWillUnmount() {
           ...
       }
   }
   
   // Hooks
   const Example = () => {
       useEffect(() => {
           return () => {
               ...
           }
       }, []);
   }
   

2. componentDidCatch

   • 컴포넌트 렌더링 도중 에러가 발생했을 때 어플리케이션을 멈추지 않고 오류 UI를 보여줌
   • 곧 Hooks에 해당 라이프 사이클 메서드 추가 예정

   // Class
   class Example extends React.Component {
       componentDidCatch(error, info) {
           console.log('Error')
       }
   }