♽ Life cycle of React

인간의 life cycle이 있듯, 모든 순리는 모든 곳에 적용되나니 ...
리액트도 자기만의 패턴, cycle이 있다.
이에 대해 '간단히' 블로깅해본다.

탄생 -> 변화 -> 죽음

리액트는 SPA(Single Page Application)로, 하나의 페이지를 사용한다. 하나의 html만 사용하는 셈.

그렇기에 사용자가 선택한 페이지에서 작동하는 코드들이, js 별로 나뉘어 작성되어 있다.

그 코드들이 동작할 때,

1. 화면에 나타난다. (탄생)
2. 유저에 의해 업데이트가 일어난다. (변화)
3. 화면에서 사라진다. (죽음)

의 순서로 작동되게 된다.
화면에서 사라진다는 것은, 다른 페이지로 이동하면 현재 페이지가 사라지는 것을 말한다.

위의 3가지를 리액트의 Life Cycle 이라고 볼 수 있는데,
이를 이렇게 표현할 수 있다.

Mount -> Update -> UnMount

간단히 설명하자면,

• Mount : 화면에서 나타나는 마운트 단계에서는, 초기화 작업을 한다.
• Update : 변화가 일어나는 업데이트 단계에서는, 예외 처리 작업들이 실행된다.
• UnMount : 화면에서 사라지는 언마운트 단계에서는, 메모리 정리 작업을 한다.

🎣 React Hooks

Life Cycle 3단계에서 사용할 수 있는 여러 메서드들이 존재한다.

원래는, 이 메서드들은 클래스형 컴포넌트에서만 사용할 수 있었다.
그러나 리액트에서 클래스형 컴포넌트로 코드를 작성할 시,
🚨 코드가 매우 길어지고, 중복되는 코드가 많아지며 그로 인해 가독성 문제가 많았다.

이를 위해, 함수형 컴포넌트에서도 사용할 수 있도록 React Hooks 가 개발되었다.

클래스형 컴포넌트가 근본적으로 가지고 있는 이 기능들을 함수형 컴포넌트에서 낚아채서(hooking) 사용할 수 있다는 의미에서, React Hooks 라고 부른다.

use키워드가 붙은 메서드들이 다 React Hooks 이다.
useState, useRef, useEffect, useReducer ...

한마디로 정리하자면,
React Hooks 를 통해 클래스형 컴포넌트가 가지고 있는 기능들을 함수형 컴포넌트에서 모두 쓸 수 있게 된 것이다.