신비한 비

useReducer()는 React Hooks 중 하나로, 상태 관리를 위해 사용되는 함수입니다. 이 함수는 useState()보다 더 복잡한 상태 관리를 할 때 유용합니다.

useReducer()는 reducer 함수와 초기 상태(initial state)를 받아, 상태를 업데이트하는 dispatch 함수와 현재 상태(current state)를 반환합니다.

reducer 함수는 이전 상태와 액션(action)을 받아 새로운 상태를 반환하는 순수 함수(pure function)입니다. 이전 상태는 변경되지 않으며, 액션 객체에 따라 다른 상태를 반환합니다.

액션 객체는 type 속성과 함께 전달됩니다. type 속성은 상태를 어떻게 업데이트할지 나타내는 문자열입니다.

아래는 useReducer()를 사용하여 간단한 카운터 예제를 만든 코드입니다.

import React, { useReducer } from 'react';

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() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

export default Counter;

위 코드에서 reducer 함수는 switch 문으로 구현되어 있습니다. action.type이 'increment'인 경우 state.count를 1 증가시키고, 'decrement'인 경우 1 감소시킵니다. 그 외의 경우에는 에러를 발생시킵니다.

Counter 컴포넌트에서는 useReducer()를 사용하여 state와 dispatch를 받습니다. 초기 상태는 { count: 0 }입니다. 그리고 버튼 클릭 이벤트에서 dispatch() 함수를 호출하며, 액션 객체를 전달합니다. 이전 상태와 액션 객체를 reducer 함수에 전달하여 새로운 상태를 반환받습니다. 반환된 상태는 state에 저장되어 렌더링됩니다.

이와 같이 useReducer()를 사용하면 복잡한 상태 관리를 보다 효율적으로 처리할 수 있습니다. 또한 reducer 함수는 순수 함수이므로 테스트 및 디버깅에 용이합니다.

그럼 Redux는 이제 버리는건가? 아니 그럼 여태 내가 배운거는 물거품? 시간낭비?

useReducer()와 Redux는 상태 관리를 위한 두 가지 서로 다른 방법입니다.

useReducer()는 React Hooks 중 하나로, React 내부에 내장되어 있습니다. 반면에 Redux는 React와 별개의 라이브러리입니다.

useReducer()를 사용하면 React 컴포넌트의 상태를 간단하게 관리할 수 있습니다. 그러나 상태가 복잡해질수록 코드가 길어지고 유지보수가 어려워질 수 있습니다. 이 때문에 Redux를 사용하면 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 단일 스토어(single store) 패턴을 따르며, 모든 상태를 하나의 객체로 관리합니다. 애플리케이션의 상태를 관리하기 위해 action과 reducer를 사용합니다. 이러한 작업을 통해 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 복잡한 애플리케이션에서 사용하기 좋습니다. 여러 컴포넌트 간의 상태 공유가 필요하거나, 비동기 데이터를 처리해야 하는 경우 Redux는 매우 유용합니다. 그러나 Redux를 사용하면 코드의 양이 증가하고, 상태를 변경하기 위해 많은 양의 코드를 작성해야 합니다.

뭘 선택해야 될지가 고민인 분들을 위한 한줄평!

따라서 useReducer()는 상대적으로 작은 규모의 프로젝트나 간단한 상태 관리를 위해 사용하고, Redux는 복잡한 애플리케이션에서 사용하는 것이 적절합니다.

내저장소 바로가기 luxury515

React 18에서 useContext()는 상태를 전역으로 관리하기 위해 사용되는 Hook 중 하나입니다. 이전에는 Redux와 같은 상태 관리 라이브러리를 사용하여 전역 상태를 관리해야 했지만, 이제 useContext()를 사용하여 전역 상태를 더 쉽게 관리할 수 있습니다.

useContext()를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 전달할 필요없이 전역으로 상태를 관리할 수 있습니다. 이는 컴포넌트 트리 상의 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 특히 유용합니다.

다음은 useContext()를 사용하여 전역 상태를 관리하는 방법에 대한 예시 코드입니다.

// ThemeContext.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');

// App.js
import { ThemeContext } from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <HomePage />
    </ThemeContext.Provider>
  );
}

