context2 [React] 25. 리액트 앱의 state에 대한 또 다른 관점 : 리덕스 vs 리액트 컨텍스트 안녕하세요. 박기린 입니다. 이번에는 리액트 앱의 state를 다루는 또 다른 방법에 대해 알아보겠습니다. 리액트에 존재하는 3종류의 state 리액트의 state에는 3종류가 존재합니다. 1. Local state 데이터가 변경되면, 단일한 하나의 컴포넌트에 영향을 미치는 state Ex: 버튼을 누르면 어떤 정보가 표시되고, 한 번 더 누르면 정보가 다시 사라집니다. -> useState나 useReducer를 사용해서 컴포넌트 안에서 state를 관리합니다. 2. cross-component state 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 state Ex: 모달 컴포넌트는 다수의 컴포넌트에 영향을 줍니다. 모달 컴포넌트를 여는 버튼은 모달 외부에 존재하고, 모달 안쪽의 버튼을 눌.. 2024. 3. 12. [React] 15. 리액트 Context API란 무엇일까? 안녕하세요. 박기린 입니다. 이번엔 React의 state 관리 방법 중 하나인 Context API에 대해 알아보겠습니다. Context API (w. 기존 props 방식의 한계) 리액트는 props라는 걸 통해서 여러 리액트 컴포넌트를 걸쳐 state 데이터를 전달합니다. 리액트 앱이 위와 같은 구조로 이루어져 있다고 가정을 합니다. LoginForm에 있는 Login state를 장바구니 Cart 컴포넌트에서 접근하려고 합니다. 하지만 바로 접근하는 것은 불가능합니다. 위 사진처럼 props를 이용해서 root 컴포넌트로 데이터를 올린 다음, 밑으로 다시 뿌립니다. 이 과정 속에서, 해당 state 데이터를 필요로 하지 않는 다른 컴포넌트들도 지나가야만 하는 상황이 발생합니다. 코드와 구조가 복잡.. 2023. 12. 4. 이전 1 다음
