241121

우지끈·2024년 11월 20일

전역 상태 관리

props 사용 무조건 지양? ㄴㄴ -> 프레젠테이션 컴포넌트거나 단순한 데이터 전달시에는 props 사용하는게 맞음
그럼 전역 상태관리는 언제? -> 앱 전체에서 공유되는 데이터(ex. 다크/라이트모드, 로그인 여부 등), 여러 컴포넌트에서 접근이 필요한 데이터

읽고 구독

const TodoContext = createContext(null);

function App () {
	const [todos, setTodos] = useState([]);
	
	return (
		<TodoContext.Provider value={{todos, setTodos}}>
			<TodoForm />
			<TodoListWrapper />
		</TodoContext.Provider>	
	);
}

function TodoForm() {
	const { setTodos } = useContext(TodoContext);
	// TodoContext value 를 읽고 구독하겠다는 뜻!
	return (
		...
	)
}

value를 구독하겠다는 건 value가 변해서 리렌더링되면 나도 같이 리렌더링

부모 자식 관계

태그 안에 태그 -> 명확한 부모 자식 관계가 맞음

function ParentComponent() {
	return (
		<WrapperComponent>
        	<ChildComponent />  
		</WrapperComponent>
	)
}
function ParentComponent() {
	return (
		<WrapperComponent children={<ChildComponent>}>
		</WrapperComponent>
	)
}

이런 경우에는 ChildComponent는 WrapperComponent의 자식이 아님.
WrapperComponent의 prop으로 ChildComponent를 받겠다는 것
따라서 WrapperComponent에서 리렌더링이 발생해도 ChildComponent에서는 리렌더링 x일 수도 있음

ContextAPI vs Redux

ContextAPI만으로도 전역 상태 관리는 충분할 것 같은데 굳이 Redux를 써야하나? -> ㅇㅇ
(근데 규모가 작은 플젝에서는 ContextAPI로도 충분하긴함)

Redux를 쓰는 이유 1

선택적 상태 구독 용이

// context api
(...생략)
<MyContext.Provider value={{ value1, value2 }}>
      {children}
</MyContext.Provider>
(...생략)
// value1만 구조분해할당했어도 MyContext value 전체를 구독
// valu1이 아닌 value2가 바뀌어도 리렌더링
function Component() {
	const { value1 } = useContext(MyContext);
	return (
		...
	)
}


// redux
// store 에서 관리중인 전체 상태가 아래라고 가정
(...생략)
const initialState = {
  value1: 0,
  value2: 0,
};
(...생략)
// 🤩 value1만 구독 -> value1이 바뀔때만 리렌더링!
function Component() {
	const value1 = useSelector((state) => state.value1);
	return (
		...
	)
}

이유 2

개발자 도구, Redux DevTools 등 디버깅 용이

Redux

Redux-Toolkit(RTK)

Slice 는 초기상태와 상태변경을 위해 필요한 로직을 하나로 합친 개념 (initialState + action + reducer)
state는 여러개의 리듀서들이 들어가있는 책장이라 생각하면 편함
dispatch, Provider 등등 -> RTK는 React 외부 라이브러리기이에 react-redux를 통해 import해와서 이를 통해 외부에 있는 RTK에 접근