카테고리 없음

React Hook의 생명 주기

next.js 2024. 1. 30. 16:58

리액트의 생명주기

모든 리액트 컴포넌트에는 라이프사이클이 존재한다.

라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것입니다.

컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting) 의 생명 주기를 갖는다.

생명 주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있다.

생명 주기 메소드

1. 마운트 ( 생성 )

컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다.

  1. constructor() :this.props, this.state에 접근할 수 있으며 리액트 요소를 반환한다.
  2. setState를 사용할 수 없으며 DOM에 접근해선 안된다.
  3. 컴포넌트를 새로 만들 때마다 호출되는 클래스, 생성자, 메서드
  4. getDerivedStateFromProps() :
  5. props에 있는 값을 state에 동기화 시킬 때 사용하는 메서드
  6. render() :
  7. UI를 렌더링하는 메서드
  8. componentDidMount() :라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval과 같은 비동기 작업을 처리하면 되고, setState 호출도 이 메서드에서 호출하는 경우가 많다.
  9. 컴포넌트가 웹 브라우저 상에 나타난 후 즉 첫 렌더링을 마친 후에 호출하는 메서드

2. 업데이트

props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다.

  1. getDerivedStateFromProps() :props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용한다.
  2. 이 메서드는 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출된다.
  3. shouldComponentUpdate() :true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고,
  4. false를 반환하면 작업을 중지한다.
  5. props또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드
  6. render() :
  7. 컴포넌트 리렌더링
  8. getSnapshotBeforeUpdate() :
  9. 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
  10. componentDidUpdate() :
  11. 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드.

3. 언마운트 ( 마운트 해제 )

컴포넌트를 DOM에서 제거하는 과정

  1. componentWillUnmount() :컴포넌트를 DOM에서 제거할 때 실행한다.이후에 컴포넌트는 다시 렌더링 되지 않으므로, 여기에서 setState()를 호출하면 안된다.

React Hook

리액트의 Hook 은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수이다

리액트 훅을 도입한 목적

리액트 훅을 도입하게 된 목적은 여러가지가 있다.

  1. 컴포넌트에서 상태관련 로직을 사용할 때 Hook 이전에 재사용 가능한 로직을 사용하기 위해서는, render props나 고차 컴포넌트와 같은 패턴을 사용했는데, 이런 패턴은 코드의 추적을 어렵게 만들었다.
  2. Hook을 활용하면 상태 관련 로직을 추상화해 독립적인 테스트와 재사용이 가능해 레이어 변화 없이 재사용할 수 있다.
  3. 두 번째 목적은 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다.
  4. (라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다.)

그 외에도 클래스 기반 컴포넌트를 지양하고자 하는 목적 등도 있다.

Hook 사용 규칙 두가지

1️⃣ 최상위에서만 Hook을 호출해야한다. ( 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. )

이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.

2️⃣ 리액트 함수 컴포넌트에서만 Hook을 호출해야하고, 일반 JS함수에서는 Hook을 호출해서는 안된다.

이 두가지 규칙을 강제하는 eslint-plugin-react-hooks 라는 ESLink플러그인이 있는데, 이 플러그인은 Create React App에 기본적으로 포함되어 있다.