React Hook

React Hook 이란

React v16.8에 도입됨, 기존 방식의 몇가지 문제를 해결

함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결해주는 역할을 하여 Hook 이라 명명

Hook 탄생 배경

기존 방식의 문제점

• Wrapper Hell(HOC)

  • 기존 컴포넌트를 새로운 컴포넌트로 감싸서 재사용 가능한 컴포넌트를 만드는 방법

  • 훅이 나오기 이전 코드를 재사용하기 위해 사용된 방법이다.

  • 이 패턴을 남용하면, 컴포넌트의 계층 구조가 복잡해져 유지보수와 디버깅이 어려워진다.

• Huge Components

  • 컴포넌트가 커질수록 클래스 내에 로직(상태, 라이프사이클 메서드)등 코드가 비대해지기 쉽다. 이는 가독성이 떨어지고 유지보수성을 어렵게 만든다

• Confusing Classes

  • 클래스의 복잡도 문제 (높은 러닝커브, this 바인딩 등)

Hook의 동작 원리

Virtual DOM에서 호출되는 함수들은 항상 같은 순서와 갯수로 호출된다.

함수 Component가 호출된 다음 Hook이 함수 안에서 호출되므로 이 Index가 맞아떨어진다는것이 핵심이다. 순서가 매우 중요하고 그 순서 보장은 React의 createElement로 만들어진 객체 순서의 메커니즘과 맞물려 있다. → 함수가 호출되는 순서 === 훅을 저장할 저장 공간의 포인터 역할

즉, React가 Hook이 호출되는 순서에 의존하며, 모든 렌더링에서 Hook의 호출 순서는 같기 때문에 올바르게 동작할 수 있다는 것

이런 핵심을 기반으로 훅이 올바르게 동작하기 위해서는 몇가지 규칙이 있다.

• 최상위에서만 Hook을 호출해야 한다.

  • 반복문, 조건문, 중첩된 함수 내에서 호출 ❌

• 오직 함수형 컴포넌트 내에서만 Hook을 호출해야 한다.

  • 일반적인 자바스크립트 함수 or 클래스 컴포넌트 내에서 호출 ❌

클래스형 컴포넌트는 Hook을 쓸 수 없다?

클래스는 최초에 instance를 만든 다음 업데이트 될 때 instance를 새로 만드는 것이 아닌 그 instance 자체가 업데이트 되는 구조여서 Hook의 호출 시점을 만들어 낼 수 없다.

즉, 순서가 어떻게 되는지 바깥쪽인 createElement 입장에서 전혀 알 수가 없기 때문에 사용할 수 없다.

useEffect

Side-Effect(부수효과)를 다루는 훅으로 의존성 배열을 통해 언제 어떤 Effect를 호출 할지 선언할 수 있다.

렌더링 이후에 해야할일, 즉 React 외부와 관련된 일을 정할 수 있다.

useEffect 완벽가이드

React는 렌더링이 모두 완료되고 나서 Effect 함수들이 실행된다. 즉, 이펙트 함수들은 렌더링 과정에 영향을 주지 않는다는 것

useEffect는 라이프 사이클 메소드가 아니다??

제가 useEffect 훅을 클래스 컴포넌트의 라이프사이클이라는 익숙한 프리즘을 통해 바라보는 것을 그만두자 모든 것이 명백하게 다가왔습니다. - Dan Abramov

Dan Abramov는 리액트에서 useEffect 훅을 사용할 때, 라이프사이클 메소드와는 다른 새로운 접근법 "thinking in effects"를 사용하는 것이 중요하다고 강조하고 있다.

useEffect 훅은 컴포넌트의 라이프사이클(마운트, 언마운트, 업데이트)를 기준으로 이벤트를 설정하는 것이 아닌 부수효과(Side Effect)를 처리하는 용도로 설계되었기 때문이다.

컴포넌트가 어떤 Effect를 일으키는지 초점을 맞춰 useEffect를 사용해야한다는 것을 명심하자.

Effect는 호출된 시점에 state와 props를 바라보고 있다.

React에서 상태(state)나 속성(props)이 변경되면 컴포넌트의 리렌더링이 발생하게 된다. 이때, 상태 변경에 따라 리렌더링을 수행하는 것도 부수효과(Side Effect) 중 하나이다.

부수효과를 일으키는 함수는 이펙트 함수(Effect Function)로, 특정 의존성 배열을 통해 설정되어 해당 시점의 상태(state)와 속성(props)을 바라보고 호출된다.

의존성 배열이란

렌더링 단계에서 사용되는 값 중, Effect 함수에서 참조되는 값들을 모두 포함하는 배열 React에게 이펙트 함수에서 사용되는 값들의 전부를 알려주는 힌트로 작용한다.

의존성 배열(dependency array)을 사용하여 어떤 값이 변경될 때만 Effect 함수가 실행되도록 지정할 수 있다.

의존성 배열에 포함된 값이 변할 때만 호출되므로 필요한 값만 추가하여 불필요한 이펙트 함수 호출을 방지하자.

cleanup 함수의 목적

cleanup 함수의 목적은 구독(subscribe)과 같은 이펙트를 취소하거나 정리하는 목적으로 사용됨

클린업 함수 특징

• 클린업 함수는 다음 렌더링 이펙트 함수가 실행되기 전에 호출된다.

• 클로저를 통해 클린업 함수가 정의된 시점 렌더링에 있던 값을 바라본다.

const [count, setCount] = useState(0);

// 첫 번째 렌더링: effect count: 1
// 두 번째 렌더링: cleanup count: 1, effect count: 2

useEffect(() => {
  console.log(`effect count: ${count}`);
  
  return () => {
    console.log(`cleanup count: ${count}`);
  }
}, [count])

클린업 함수 장점

• 메모리 누수 방지: Effect 함수에서 등록한 이벤트 핸들러나 타이머 등의 자원을 클린업 함수에서 해제함으로써 메모리 누수를 방지할 수 있다.

• 이벤트 핸들러 등록/해제 간소화: Effect 함수에서 이벤트 핸들러 등록 후 컴포넌트가 언마운트되면 핸들러를 해제해야 하는 번거로움을 클린업 함수에서 처리할 수 있다.

React StrictMode 란

React 애플리케이션 개발 중에 발견되는 잠재적인 문제를 조기에 파악할 수 있도록 검사해주는 도구

Strict 모드는 개발 환경에서만 동작하고, 프로덕션 환경에서는 자동으로 비활성화 된다.

StrictMode 기능

• 렌더링 중에 중복된 이벤트 핸들러가 실행되는 것을 방지

• 애플리케이션 내 예상치 못한 Side-Effect를 경고

• setState() 호출 시, 비동기적인 업데이트에서 발생할 수 있는 문제를 경고

• 더 상세한 오류 정보를 제공

React StrictMode 활성화시 Effect가 두 번 실행된다?

StrictMode 검사 도구는 애플리케이션 내 예상치 못한 부수효과를 찾으려고 Effect 등을 두 번씩 호출한다.

*StrictMode가 호출하는 Effect는 렌더링된 결과에 영향을 주지 않는다.