// HomePage.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function HomePage() {
  const theme = useContext(ThemeContext);

  return (
    <div className={theme}>
      <h1>Welcome to My App</h1>
    </div>
  );
}

위의 예시 코드에서는 createContext()를 사용하여 ThemeContext를 생성합니다. createContext() 함수의 인수는 ThemeContext의 기본값을 설정합니다. App 컴포넌트에서는 ThemeContext.Provider를 사용하여 전체 앱의 테마를 "dark"로 설정합니다. HomePage 컴포넌트에서는 useContext()를 사용하여 ThemeContext의 값을 가져와서 해당 값으로 클래스 이름을 설정합니다.

이제, 어떤 컴포넌트에서든지 ThemeContext의 값을 가져와 사용할 수 있습니다. 만약 HomePage 컴포넌트가 중첩된 컴포넌트를 가지고 있다면, 해당 컴포넌트에서도 useContext()를 사용하여 ThemeContext의 값을 가져올 수 있습니다.

useContext()를 사용하면 컴포넌트 트리를 따라 상위 컴포넌트로 전달하는 것이 아니라, 컴포넌트 트리 상의 어떤 곳에서든지 값을 가져올 수 있습니다. 이를 통해 전역 상태를 더 쉽게 관리할 수 있습니다.

내저장소 바로가기 luxury515

useEffect는 React Hooks API 중 하나로, 컴포넌트가 렌더링될 때마다 특정 동작을 수행하도록 설정할 수 있습니다. 이를 통해 컴포넌트의 라이프사이클 메서드를 대체할 수 있습니다.

useEffect는 컴포넌트가 처음 마운트될 때, 업데이트될 때, 혹은 언마운트될 때마다 실행할 수 있습니다. 이를 위해 useEffect 함수는 첫 번째 인자로 콜백 함수를 받습니다. 이 콜백 함수는 컴포넌트가 마운트될 때 한 번 실행되고, 이후 컴포넌트가 업데이트될 때마다 실행됩니다. 만약 컴포넌트가 언마운트될 때 정리(clean-up) 작업이 필요하다면, 이 콜백 함수에서 정리 작업을 수행할 수 있습니다.

useEffect 함수의 두 번째 인자로는 의존성 배열(dependency array)을 전달할 수 있습니다. 이 배열에 포함된 값이 변경될 때만 콜백 함수가 실행됩니다. 이를 통해 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다. 빈 배열([])을 전달하면 마운트될 때만 콜백 함수가 실행됩니다.

useEffect 함수는 콜백 함수의 반환값으로 정리(clean-up) 함수를 반환합니다. 이를 활용하여 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다. 만약 의존성 배열이 변경될 때마다 실행되는 부수 효과를 생성하는 경우, 정리 함수를 통해 부수 효과를 제거할 수 있습니다.

아래는 useEffect 함수를 사용한 예시 코드입니다.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
    </div>
  );
}

위 코드에서는 useEffect 함수를 사용하여 컴포넌트의 타이틀을 업데이트합니다. 의존성 배열에 count 변수를 전달하므로써 count 변수가 변경될 때마다 타이틀이 업데이트됩니다. 이를 통해 컴포넌트의 렌더링이 발생할 때마다 타이틀이 업데이트되는 불필한 작업을 방지할 수 있습니다.

또 다른 예시로, useEffect 함수를 사용하여 데이터를 불러오는 작업을 수행할 수 있습니다. 이때 비동기적으로 데이터를 불러와야 하므로 async 함수를 콜백 함수로 사용할 수 없습니다. 대신 useEffect 함수 내에서 async/await 구문을 사용하여 비동기 작업을 수행할 수 있습니다.

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    }

    fetchPosts();
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

위 코드에서는 useEffect 함수를 사용하여 데이터를 불러옵니다. 의존성 배열에 빈 배열([])을 전달하므로써 컴포넌트가 마운트될 때 한 번만 데이터를 불러오고, 이후에는 업데이트되지 않습니다. fetchPosts 함수 내에서 fetch 함수를 사용하여 데이터를 불러오고, await 구문을 사용하여 비동기 작업을 수행합니다. 이후에 setPosts 함수를 사용하여 상태를 업데이트합니다.

