[React] 리액트 Hook 정리 - 1

1. Hook이란?

기존 클래스 컴포넌트에서만 가능했던 기능들(state, lifecycle관리)을 클래스 없이 사용할 수 있게 해주는 기능.

리액트 버전 16.8부터 추가되었다.

2. Hook을 쓰는 이유

- Class개념과 같이 객체지향에 익숙하지 않은 개발자도 리액트의 주요기능을 함수에서 쉽게 사용할 수 있음

- componentDidMount나 componentDidUpdate등의 lifecycle API 에서 불필요하게 포함된 요소를 직관적으로 분리해 사용가능.

- Hook을 쓰면 계층 변화 없이 상태 로직을 재사용할 수 있음.

 

3. Hook 사용 시 주의점

- 최상위 레벨에서 Hook을 호출해야함. (반복문이나 조건문 등 중첩 함수 내에서 실행x)

- 리액트 함수 컴포넌트 내에서만 Hook을 호출해야함. (자바스크립트 함수 내에서 호출x)

 

4. 기본적인 Hook들

1. State Hook

함수형 컴포넌트에서 가변적인 상태(state)를 가질 수 있게 함.

- 선언: [상태 변수명, 상태 변수 setter명] = useState(초깃값)
- 사용 예: 카운터

import React, { useState } from 'react'; //useState를 임포트 해줘야함.

function Counter() {
  //상태 변수 선언
  const [count, setCount] = useState(0);

  //상태 변수 count의 값을 변경할 때는 위에서 같이 선언한 setCount를 사용
  return (
    <div>
      <p>{count} 번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

- 실행

---

2. Effect Hook

리액트 컴포넌트가 렌더링 될 때마다 컴포넌트 안에서 데이터를 가져오거나, DOM을 조작하게 할 수 있음.

componentDidMount와 componentDidUpdate, componentWillUnmount를 하나의 API로 합친 형태. lifecycle 메소드를 사용할 수 있다. useEffect 안의 함수는 화면에 렌더링이 완료된 후 수행됨.

 

Q. 이름이 왜 Effect인가요?

A. 리액트 컴포넌트 안에서 데이터를 가져오거나, DOM을 직접 조작하는 등의 동작은 다른 컴포넌트에 영향(effect)를 줄 수 있어 'Side Effects'라고 부르기 때문!

- 사용: useEffect(함수)

- 사용2: useEffect(함수, 조건 값) 특정한 값이 변경될 때만 실행되게 하고 싶을 때 두번째 인자를 넣어서 사용.

- 사용 예: 

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

  useEffect(() => {
    console.log("렌더링 시 실행");
  });
  useEffect(() => {
    console.log("마운트 시 실행");
  }, []);
  useEffect(() => {
    console.log("count 값 업데이트: " + count);
  }, [count]);

  return (
    <div>
      <p>{count} 번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

- 실행

 

콘솔값으로 useEffect의 동작을 확인할 수 있다.

 

---

참고 자료

'리액트를 다루는 기술' - 김민준 저

리액트 공식 문서 Hook