React/Redux - React (4) 썸네일형 리스트형 [React Redux] Redux-Saga 사용하기 (Starwars api 활용 테스트) Redux-Saga 를 세팅한 후 Axios 로 api 를 호출하여 얻은 결과 데이터를 store에 저장하고 뷰 화면에서 가져다 사용해보자. api 는 직접 만들어서 사용해도 되지만 필자는 SWAPI 라는 곳에 Starwars api 를 테스트에 활용했다. SWAPI 사이트 주소 : https://swapi.dev/ SWAPI - The Star Wars API What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's first quantified and programmatically-accessible data source for all the data from the Star Wars canon universe! We've taken.. [React Redux] store에 reducer 여러개 등록하여 사용하기. React 에 Redux 를 세팅할때 store 는 무조건 하나여야 한다. 하지만 여러 효율적 그리고 유지보수의 용이성 측면을 고려할때 하나의 store 안에서도 여러개의 reducer 를 활용해 store 를 구조화하여 사용할 수도 있다. 예를들어 하나의 앱에 상품 구매 목록 관련 action, reducer와 장바구니용 action, reducer 를 따로 관리할 수 있다는 것이다. 위 모든 기능들을 하나의 action, reducer 로 관리한다면 각각의 action 과 reducer 코드가 너무나도 길어져 효율성이 떨아지고 유지보수측면에서도 많이 떨어질것이다. 현재 포스팅에서는 멀티 Reducer 를 활용하여 store 를 구조화시키는 아주 간단한 방법을 기록할것이다. 멀티 리듀서 적용 결과물 g.. [React Redux] Redux 적용중 발생한 A non-serializable value was detected 오류 열심히 React 에 Redux 를 구축을 완료했는데 테스트를 해보는 과정에서 A non-serializable value was detected... 오류가 발생하였다. 이건 도대체 무엇인가. 위 오류를 해석해보면 바로 "직렬화 할수 없는 값을 발견했다." 라는 뜻이다. 직렬화란 무엇인가? - 객체를 파일의 형태, 통신하기 쉬운 포맷(ex. JSON) 으로 변환하는 과정을 의미한다. - 객채를 특정 포맷으로 직렬화 하던가 아니면 특정 포맷으로 직렬화된 데이터를 역직렬화하여 특정 객체로 변환 한다고 할때 사용되는 단어이다. JavaScript 에서 직렬화 / 역직렬화 1.) 직렬화(Serialize) - JSON.stringfy( JSON 형식의 객체 ex. {key1 : value1, key2 : va.. [React - Redux] React 에 Redux 적용하기 1. Redux 란? Redux 는 javascript 상태 관리 라이브러리 이다. 또한 Redux 는 앱 내에 여러 데이터들의 상태를 저장하는 저장소이다. React 는 기본적으로 하위 컴포넌트들에 props 를 넘겨주는 3가지 방법이 있다. 첫번째는 props에 담아서 넘겨주는 것이고, 두번째는 context api 를 활용하는 것이다. 그리고 마지막으로 Redux 를 통해 모든 컴포넌트들에서 공통 store 에서 값을 참조 할 수 있게 하는 것이다. 리덕스 공식 홈페이지에서는 Redux 를 예측 가능한 상태 컨테이너라고 표현한다. 즉 어떤 값을 넣고 어떤 값이 도출 되는지 예측이 가능하다는 말이다. 위는 리덕스의 구조이다. 앱 화면에서 Dispatch 를 통해 Action 을 발생시킨다. 그러면 R.. 이전 1 다음
