[React] React Hooks

목차

React Hooks: 함수 컴포넌트에서의 상태 관리 및 사이드 이펙트 해결법

안녕하세요, 현대적인 웹 개발에 관심 있는 모든 분들! React 16.8 이후로, Hooks는 React 개발의 새로운 지평을 열었습니다. 기존에는 클래스 컴포넌트에서만 가능했던 상태 관리와 생명주기 기능을 함수 컴포넌트에서도 사용할 수 있게 되었습니다. 이 포스트에서는 Hooks의 개념과 주요 Hooks 사용 방법을 알아보며, 이를 통해 어떻게 함수 컴포넌트에서 상태 관리를 할 수 있는지 탐색해보겠습니다.

---

Hooks란 무엇인가?

Hooks는 함수 컴포넌트에서 React의 상태와 생명주기 기능을 "연결(hook into)"할 수 있게 해주는 기능입니다. 이를 통해 클래스 없이도 상태 관리와 부수 효과(side effects) 처리가 가능해집니다.

 

주요 Hooks

useState

• 정의: 컴포넌트의 상태를 관리합니다.
• 사용법:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

useEffect

• 정의: 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주며, 클래스 컴포넌트의 생명주기 메서드를 대체할 수 있습니다.
• 사용법:

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

useContext

• 정의: React 컨텍스트(Context)를 함수 컴포넌트에서 사용할 수 있게 해줍니다.
• 사용법:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Example() {
  const theme = useContext(ThemeContext);

  return <div style={{ background: theme.background, color: theme.foreground }}>
    I am styled by theme context!
  </div>;
}

 

Hooks 사용 시 주의사항

1. 최상위에서만 Hooks를 호출해야 합니다: 반복문, 조건문, 중첩된 함수 내에서 Hooks를 실행하지 마세요.
2. React 함수 컴포넌트 내에서만 Hooks를 호출해야 합니다: 일반 JavaScript 함수에서는 호출하지 마세요.

 

마무리하며...

Hooks는 함수 컴포넌트에서도 상태 관리, 생명주기 이벤트 처리, React 컨텍스트 사용과 같은 고급 기능을 가능하게 합니다. Hooks의 등장으로 React 애플리케이션의 구조가 더욱 간결해지고, 코드 재사용성이 높아졌습니다. 여러분도 Hooks를 활용하여 더욱 효율적이고 직관적인 React 컴포넌트를 만들어 보세요!

---

Reference:

Introducing Hooks – React

Using the State Hook – React

Using the Effect Hook – React