(React) 3. Hook

lgw2236·2023년 5월 4일
0

리엑트

목록 보기
3/3
post-thumbnail

Hook 이란?

React 16.8에 새로 추가된 기능으로, JavaScript 함수를 사용해
class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다.

Hook 사용 규칙

  • 최상위(at the top level)에서만 Hook을 호출해야 합니다.
    반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 않는다.

  • React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.
    일반 JavaScript 함수에서는 Hook을 호출해서는 않된다.

    이 두 가지 규칙을 강제하는 eslint-plugin-react-hooks 라는
    ESLint 플러그인을 사용하면 Hook을 편리하게 사용 할 수 있습니다. ( CRA에 포함 )

|-- react Hook 정리 --|

1. useState

useState : 함수형 컴포넌트에서 상태를 사용할 수 있게 해줍니다.

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>

2. useEffect

useEffect : 함수형 컴포넌트에서 생명주기를 다룰 수 있게 해줍니다.

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>
  );
}

3. useContext

useContext : 함수형 컴포넌트에서 Context를 사용할 수 있게 해줍니다.

useContext 예시코드

import React, { useContext } from 'react';
import { MyContext } from './MyContext';
function Example() {
  const { count, setCount } = useContext(MyContext);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4. useRef

useRef : 함수형 컴포넌트에서 Ref를 사용할 수 있게 해줍니다.

useRef 예시코드

import React, { useRef } from 'react';
function Example() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

5. useMemo

useMemo : 복잡한 계산을 하는 함수의 결과 값을 캐싱하여 불필요한 리렌더링을 방지하는 Hook입니다.

useMemo 예시코드

import React, { useState, useMemo } from 'react';
function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  // useMemo를 사용하여 계산 결과 캐싱
  const result = useMemo(() => { 
  // 의존성 배열에 있는 값이 변경될 때만 캐싱된 결과 값을 다시 계산
    console.log('Calculating...');
    return a + b;
  }, [a, b]);
  return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}
export default App;

6. useCallback

useCallback : 함수형 컴포넌트에서 콜백 함수를 메모이제이션할 수 있게 해줍니다. 
useCallback을 사용하면 함수가 새로 생성되는 것을 방지하고, 불필요한 렌더링을 방지할 수 있습니다.

useCallback 예시코드

import React, { useState, useCallback } from 'react';
function App() {
  const [count, setCount] = useState(0);
  // useCallback을 사용하여 함수 캐싱
  const handleClick = useCallback(() => {
  // count가 업데이트 될 때마다 새로운 함수를 생성하는 대신에 이전에 생성한 함수를 재사용
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}
export default App;

7. useReducer

useReducer : useState 대신 복잡한 상태 로직을 처리하기 위해 사용할 수 있는 Hook입니다. 
useReducer를 사용하면 상태 업데이트 로직을 분리할 수 있으며, 다수의 하위 컴포넌트에 전달하기 쉬운 값을 반환할 수 있습니다.

useReducer 예시코드

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}
function Counter() {
   //state와 dispatch를 반환받아 사용할 수 있습니다.
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
export default Counter;

react 관련 Hook은 나열한 7개 이외에도 더 있지만 크게 사용하는 hook들을 중점적으로 정리해 보았다.

출처 및 참조 : Chat Gpt 3.5 , React 공식문서

profile
어제보다 오늘 더

0개의 댓글