useEffect 함수를 사용할 때는 다음과 같은 사항을 고려해야 합니다.

1. 의존성 배열을 잘 설정해야 합니다. 필요한 경우 의존성 배열을 사용하여 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다.

2. 부수 효과 함수에서는 불변성을 유지해야 합니다. 상태를 업데이트할 때는 이전 상태를 기반으로 새로운 상태를 생성하는 함수를 사용해야 합니다.

3. 부수 효과 함수에서는 비동기 작업을 수행할 수 있습니다. 이때 async/await 구문을 사용하여 비동기 작업을 수행합니다.

4. 부수 효과 함수에서는 정리 함수를 반환할 수 있습니다. 이를 통해 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다.

이상으로 useEffect 함수에 대한 설명을 마칩니다. useEffect 함수는 컴포넌트에서 부수 효과를 다루는 가장 일반적인 방법 중 하나이며, React Hooks API를 이해하는 데 필수적인 개념입니다.

내저장소 바로가기 luxury515

useState()는 React에서 가장 많이 사용되는 Hook 중 하나입니다. 이 Hook을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. useState()를 사용하면 상태값과 그 상태를 업데이트할 수 있는 함수가 반환됩니다. 이 함수를 호출하면 React는 컴포넌트를 다시 렌더링합니다.

사용 방법은 아래와 같습니다.

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

위 코드에서 useState(0)은 상태의 초기값을 0으로 설정한다는 것을 의미합니다. count는 현재 상태값을, setCount는 상태를 변경하는 함수를 나타냅니다. handleClick 함수에서는 setCount 함수를 호출하여 count 상태값을 1 증가시킵니다. 그리고 return 구문에서는 현재 상태값을 보여주는 p 태그와 클릭할 수 있는 button 태그를 렌더링합니다.

useState()를 사용하면 여러 개의 상태값도 관리할 수 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleAgeChange(event) {
    setAge(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="number" value={age} onChange={handleAgeChange} />
      <p>Your name is {name} and your age is {age}</p>
    </div>
  );
}

위 코드에서는 name과 age 두 개의 상태값을 관리합니다. handleNameChange 함수와 handleAgeChange 함수에서는 각각 setName 함수와 setAge 함수를 호출하여 상태값을 변경합니다. return 구문에서는 두 개의 input 태그로 상태값을 입력받고, 현재 상태값을 보여주는 p 태그를 렌더링합니다.

React 18에서는 useState()를 사용할 때 새로운 방식으로 state를 업데이트할 수 있습니다. 이전에는 setState 함수를 호출할 때 새로운 state를 전달하거나, 이전 state를 참조하기 위해 콜백 함수를 사용하는 것이 일반적이었습니다. 그러나 이제는 setState 함수를 호출할 때 이전 state를 받아서 업데이트하는 방법이 가능해졌습니다. 이를 사용하면 불필요한 렌더링을 방지하고, 동시성 모드에서도 안정적으로 동작하는 state 관리가 가능해집니다.

새로운 방식으로 state를 업데이트하는 방법은 아래와 같습니다.

import { useState } from 'react';

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

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

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

위 코드에서 setCount 함수를 호출할 때, 새로운 state 대신 이전 state를 받아서 업데이트하는 함수를 전달합니다. 이전 state는 prevCount 매개변수로 전달되며, 함수의 반환값이 새로운 state가 됩니다.

이전 state를 받아서 업데이트하는 방식을 사용하면 state 업데이트가 이전 state에 의존하는 경우, 예를 들어 이전 state에 1을 더하는 경우 등에 유용합니다. 이 방식은 React가 이전 state와 새로운 state를 비교해서 불필요한 렌더링을 방지하기 때문에 성능 개선에도 도움이 됩니다.

useState()를 사용할 때 주의할 점은, 상태값을 변경할 때 항상 이전 state를 사용해야 한다는 것입니다. 상태값을 직접 변경하거나, 이전 state를 참조하지 않고 새로운 state만 전달하면, React가 state 변경을 감지하지 못해 불필요한 렌더링이 발생할 수 있습니다. 따라서, 이전 state를 참조하여 state를 업데이트하는 방식을 권장합니다.

내저장소 바로가기 luxury515