[React] Life Cycle

 

👀 들어가기 전에,,

front-end 를 공부하기 전에 전공수업을 통해 android studio를 접해보면서 안드로이드 액티비티 생명주기에 대해 배워본 적이 있다. 그 때 이 생명주기에 관한 파트가 굉장히 중요해서 중간고사 문제로도 출제되었던 기억이 있다. 

 

react를 공부하면서 또다시 생명주기의 개념에 대해 마주하게 되었다. 이미 한 번 배워본 개념을 통해 두 개의 약간의 차이점을 적어보자면 안드로이드 액티비티 생명주기는 액티비티를 중심으로 사이클이 진행되는 반면, react 액티비티는 컴포넌트 중심으로 돌아가지만, 컴포넌트형인지 함수형 컴포넌트인지에 따라 사이클이 돌아가는 중심이 다르다. 

 

그렇다면 여기서 말하는 생명주기란 무엇이며, 컴포넌트형과 함수형 컴포넌트 각각에서의 사이클이 무엇을 중심으로 돌아가는지에 대해 알아보겠다. 

 

 

📚 생명주기(Life Cycle) 란 무엇일까?

생명주기(Lift Cycle)는 컴포넌트가 생성되고 나서 사용되고, 제거되는 이 일련의 과정을 말한다.

React 컴포넌트는 모두 각각의 생명주기가 존재하며, 이 생명주기의 특정 시점에서 메소드가 자동으로 실행되는데

이 메소드를 라이프 사이클 이벤트라고한다. 

 

생명주기는 크게 3가지 단계로 나뉜다. 

1. Mount: 컴포넌트가 화면에 추가될 때
2. Update: 새로운 props나 state를 받을 때
3. UpMount: 컴포넌트가 화면에서 제거될 때

 

일단, 각각의 단계에서 실행되는 메소드를 하나의 그림으로 정리해보면 다음과 같다. 

 

 

이러한 생명주기 메소드는 클래스형 컴포넌트에서만 사용이 가능하다. 

그렇다면 각각의 단계에서는 어떤 과정을 거치는지 자세히 살펴보자.

 

 

1️⃣ 클래스형 컴포넌트

1. Mount: 컴포넌트가 생성되어 실행될 때

1) 마운트 되기 전에 먼저 해당 컴포넌트의 constructor가 호출된다.

• this.state에 객체를 할당하여 지역 state를 초기화한다.
• 인스턴스에 이베트 처리 메서드를 바인딩한다.

constructor(props) {
    super(props);
    this.state = {
      greeting: this.props.greeting,
    };
  }

 

2) getDerivedStateFromProps 실행

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.greeting !== prevState.greeting) {
      return { color: nextProps.greeting };
    }
    return null;
  }

 

• 해당 메소드는 props로 받아온 값을 state에 넣어주고 싶을 때 사용한다. 
• 다른 생명주기 메소드와는 달리 앞에 static을 붙여주어야 한다.
• 컴포넌트가 처음 렌더링 되기 전에 한 번 호출되고, 그 이후 리렌더링 될 때마다 호출된다. 

 

3) render

• render로 컴포넌트를 DOM에 부착한다.

 

4) ComponentDidMount 실행

• Mount가 모두 완료된 후에 실행되는 메소드이다. 
• render가 모두 완료된 후이기 때문에 DOM에 접근이 가능하다. 따라서 주로 이 때는 Ajax 요청이나, setTImeout,   
• setInterval 같은 작업을 수행한다. 

 

2. Update

props나 state의 값이 바뀌거나, 부모 컴포넌트가 리렌더링 되는 등의 업데이트 발생을 감지하게 되면 다음 메소드들이 순서대로 호출된다.

1. static getDerivedStateFromProps()
2. shoudComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate

• 위 메소드는 첫 번째, 두 번째 인자로 바꿀 props와 state 값에 대한 정보를 갖는다. 
• componentDidUpdate 메소드의 경우에는 render가 모두 완료된 상태이기 때문에 두 개의 인자는 모두 바뀌고 나서의
•  이전 정보를 갖게 된다. 

 

3. UnMount: 컴포넌트가 제거될 때

componentWillUnmount

 

컴포넌트를 더이상 사용하지 않을 때 발생하는 메소드로, 주로 DOM에 직접 등록했었던 이벤트를 제거하거나, 만약 setTImeout 같은 비동기 작업을 실행시켰을 때, 진행을 멈추도록 clearTimeout을 넣어 컴포넌트가 제거되기 전에 작업이 제거되도록 한다. 

 

 

 

