Redux7 React - TypeScript 실행오류 Cannot add property, object is not extensible 타입스크립트 에러가 났다. readonly 객체는 수정할수 없기 때문에 에러가 난것이다. 나의 경우는 redux 객체를 수정하려고 했기 때문에 에러가 나버렸다. React - TypeScript 실행오류 Cannot add property, object is not extensible 리덕스 값(객체)는 직접 수정할 수 없다. 그 이유는 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 하지만 리덕스 객체를 직접 수정하려고 하니 당연히 나게된 에러였던 것이다. 객체를 직접 수정할 수 없다면 ? 복사해서 값을 고쳐주면 된다. (feat. 참조에 의한 복사) ** 참조에 의한 복사란 (더보기클릭) 더보기 객체를 만들면 객체 자체는 메모리에 저장되고, 변수에는 참조값만 저장이 된다... 2022. 7. 27. React(60) Redux-toolkit 사용하기 리덕스 툴킷은 리덕스를 편하게 사용하기 위한 리덕스공식 개발 도구이다. 여태까지 리덕스를 잘 사용하기 위해서는 4~5개의 라이브러리를 함께 사용해야 했다. 하지만 Redux Toolkit 은 내장된 기능으로 saga를 제외한 나머지 라이브러리를 대체할 수 있다. redux-actions (많아지는 액션을 관리하는 라이브러리) immer (상태값의 불변성 보존을 위한 라이브러리) reselect (store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위한 라이브러리) redux-thunk (액션을 비동기적으로 만들수있는 라이브러리) redux-saga React(60) Redux-toolkit 이란 쉽게 말해서 기존 리덕스는 사용되는 코드가 많았다. (액션타입도 적어주고... 액션도 작성하고 리듀서.. 2022. 2. 17. React(57) Redux 로 객체배열 저장하기 (redux 상태관리) 처음에는 리덕스의 개념을 이해하는 것이 쉽지 않았다. 하지만 코드를 보며 몇 번 적용해보니 기본적인 개념이 이해가 되었다. 내가 생각하는 리덕스란 보통 데이터를 주고받을 때, 부모 - 자식 컴포넌트로 데이터를 전달하지만, 이곳저곳에서 다양하게 공통으로 쓰이는 글로벌 데이터라면, 자식-부모-조부모-삼촌-조카 이런식으로 여러 컴포넌트로 복잡하게 전달해줘야 할 것이다. 글로벌 저장소에 데이터를 저장해놓고 필요할때 어디서든 간단하게 소환할 수 있도록 하는 라이브러리가 리덕스(Redux) 라고 생각한다. Redux-persist 란 리덕스를 사용해서 글로벌 저장소에 들어간 데이터는 아쉽게도 새로고침 한방이면 초기화되며 수명을 다한다. 이때 Web Storage에 저장해줘야 하는데 저장과 삭제를 쉽게 해주는 라이브.. 2022. 2. 1. React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(46) 타입스크립트 - api 객체 받아오기 2 (상세페이지) 결과 화면 1. 통신메소드를 통해 컴포넌트 내에서 채팅방 리스트를 받아온다. [ 더보기 ] 버튼을 누르자. 2. [ 더보기 ] 를 누르면 customer 인 유저 정보와 그에 따른 1:1 채팅방 리스트로 연결된다... 2021. 9. 11. React(45) 타입스크립트 - api 객체 받아오기 1 (상세페이지) 리액트와 타입스크립트를 이용하여 api 객체를 받아오는 방법에 대한 포스팅 순서이다. 1. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) 1 - api 로 서버에서 채팅방과 유저들의 정보를 받아와 회원 등급에 따른 채팅 리스트를 구현한다. 2. React(46) 타입스크립트 - api 객체 받아오기 (상세페이지) 2 - 구현한 채팅 리스트를 바탕으로 채팅 정보가 들어있는 상세 페이지를 구현해보았다. React(45) 타입스크립트 - api 객체 받아오기 (상세페이지) - 1 모든 것이 처음이었다. 타입스크립트도 낯설기만 하였다. 컴포넌트가 여러개 연결되다 보니 그냥 코딩만 할 수는 없었다. 처음으로 며칠동안 구조에 대해 고민하게 된 계기가 되기도 하였다. 왜 구조가 중요한지도 깨달.. 2021. 9. 10. React(31) Redux 패턴 action-reducer-store-view 지난 포스팅에서는 Redux 의 개념을 심플하게 알아보았다. 이번 포스팅에서는 예제를 통해 몸소 느껴보자 React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어 devbirdfeet.tistory.com React(31) Redux 패턴 action-reducer-store-view Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로.. 2021. 5. 15. React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어떻게 관리할 것인가 고민을 하다가 redux 가 나왔다. 컴포넌트의 props와 state 만으로 상태를 관리하기엔 우리가 만드는 앱은 너무 복잡하기 때문이다. Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. 액션 생성자(action creator.. 2021. 5. 14. 이전 1 다음 반응형
