상태관리 (4) 썸네일형 리스트형 React의 Props Drilling과 상태관리 👾 Props Drilling이란? Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 👾 Props Drilling의 문제점 • 코드의 가독성이 나빠진다. • 코드의 유지보수가 어렵게 된다. • state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다. 👾 Props Drilling을 방지하기 위한 방법 1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법 2. 상태관리 라이브러리를 사용하는 방법 → 상태관리 라이브러리를 사용하게 되면 .. Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux ⭐️ 과제. Cmarket Redux ✔️ Bare Minimum Requirement ✅ Action, Reducer를 직접 작성하고 테스트 케이스를 통과합니다. ✏️ 과제 구현 📌 리덕스의 데이터 흐름 Action → Dispatch → Reducer → Store 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 2. Action 객체는 Dispatch 함수의 인자로 전달 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 .. Section3 Unit4 [React] 상태 관리 - Redux Section3 Unit4 [React] 상태 관리 - Redux 📌 Chapter2. Redux • Redux를 사용하는 이유 React의 데이터 흐름에 따르면 상태는 상태가 사용되는 컴포넌트의 공통된 상위 컴포넌트에 위치시키는 것이 적절하다. 아래와 같이 컴포넌트3과 컴포넌트6에서 상태를 사용해야 한다면 최상위 컴포넌트에 상태를 위치시켜야 한다. 하지만 이런 상태 배치는 다음과 같은 이유로 다소 비효율적이라고 느껴질 수 있다. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있.. Section3 Unit4 [React] 상태 관리 Section3 Unit4 [React] 상태 관리 📌 Chapter1. 상태 관리 • 상태란, UI에 동적으로 표현될 데이터 • 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태로 보통 컴포넌트 내에서만 영향을 끼친다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태로 input box, select box 등과 같이 입력값을 받는 경우가 이에 해당한다. • 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태로 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만약 사본이 있다면, 두 데이터는 서로 동기화 되어야 하는데 이는 문제를 어렵게 만든다. 따라서 한 곳에서만 상태를 저장하고 접근하는 것이 중요하다. → 전역.. 이전 1 다음
