본문 바로가기

React

 (36)
[React] Redux-toolkit : createSlice, createAsyncThunk, configureStore 원래 하던대로 Redux 상태관리 코드를 짜다가 '아 왜이렇게 폴더가 많아!!!!' '왜이렇게 코드길이가 길어!!!!!' 궁시렁대면서 어찌저찌 store 부터 dispatch까지 구현했는데 데이터를 받아오는 거 처음부터 화면도 안떠서 화가 났었던 오늘.. 그리고 진짜 너무 오랜만에 React 프로젝트를 만들다 보니 Redux를 사용하는데 있어서 부가적으로 필요한 라이브러리들도 골치 아프고 요건 또 뭐야.. 열심히 iOS공부하는 동안.. createStore는 지원도 안하고.. 저걸 어떻게 바꾸지? 하면서 구글링 하던 중,, redux-toolkit에 대해 알게 되는데..! 서론이 길었지만,, 코드도 짧게 할 수 있고 라이브러리도 덜 사용하는 이 redux-toolkit에 대해 포스팅을 시작해보겠당 Red..
[React] yarn start 혹은 npm start 시 발생하는 오류 대처하기 진짜 오랜만에,, 반년만에,, create-react-app을 하는데 yarn start 에서 오류 발생 아 어떻게 났더라? 캡처해놓을 걸.. 해결 (Terminal) // (1) npm 일 경우 npm install -g create-react-app // (1) yarn 일 경우
[React] Study # 22 | Immer를 사용한 더 쉬운 불변성 관리 리액트에서는 배열이나 객체를 업데이트 해야할 때, 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야한다. 이때, concat, filter, map등의 함수를 사용해야한다. 하지만, 만약 객체의 데이터 구조가 복잡해지면 불변성을 지켜가며 새로운 데이터를 생성해내는 코드가 조금 복잡해지게 된다. 이때, immer라는 라이브러리를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리를 대신 해준다. Immer 사용법 1️⃣ Immer 설치 yarn add immer 2️⃣ immer 불러오기 보통은 produce라는 이름으로 불러온다. import produce from 'immer'; 3️⃣ produce 함수 사용법 첫번째 파라미터 : ..
[React] Study #21 | Context API를 사용한 전역 값 관리 이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야하는 일이 발생한다면 매우 번거로울 것..! 그럴 땐, 리액트의 Context API와 이전 #20에서 배운 dispatch를 사용하면 복잡한 구조를 해결! 💡 Context API? 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다. 꼭 상태를 가리키지 않아도 된다. (값!) 이 값은 함수일 수도, 외부 라이브러리 인스턴스 일 수도 있고, 심지어 DOM일 수도 있다. 1️⃣ Context 만들기 const UserDispatch = React.createCon..
[React] Redux #3 | 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위한 리덕스 모듈을 만들어보자! 💡리덕스 모듈? 다음 항목들이 모두 들어있는 자바스크립트 파일 액션 타입 액션 생성함수 리듀서 위 항목들을 리덕스를 사용하기 위해 각각 다른 파일에 저장할 수도 있다. 액션과 리듀서가 서로다른 파일에 정의되어 있을 수도 있지만, 개발하는데 꽤나 불편할 수도 있으므로 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성해보자! (Duck 패턴) 1️⃣ counter 모듈 만들기 첫번째 모듈, counter을 만들어보자! modules/counter.js // 액션 타입 만들기 // Ducks 패턴을 따를 땐, 액션의 이름에 접두사 넣어주기! // 다른 모듈과 액션이름이 중복되는 것을 방지할 수 있음! const SET_DIFF = 'co..

티스토리툴바