인턴 레벨: React의 수명 주기 방법 및 후크

React Hooks 소개

React Hooks는 기능적 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수입니다. 후크 이전에는 상태 저장 논리가 클래스 구성 요소에서만 사용 가능했습니다. Hooks는 상태, 수명 주기 메서드, 컨텍스트 등 이미 알고 있는 React 개념에 보다 직접적인 API를 제공합니다.

React의 주요 후크

사용상태

useState는 기능적 구성 요소에 상태를 추가할 수 있는 후크입니다.

예:

import React, { useState } from 'react';

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

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

export default Counter;

이 예에서 useState는 count 상태 변수를 0으로 초기화합니다. setCount 함수는 버튼을 클릭할 때 상태를 업데이트하는 데 사용됩니다.

사용효과

useEffect는 데이터 가져오기, DOM과 직접 상호작용, 구독 설정과 같은 기능 구성요소에서 부작용을 수행할 수 있게 해주는 후크입니다. 이는 클래스 구성 요소(comComponentDidMount, componentDidUpdate 및 componentWillUnmount)의 여러 수명 주기 메서드 기능을 결합합니다.

예:

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

로그인 후 복사

이 예에서 useEffect는 구성 요소가 마운트될 때 API에서 데이터를 가져옵니다.

useContext

useContext는 특정 컨텍스트에 대한 컨텍스트 값에 액세스할 수 있게 해주는 후크입니다.

예:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

이 예에서 useContext는 ThemeContext의 현재 값에 액세스합니다.

사용감속기

useReducer는 기능 구성 요소의 복잡한 상태 논리를 관리할 수 있는 후크입니다. useState의 대안입니다.

예:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

이 예에서 useReducer는 리듀서 함수를 사용하여 카운트 상태를 관리합니다.

맞춤형 후크

사용자 정의 후크를 사용하면 여러 구성 요소에서 상태 저장 논리를 재사용할 수 있습니다. 커스텀훅은 내장된 후크를 활용하는 기능입니다.

예:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

로그인 후 복사