Redux

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 따라서 귀찮은 props 전송이 필요가 없어진다. Redux 설치하기 npm install @reduxjs/toolkit react-redux 터미널에 입력해주면 설치된다. redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 ) 설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자 Redux 세팅 import { configureStore } from '@reduxjs/toolkit' exp..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms

Context API

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까? props 를 하위로 2번 전송해주어야한다. 하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. Context API 문법으로 props 없이 state 공유하기 재고라는 state 를 App 컴포넌트에 만들고 이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때 Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. (App.js) export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10, 11, 12])..

• format_list_bulleted FrontEnd/React
• · 2023. 3. 7.
• textsms