React Lifecycle

React 의 생명주기

 

Lifecycle ❓

생애주기 ( Lifecycle )
일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 출처 : 국민 안정처

• 소프트웨어 개발에서도 Lifecycle 이라는 단어가 많이 사용 되는데 프로그램이 실행되고, 종료되는 과정을 나타내기 위해서 사용 합니다.

---

 

✔ React 컴포넌트의 Lifecycle

1. 탄생 : 컴포넌트가 화면에 나타나는 것 ( React 에서 Mount 라고 지칭 )
2. 변화 : state 가 바뀌거나, 업데이트(리렌더) 되거나 이런 변화들 ( Update )
3. 죽음 : 컴포넌트가 화면에서 사라지게 되는 것 입니다. ( React 에서 UnMount 라고 지칭 )
4. 즉, React 에서 제작하고 사용하는 컴포넌트들의 탄생 부터 시작해서 state 나 props 이 바뀌게 되어 일어나는 변화를 거쳐, 컴포넌트가 화면에서 없어지게 되는 죽음에 관한 이야기 입니다.

 

Lifecycle 을 제어한다는 것은 무슨 의미일까 ❓

• 컴포넌트가 탄생하고, 변화하고, 사라지고 죽는 순간에 각각 어떤 작업을 수행 시킬 수 있다는 것을 제어한다고 말할 수 있습니다.

1. 탄생시에는 ex) 초기화 작업 을 진행한다.
2. 변화가 일어날 때 ex) 해당 변화를 통해 발생 할 수 있는 예외에 대한 처리 작업을 추가로 수행 한다.
3. 컴포넌트가 사라지게 될 때 ex) 해당 컴포넌트가 사용하던 메모리를 반환하게 하는 작업들

---

 

✔ React Lifecycle 제어하는 방법

• React 는 기본적으로 Lifecycle 마다 실행 할 수 있는 메서드들을 가지고 있습니다.
• 각각 상황에 따라 위의 사진에 있는 파랑색이 메서드 입니다.
• 하지만 위와 같은 메서드는 클래스 형 컴포넌트에서만 사용 할 수 있습니다.
• 그러나 지금까지 공부하면서 컴포넌트을 모두 화살표 함수 형태로 만들었습니다.
• 함수형태로 제작하는 컴포넌트들은 함수형 컴포넌트 라고 부릅니다.
• 즉, 위의 메서드를 사용 할 수 없습니다.

 

✔ 함수형 컴포넌트의 진실

• Lifecycle 를 제어하는 메서드들 이외에도, 상태를 관리하는 state 를 사용 할 수 없습니다.
• 왜냐하면, state 라는 기능도 클래스 형 컴포넌트만 이용할 수 있는 기능
• 하지만, 지금까지 useState 라는 것을 이용해서 문제 없이 사용 할 수 있었습니다.
• use 키워드를 앞에 붙여서 클래스 형 컴포넌트가 근본적으로 가지고 있는 기능을 함수형 컴포넌트에서 낚아채듯 사용할 수 있는 기능을 React Hooks 라고 부릅니다.

---

✔ React Hooks

• 함수형 컴포넌트에서 클래스 형 컴포넌트의 기능을 훔쳐와서 사용하는 것
• 물론 위의 3개 외에도 더 많이 존재 합니다.

 

왜 클래스 형 컴포넌트가 아니라 함수형 컴포넌트를 사용할까 ❓

클래스 형 컴포넌트에는 고질적인 문제가 있습니다.

• 함수형 컴포넌트 보다 같은 기능을 제작하는데 비교적 많은 코드를 작성해야 하고 복잡 합니다.
• 가장 치명적인 단점은 중복 코드를 굉장히 많이 사용해야 합니다.

---

 

정리 ( 생명주기 )

✔ 마운트

• 컴포넌트가 생성될 때
• componentDidMount()

 

✔ 업데이트

• 컴포넌트의 props 가 변경될 때
• setState() 함수 호출에 의해 state가 변경될 때
• forceUpdate() 라는 강제 업데이트 함수가 호출될 때
• componentDidUpdate()

 

✔ 언마운트

• 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때
• componentWillUnmount()

컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라지는 과정을 겪음

---

 

✔ 참고

• 인프런