1️⃣ 함수형 컴포넌트

• 클래스형 컴포넌트는 컴포넌트 중심으로 돌아가는 생명주기였다면, 함수형 컴포넌트의 경우에는 특정 데이터에 대해 생명주기가 돌아간다.
• 함수형 컴포넌트의 경우에는 생명주기 메소드가 존재하지 않기 때문에 Hook을 사용하여 생명주기 기능을 구현한다.

✔️간단한 사전 지식

1. React Hook 
: 리액트가 제공하는 기능과 내가 작성한 코드를 연동하여 그 값이나 기능을 사용하는 함수이다. 
2. Side Effect
:  함수 안에서 함수 바깥에 있는 값이나 상태를 변경하는 것

 

useEffect

• react hook 중에서도 컴포넌트 함수에 사이드 이펙트(side Effect)를 사용하고 싶을 때 사용하는 함수이다. 
• useEffect 하나로 컴포넌트의 mount,update, unMount 된 상태에서의 작업 처리가 가능하다. 

useEffect의 경우 두 번째 인자로 무엇을 넣는지에 따라 동작하는 과정이 다르다. 

 

 

 

1. 값을 넣을 경우

const [greeting, setGreeting] = useState('안녕')

useEffect(()=> {
	console.log({greeting});
},[greeting]);

 

• 컴포넌트가 첫 렌더링될 때와, greeting의 값이 변할 때 해당 콜백함수가 실행된다.
• 🟰componentDidMount() + getDerivedStateFromProp 의 역할 수행

만약에 componentDidMount의 역할은 무시하고, getDerivedStateFromProp의 역할만 수행하고 싶다면?
useRef()을 사용하여 componentDidMount의 역할은 무시한다. 

 

 

 

2. 빈 배열([ ])을 넣을 경우

const [greeting, setGreeting] = useState('안녕')

useEffect(()=> {
	console.log({greeting});
},[]);

• 처음 한 번만 실행되고, 그 후로는 실행되지 않는다. 
• componentDidMount 역할 수행

 

 

3. 아무것도 넣지 않을 경우

const [greeting, setGreeting] = useState('안녕')

useEffect(()=> {
	console.log({greeting});
});

 

• 데이터와 관련없이 리렌더링시마다 콜백함수가 실행된다. 

 

4. useEffect() 내에 return 해줄 경우

• return 함수를 이용해서 clean-up 함수를 리턴해주면, 컴포넌트가 unmount 될 때, 정리해야할 것들을 처리할 수 있다. 
• 🟰 componentWillUnmount() 의 역할 수행

 

 

🤷‍♂️ 그렇다면 생명주기를 왜 알아야 하는 것일까?

"생명주기를 배워야하는 이유가 무엇일까?"

 

위 질문은 생명주기를 공부하면서 문득 들었던 생각이다. 왜 배워야하는 것일까? 배운다고 해도 요즘은 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 사용하는데 자세하게 배울 필요가 있을까?

 

이 질문에 대한 답을 생명주기의 개념에 대해 조사해보면서 많이 고민해보았다.

 

지금까지 코드를 짜면서 내가 제일 문제를 많이 겪었던 부분이 state 값이 변함에 따른 비동기 작업을 구현하는 부분이었다. 언제 state 값이 변화하며, 변화된 state 값이 언제 비동기 작업에 반영되고, 이 작업은 언제 시작하는지 전반적인 컴포넌트의 동작 과정에 대한 개념이 부족하다고 느꼈다.

이번 기회에 Life Cycle을  배운 후에, 내가 어느 부분의 코드를 수정해야할지 깨달았고, 앞으로 비슷한 문제를 맞닥뜨렸을 때, 어떻게 대처해야할지 알 것 같다. 

---

결국, React 생명주기에 대한 전반적인 과정을 이해한다면 컴포넌트가 어떻게 동작하고, 언제 어떤 작업을 수행해야하는지에 대한 감을 잡을 수 있고, 이를 통해 내가 구현하고자 하는 기능을 조금 더 빠르게, 효율적으로 완성이 가능하며, 유지보수하기 쉽게 만들어준다고 생각한다. 

 

 

📚참고자료

https://velog.io/@ssulv3030/React-Life-Cycle%EC%9D%B4%EB%9E%80-react-life-cycle-method%EC%99%80-hooks

https://ramincoding.tistory.com/entry/React-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4LifeCycle-React-%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0?category=1121495

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955