[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - React Hooks

React Hooks

React Hooks는 함수형 컴포넌트에서 상태 관리, 부수적인 로직 처리, 라이프사이클 기능 등을 통합적으로 관리할 수 있다. 강의에서는 대표적인 React Hooks와 사용되는 사례를 함께 살펴보았다. 그리고 메모리 누수를 방지하는 메모이제이션 을 활용해 성능 최적화 방법에 대해서도 배울 수 있었다.

1.1 useState

함수형 컴포넌트에서 상태를 관리

import React, { useState } from 'react';

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

  return(
    <>
      <p>버튼을 {count}번 클릭</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    <>
  )
}

1.2 useEffect

데이터 가져오기, 데이터 구독, DOM 조작 등 부수 효과(side effects) 관리

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

function Timer(){
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000)

    // 반환값 => 컴포넌트가 언마운트 될 때 cleanup 함수 실행 
    return () => clearInterval(interval);
  }, []) // 의존성 배열
}

의존성 배열 (dependency array)

• effect 함수가 의존하고 있는 요소들의 모음! 즉, effect 함수가 사용하고 있는 외부의 변수들이 의존성.
• 빈 배열을 넘긴다면 컴포넌트의 첫번째 렌더링 이후에만 실행

1.3 useContext

리액트의 Context API를 사용하여 컴포넌트 간의 데이터 전달을 간소화하는 Hook
Context는 데이터를 전역적으로 관리하여 컴포넌트 트리 전체에서 값을 쉽게 공유 가능

동작방식

Context API를 통해 생성된 context 객체는 Provider 와 Cosumer 라는 두 가지 구성 요소를 가진다.

• Provider : value 라는 속성을 통해 context에서 공유할 값을 설정 (객체로 다중 속성 부여 가능)
• Cosumer : Provider에서 설정한 값을 사용하는 소비자 역할. useContext Hook을 사용하면 Consumer를 간편하게 대체 가능. 가까운 Context.Provider 로 부터 제공된 context 값을 사용

import React, { createContext, useContext, useState } from 'react';

// 1. Context 생성
const ThemeContext = createContext();

// 2. ThemeProvider 컴포넌트
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    // 3. Provider로 자식 컴포넌트에 값 전달
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 4. Theme를 사용하는 컴포넌트
function ThemedComponent() {
  // 5. useContext로 context 값 사용
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>현재 테마: {theme}</p>
      <button onClick={toggleTheme}>테마 변경</button>
    </div>
  );
}

// 6. App 컴포넌트
function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

1. ThemeContext를 생성하여 전역적으로 사용할 값을 정의
2. ThemeProvider에서 ThemeContext.Provider를 사용해 상태 값과 테마 변경 함수를 value로 전달
3. ThemedComponent에서 useContext를 사용해 현재 테마와 테마를 변경하는 함수를 사용 가능

✅ Props Drilling 해결 방법
컴포넌트 계층 전체에서 프로퍼티의 데이터 형식 변경이 필요한 경우라던지, 중첩된 컴포넌트를 통해 불필요한 프로퍼티를 계속 전달해야하는 경우가 생긴다.
이럴 경우 값의 추적이 복잡해질 수 있기에 전역적으로 데이터를 공유할 수 있도록 Context API 를 사용하는 것이 하나의 방법일 수 있겠다. 이를 통해 중간 컴포넌트를 거치지 않아도 되므로!

1.4 useReducer

복잡한 상태 관리 로직을 관리할 때 사용, 데이터 흐름을 보다 효율적으로 처리 가능!

동작방식

• useReducer 는 상태와 상태를 업데이트하는 로직을 reducer 함수로 분리하여 관리하는 Hook
  이 Hook은 Redux와 유사한 방식으로 동작하며, 특히 복잡한 상태 관리가 필요한 경우 유용
• useReducer 는 reducer 함수, 초기 상태, 그리고 선택적인 초기화 함수를 인수로 받는다.
• 반환값으로 현재 상태와 dispatch 함수를 제공한다
• reducer 함수는 state와 action을 받아 새로운 상태를 반환

구조

const [state, dispatch] = useReducer(reducer, initialState, init?);

• reducer : 상태 업데이트 로직을 담고 있는 함수 (state,action) ⇒ newState
• initialState : 초기 상태 값
• dispatch : 액션을 실행하여 상태를 변경하는 함수

import React, { useReducer } from 'react';

// 1. 초기 상태 설정
const initialState = { count: 0 };

// 2. reducer 함수 정의 (보통 swtich 문으로 작성)
function reducer(state, action){
  swtich(action.type){
     case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter(){
  // 3. useReducer로 상태 관리 (액션 함수 담아서)
  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

1. initialState 로 초기 카운트 값을 설정
2. reducer 함수는 액션의 타입에 따라 상태를 변경하는 로직을 정의
3. useReducer 로 state 와 dispatch 를 가져오고, dispatch 를 호출하여 상태를 업데이트!

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.