[React] Hooks 리액트 훅

 

리액트 훅(React Hooks)은 함수 컴포넌트에서 React의 상태(state)와 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 이전에는 클래스 컴포넌트에서만 상태와 생명주기를 관리할 수 있었는데, 훅을 이용하면 함수 컴포넌트에서도 이러한 기능들을 사용할 수 있습니다.

 

 

React Hooks

Hooks은 함수형 컴포넌트에서 상태(state) 및 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능. (클래스 컴포넌트에서 사용 x)

→ 장점 : 간결한 코드, 모듈화, 논리의 재사용성.

 

※ React 16.8.0부터 Hook을 지원. React Native는 v0.59부터 지원합니다.

 

 

React Hooks 종류

• useState : 상태를 추가, 관리할 때 사용.
• useEffect : 부수 효과(side effect)를 수행할 때 사용. ex)데이터 가져오기, 구독 등의 작업.
• useContext : 리액트 컨텍스트(Context)를 사용할 때 활용.
• useReducer : 복잡한 상태 논리를 분리하고 상태를 효과적으로 업데이트할 때 사용.
• useCallback, useMemo : 함수나 값을 메모이제이션할 때 사용. 성능 최적화에 유용함.
• useRef : DOM 요소에 직접적으로 접근할 때 사용, 함수형 컴포넌트의 값이 변경되어도 리렌더링이 일어나지 않도록 함

 

정리

React Hooks은 클래스형 컴포넌트와 비교해 가독성 높은 코드 작성 가능하며, 코드 재사용성, 컴포넌트 분리에 좋음.

함수형 프로그래밍의 원칙을 따르며 상태와 생명주기를 관리할 수 있게 함으로써 컴포넌트의 관리와 유지보수를 향상.

 

 

 

 

useState

useState는 초기값을 매개변수로 현재 상태 값을 포함한 두 개의 요소로 이루어진 배열을 반환.

상태는 문자열, 숫자, 불리언 또는 객체와 같은 모든 데이터 유형이 될 수 있습니다.

const [state, setState] = useState(initialState);

//const [현재값, 상태변경함수] = useState(초기값);

state: 현재의 상태 값을 나타내는 변수

setState: 상태를 변경할 때 사용하는 함수

initialState: 컴포넌트가 처음 렌더링될 때의 초기 상태, 리렌더링 시에는 이 값은 무시

 

 

→ 장점 : useState 사용시, 컴포넌트의 상태를 간단하게 관리 가능

상태가 변경될 때마다 컴포넌트가 리렌더링 (변경된 state값으로 업데이트)

 

import React, { useState } from 'react';

function ClickCounter() {
  // 초기 상태 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>클릭 수: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        클릭하기
      </button>
    </div>
  );
}

export default ClickCounter;

위 코드에서 useState를 사용하여 count 상태를 생성하고, 초기값을 0으로 설정.

버튼 클릭 시, setCount 함수를 사용하여 count 상태를 업데이트되며 새로운 상태 값으로 리렌더링.

 

 

useEffect

useEffect는 컴포넌트가 렌더링 될때마다 할일 두 개를 매개변수로 받음.

콜백 함수와 선택적으로 사용할 의존성 배열로, 콜백 함수는 컴포넌트가 렌더링 후에 실행,

데이터를 가져오거나 이벤트 구독, DOM을 업데이트하는 등의 작업을 수행하는 데 사용가능.

기본적으로 렌더링 완료 후에 작동하나, 어떤 값이 변경되었을 때만 실행되도록 할 수도 있음.

useEffect(() => {
  // 여기에서 부수 효과 수행
}, [의존성1, 의존성2]);

• 첫 번째 인자: 부수 효과 코드가 들어가는 함수입니다.
• 두 번째 인자: 의존성 배열로, 여기에 포함된 상태나 프롭스 중 하나라도 변경될 때만 부수 효과 코드가 실행됩니다. 비어 있는 경우(또는 생략된 경우) 매 렌더링 이후에 실행됩니다.

의존성 배열은 효과가 의존하는 값들을 지정하기 위해 사용됩니다. 의존성 중 하나라도 변경되면 효과가 다시 실행됩니다.

useEffect는 함수형 컴포넌트에서 부수 효과를 처리하기 위해 사용되는 Hook 중 하나.

(부수 효과란? 컴포넌트 렌더링과 관련이 없는 작업, 주로 데이터 가져오기, 구독 설정, 수동으로 React 컴포넌트의 DOM을 조작하는 작업...)

 

컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할.