728x90 Redux5 11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. ReacDOM.render는 더이상 React 버전18을 지원하지 않음을 알게 되었다 해당부분은 추후 자세하게 좀 더 살펴볼 것이다. 2. createStore라는 스토어를 만들어주는 redux 함수를 알게 되었다 사용법은 아래와 같다. import { createStore } from 'redux'; 3. 액션 타입은 주로 대문자로 작성하고, 액션 생성함수는 camelCase로 작성한다 액션 생성함수 안에 액션 객체는 type값이 필수이다. 4. Redux 리듀서 함수를 사용할 땐 반드시 불변성을 지켜줘야 한다 스프레드 함수를 사용 하여 state값을 얕은 복사한다. function reducer(state = initialState, action) { // state 의.. 2022. 11. 23. 11.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-2 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스를 사용할 땐 단 한개의 스토어만 만들어서 사용해야 한다 리덕스는 스토어에 original state를 갖고, 각 컴포넌트가 해당 state를 참조한다. 만약 state를 참조를 분리시켜야 할 경우, 여러개의 스토어를 사용하는 것은 가능 하지만 비권장 된다. 이유가 궁금하여 공식 문서를 찾아보니, 나와 비슷한 궁금증을 가진 사람이 많았는지 따로 FAQ로 질문 답변이 되어 있었다. 본래 Flux 패턴에선 리액트 앱을 구현 할 때 하나의 스토어만 가지도록 의도되어 있다. 이를 통해 Redux 개발자도구를 활용하면 특히 대규모 서비스일수록 디버깅이 쉬워지는 장점이 있다. 만약 스토어가 여러개이면, 여러개의 스토어가 동시에 업데이트 되는 것이 아닌 내부 동작구조에 따라 순차.. 2022. 11. 21. 11.16.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-1 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스엔 useReducer와 동일한 개념이 적용되어 있다 대표적으로 액션객체라는 것이 있다. 액션객체란 상태에 어떤 변화가 필요할 때 하나의 객체로 표현한 것이며 형식은 아래와 같다. 액션 객체는 type필드를 필수적으로 가지고 있어야 하고, 그 외에는 커스터마이징 하면 된다. { type: "ADD_PROFILE", data: { id: 0, name: "bluevulpe" } } 액션함수는 파라미터를 받아와서 위 액션객체 형태를 리턴하는 함수를 의미한다. 액션함수의 용도는 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이기 때문에 함수 앞에 export 키워드를 붙인다. 2. Redux 리듀서는 useReducer를 사용할 때와 동일한 형태를 갖추고 있다 리듀서는 두가.. 2022. 11. 16. 11.15.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-0 챕터리뷰 [ 새롭게 알게된 것 ] 1.현존하는 리액트 상태관리 라이브러리중 가장인기 있는 것은 Redux이다 프로젝트 또는 서비스 규모에 따라 Redux를 사용하는 것이 좋을 수 도 혹은 필요치 않을 수 도 있다. 특히 Context API와 useReducer Hook을 사용하는 개발 방식은 Redux의 Reducer와 액션 개념과 매우 유사하다. 2.단순 글로벌 상태관리만을 위해선 Redux는 그리 필요치 않다 오히려 Context API만 사용해도 충분했다. 실재로 작은 규모의 프로젝트를 진행했을 때에도 처음엔 Context API만 사용해도 충분했었다. 하지만 점차 기능이 추가되고 상태관리 로직이 복잡해지자 매번 Context를 새로 만들어야 하는 번거로움이 있었고, 이는 Redux를 고려해볼만한 상황까지.. 2022. 11. 15. 11.06.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-마무리 챕터리뷰 [ 새롭게 알게된 것 ] 1. 리액트 16.3버전부터 Context API가 좋아지면서 글로벌 상태관리 더욱 용이 해졌음을 알게됨 리덕스 라이브러리의 창시자인 Dan Abramov는 Redux가 필요없을 지도 모른다캤음. 하지만 Context API보단 Redux나 MobX를 사용한다고 함 이유는 NPM에 따르면 Redux를 사용하는 프젝비중이 Mobx보다 9배이상 높기 때문이고, Redux에서 제공하는 미들웨어같은 강력한 기능은 Context API로 대채불가능함 만약, 미들웨어가 필요없고 단순 글로벌 상태관리만 해야 한다면 Context API 사용추천 2. 리덕스의 장점은 체겨적인 글로벌 상태관리 및 redux-saga와 redux-observable 미들웨어기능임 Context API로는 절대 불.. 2022. 11. 6. 이전 1 다음 728x90
