[REACT]스탠다드 복습5회차_메모

Context API 로 전역상태 관리하기

 

Context Provider의 모든 children 컴포넌트들에게 context value를 공유한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

? 여기서 말하는 구독이란?

todos, setTodos의 변화가 생기면 uesContext을 쓴 TodoForn을 리렌더링 하겠다는 뜻이다.

그래서 새롭게 할당된 주소를 value에 할당된다. 따라서 엄밀히 만하면 context value를 구독한다.

 

 

 

 

? 언제 props를 사용해야 할까?

 

1. TodoItem안에 useCountext, useState쓰지말아야 한다.

export default function TodoList({ isDone }) {
  const { todos, setTodos } = useContext(TodoContext);
  const filteredTodos = todos.filter((todo) => todo.isDone === isDone);
  return (
    <div>
      <h2>{isDone ? "Done" : "Working..."}</h2>
      {filteredTodos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} setTodos={setTodos} />
      ))}
    </div>
  );
}

2. 단순히 데이터만 전다로되는 경우에는 props를 써야 한다.

export default function TodoListWrapper() {
    return (
        <>
            <TodoList isDone={false} />
            <TodoList isDone={true} />
        </>
    );
}

 

 

 

? 전역상태가 더 적절한 경우는 언제일까?

앱 전체에서 공유되는 경우 (사용자 인증상태-로그인여부, 테마설정 상태-다크모드/라이트모드)

페이지 간의 공유해야되는 상태가 있다면 전역상태를 써야 한다. 한마디로Prop Drilling이 필요한 경우에 context나 전역상태관리를 쓰면된다.

 

 

전역상태관리라고 하면 prop drilling피하려고 한다라고 생각하면 된다.

 

 

---

Context API 자주 사용되는 코딩 패턴

 

App 컴포넌트는 최대한 깔끔한 게 좋다.

 

// src/context/TodoProvider.jsx
import React, { createContext, useState } from 'react';

// 함수 컴포넌트 외부에서 Context 생성
export const TodoContext = createContext(null);

const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, isDone: false }]);
  };

  return (
    <TodoContext.Provider value={{ todos, addTodo }}>
      {children}
    </TodoContext.Provider>
  );
};

export default TodosContextProvider;