[React] React Hooks

 

1. Hook 이란?

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect) 하기 위해 사용

앞서 사용해본 useState가 바로 State Hook!

 

기존에는 컴포넌트 내에서 State와 생명주기(lifecycle features)를 관리하기 위해 반드시 클래스 컴포넌트를 사용해야 했지만

클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트 기능을 구현하기 위해 React 16.8버전에 추가된 것이 바로 Hook

 

2. Hook 왜 사용해야 할까?

• 컴포넌트 사이에 상태와 관련된 로직을 재사용하기 어렵다.
• 복잡한 컴포넌트들은 이해하기 어렵다.
• Class는 사람과 기계를 혼동시켜 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐 아니라 React를 배우는데 큰 진입장벽

 

3. Hook 장점

• 컴포넌트의 함수가 많아질 때 클래스 구성요소로 리팩토링 할 필요 없다.
• UI에서 로직을 더 쉽게 분리하여 두가지 모두 재사용 가능하다.
• 기존 코드를 재작성할 필요 없이 일부의 컴포넌트 안에서 Hook 사용할 수 있다.
• Hook을 사용하면 컴포넌트로 분터 상태 관련 로직을 추상화가 가능하다.

 

4. State Hook

useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook이다.

최초에 useState가 호출될 때 초기값으로 설정되며 이후 재랜더링 시 무시된다.

State는 읽기 전용, 변경 시 setState를 이용해야하고 State가 변경되면 자동으로 컴포넌트가 재랜더링 된다.

 

function App() {
const [title, setTitle] = useState("")

setTitle("Hello") //state 변경 시 setState 함수에 직접 값을 입력하거나,

// 현재값을 매개변수로 받는 함수 작성. 이때 함수에서 return 되는 값이 state에 반영
setTitle((current) => { 
    return current + "World"
    })
}

 

 

👉 [React] React Props와 State 이전 글 보기

 

 

5. Effect Hook

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

컴포넌트가 최초로 랜더링 될 때, 지정한 State나 Props가 변경될 때 마다 이펙트 콜백함수가 호출된다.

function App() {
    useEffect(EffectCallback, Deps?)
}

Deps: 변경을 감지할 변수들의 집합(배열)

EffectCallback: Deps에 지정된 변수가 변경될 때 실행

 

🔎 side effect?

React 컴포넌트 안에서 데이터를 가져오거나 구독하고 DOM을 직접 조작하는 작업
(컴포넌트 외부에서 로컬의 상태값을 변경하는 것)

 

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`버튼을 ${count}회 클릭했습니다.`);
  }, [count]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        클릭
      </button>
    </div>
  );
}

 

내가 원하는 effect를 동작해줄 함수 useEffect()를 작성하면 API를 불러오거나, 데이터를 가져올 때도 사용할 수 있다.

 

6. Hook 사용 규칙

1. 최상위(at the Top Level)에서만 Hook을 호출해야한다.

• 반복문, 중첩 함수에 Hook 사용x -> Hook은 호출되는 순서에 의존하기 때문에 해당 부분을 건너 뛰는 일이 발생해 버그가 발생할 수 있다.

2. 오직 React 함수 내에서 Hook을 호출해야한다.

• 일반적인 자바스크립트 함수에 호출 x