Rainyjune Blog

Redux를 활용하여(정확히는 Redux Toolkit) 장바구니를 만드는 실습 예제 사용자 정보 state (userSlice) 공유 대상 state를 개별로 관리하기 위해 src 폴더에 하위 폴더 store 폴더를 생성하고 사용자 정보를 저장해 둘 userSlice.js를 추가한다. src/store/userSlice.js (이 예제는 코딩애플의 실습내용과 다르다. redux-toolkit의 quick-start에 서술된 방식을 사용했다) // createSlice 사용을 위한 import import { createSlice } from '@reduxjs/toolkit' // state의 최초 상태를 정의 const initialState = { name: 'UserName', age: 21 } /..

State를 공유하기 위한 외부 라이브러리. (https://ko.redux.js.org/introduction/getting-started/) 설치 Terminal에서 아래 명령어를 입력하여 react project에 redux를 설치한다. npm install @reduxjs/toolkit react-redux src 폴더에 store.js 파일 생성 (파일명은 관계없으나, 코딩애플 강의에 사용된 그대로 적음) 생성 후에는 아래와 같은 내용을 기입한다. import { configurationStore } from '@reduxjs/toolkit'; export default configureStore({ reducer: {} }) src 폴더의 index.js를 수정한다. (BrowserRouter..

부모 이상의 조상 component의 state를 사용하기 위해서는 조상으로부터 자식 component에게 계속해서 props를 전달해야하는 문제가 있음. 굉장히 번거롭기 때문에 state를 공유하는 기법을 별도로 제공함. Context API (https://react.dev/reference/react#context-hooks) react 자체적으로 제공하는 state 공유 hook. 사용법 공유하고자하는 최상위 component에서는 createContext를 호출하여 state를 context화 한다. // App.js를 예제로 함 import { createContext } from 'react'; export let TestContext = createContext(); function App..

State란? 자료의 상태를 저장해두는 일종의 변수. useState (https://ko.reactjs.org/docs/hooks-reference.html#usestate) 기본적으로 변수는 let, var, const 형태로 선언하고 자료를 저장해두는 역할을 한다. react는 변수를 state 형태로 저장해둘 수 있는데, 아래와 같이 사용한다. // import useState import { useState } from 'react'; // useState 변수 지정 let [state, setState] = useState(content); 더보기 Destructured 문법 // 일반적인 배열 선언 및 배열의 값을 변수로 할당하는 과정. let num[2] = [1, 2]; let a = n..