Salangdung_i의 기록

[기술면접] Lifecycle Method 본문

WEB FRONT END/React

[기술면접] Lifecycle Method

Salangdung_i 2022. 4. 10. 12:42
728x90
LifeCycleMethod이 무엇인지 설명해주세요. React에 있는 라이프사이클들을 설명해주세요.

결론

리액트 컴포넌트의 라이프사이클에 따라 어떤 처리를 해줘야할때 유용하게 쓰이는 Method이다.


설명

모든 리액트의 컴포넌트들은 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비단계에서 시작되어 페이지에서 사라질 때 끝납니다. 리액트를 사용해서 프로젝트를 진행하다보면

  • 컴포넌트를 처음으로 랜더링해야할때 어떤 작업을 처리해야하거나
  • 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도있고,
  • 또한 불필요한 업데이트를 방지해야 할 수도 있습니다.

이때 컴포넌트 라이프사이클 메서드를 사용하면 됩니다.
클래스형 라이프사이클의 경우 mount, update, unmount 3가지 과정으로 나뉩니다.

  • mount는 DOM이 생성되고 웹 브라우저 상에 나타는 과정
  • update는 props나 state가 바뀔때, 부모컴포넌트가 리랜더링될때 this.forceUpdate로 강제로 랜더링을 할때
  • unmount는 컴포넌트를 DOM에서 제거하는 과정을 말합니다.

mount과정에서 컴포넌트가 만들어질때 ComponentDidMount를 사용해서 처리를해주고, shouldComponentUpdate를 사용해 업데이트 직전에 조건을 걸어 리랜더링 여부를 결정할수 있습니다. unmount과정에서는 componentDidUpdate를 사용하여 컴포넌트가 소멸된 시점에서 필요한 처리를 해줄수있습니다.
React Hook에서도 라이프사이클메소드와 비슷한 처리를 해줄수있습니다. Hooks의 API중 useEffect는 componentDidMount 와 componentDidUpdate를 합친 기능입니다. useEffect는 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할수 있습니다.


요약

Lifecycle Method이란 리액트 컴포넌트의 라이프사이클에따라 어떤 작업을 처리해줘야할떄 유용하게 사용되는 Method 입니다.. 그중 componentDidMount는 mount과정에서의 처리를 , ShouldCompoentUpdate 리랜더링 유무를 결정할때, componentDidUpdate를 unmount과정에서 처리를 해주는 역할을 합니다.


728x90

'WEB FRONT END > React' 카테고리의 다른 글

제어/비제어 컴포넌트(2)  (0) 2024.09.19
제어/비제어 컴포넌트(1) SSOT원칙  (1) 2024.09.01
[기술면접] : useMemo와 useCallback  (0) 2022.04.10
[기술면접] Virtual DOM?  (0) 2022.03.30
React Hooks  (0) 2022.03.17