[React] 함수형 컴포넌트의 생명주기(Life Cycle)

🌷 리액트 생명주기 용어

용어	설명
~ will	어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어
~ did	어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어
mount	컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타나는 메서드와 관련된 용어
unmount	컴포넌트 내에서 DOM을 제거하는 메서드와 관련된 용어
update	컴포넌트 내에서 변화가 발생하였을 때 수행하는 것

 

🌷 리액트 생명주기 

👉 클래스형 컴포넌트와 라이프사이클

라이프 사이클이 컴포넌트 중심에 맞춰져있음
따라서, 클래스가 마운트 되려할 때(componentWillMount), 마운트 되고 나서(componentDidMount), 업데이트 되었을 때(componentDidUpdate), 언마운트(componentWillUnmount) 될 때 실행

클래스형 컴포넌트 생명주기

 

각각의 컴포넌트는 마운팅 👉 업데이트 👉 언마운팅의 라이프사이클 가짐

 

 

• 마운팅(Mounting) : 컴포넌트가 생성될 때 한 번만 실행
  • constructor()
  • UNSAFE_componentWillMount()  -> version17부터 공식적으로 권장X
  • render()
  • componenetDidMount()
• 업데이트(Update) : props 또는 state가 변경될 때마다 실행
  • UNSAFE_componentWillReceiveProps() -> 권장X
  • UNSAFE_componentWillUpdate() -> 권장X
  • render()
  • componentDidUpdate(preProps, preState, snapshot)
• 언마운팅(Unmounting) : 컴포넌트가 제거될 때 한 번만 실행
  • componentWillUnmount()

 

👉 함수형 컴포넌트와 라이프사이클

 

특정 데이터에 대해서 라이프사이클이 진행
클래스 컴포넌트에서는 componentWillMount, componentDidMount, componentDidUpdate, componentWillUnmount를 컴포넌트 당 한 번씩만 사용했다면, useEffect는 데이터의 개수에 따라 여러 번 사용

 

원래 함수형 컴포넌트는 생명주기를 별도로 구현해야한다는 단점이 존재했는데,                                                                  React Hook의 useEffect를 이용하여 간편하게 구현하는 것이 가능해졌다!

 

• useEffect

리액트 공식문서에서는 아래와 같이 useEffect를 설명하고 있다.

설명을 보면, componentDidMount, componentDidUpdate, componentWillUnmount를 모두 합쳐 놓은 것과 같은 기능을 하는 것이 useEffect임을 알 수 있다.

세 가지 메서드를 합쳐놓았지만 작성방법에 따라 각각의 기능들을 구현할 수 있다.

 

1) useEffect(모든 컴포넌트가 리렌더링될 때마다 실행)  => 첫 번째는 실행할 함수, 두 번째 배열을 아예 안 넣음

  useEffect(() => {
    // 코드
  });

 

2) componentDidMount(마운팅만 설정, 한 번만 실행) => 두 번째 매개변수로 빈 배열 전달

useEffect(() => {
	//코드
},[])

 

3) componentWillUnmount(언마운팅만 설정, effect(함수 or 변수 등)이 필요 없어지면 return 함수 실행해 메모리 반환)

useEffect(() => {
	//코드
    return () => {
    	// unmount , unsubscribe 코드 작성
    }
},[props 및 state 명 (, 여러개 가능)])

 

4) componentDidUpdate(데이터 업데이트마다 설정. props 및 state 변경 시 실행): 두 번째 매개 변수인 배열에 체크할 데이터 넣기

🌷 더 알아보기
useEffect에서 두 번째 매개변수를 전달하지 않으면 렌더링마다 해당 훅이 실행
But, 관련 없는 데이터로 인한 리렌더링에 훅이 실행되면 의도치 않은 결과를 낳거나 성능의 저하를 불러올 수 있으므로 실행의 기준이 되는 데이터를 지정하고 실행 시점을 설정할 수 있다.
이러한 이유로 두 번째 매개변수에 체크할 데이터를 넣는 것!

useEffect(() => {
	//코드
},[props 및 state 명 (, 여러개 가능)])