주니어 개발자를 위한 React Hooks 활용하기

React Hooks는 React 16.8 버전에서 소개된 새로운 기능으로, 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 해줍니다. 이전에는 클래스 컴포넌트를 사용해야만 이러한 기능을 구현할 수 있었지만, Hooks의 등장으로 코드를 더 간결하고 이해하기 쉽게 만들 수 있게 되었습니다.

useState 사용하기

useState는 가장 기본적인 Hook으로, 컴포넌트의 상태를 관리할 수 있게 해줍니다. 다음 예제는 useState를 사용하여 버튼 클릭 시 숫자를 증가시키는 간단한 카운터를 만드는 방법을 보여줍니다.

import React, { useState } from 'react';

function Counter() {
  // useState를 사용하여 count 상태를 선언하고 초기값을 0으로 설정합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

useEffect 사용하기

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할을 합니다. 다음 예제는 useEffect를 사용하여 컴포넌트가 마운트될 때 콘솔에 메시지를 출력하는 방법을 보여줍니다.

import React, { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타났습니다.');
    return () => {
      console.log('컴포넌트가 화면에서 사라졌습니다.');
    };
  }, []);

  return <div>Hello</div>;
}

export default Hello;

custom Hooks 만들기

커스텀 Hooks를 만들어 반복되는 로직을 재사용할 수 있습니다. 다음은 useInput이라는 커스텀 Hook을 만들어 입력값을 관리하는 예제입니다.

import React, { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    setValue(event.target.value);
  };
  return { value, onChange };
}

function InputComponent() {
  const name = useInput('');

  return (
    <div>
      <input {...name} />
      <p>입력값: {name.value}</p>
    </div>
  );
}

export default InputComponent;

React Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 쉽게 구현할 수 있습니다. 이를 통해 코드를 더 간결하고 이해하기 쉽게 만들 수 있으며, 커스텀 Hooks를 만들어 코드의 재사용성을 높일 수 있습니다. 주니어 개발자 여러분도 React Hooks를 활용하여 멋진 웹 애플리케이션을 만들어보세요!