본문 바로가기
728x90

Redux3

[React] Redux(3) [Redux Toolkit] Redux Toolkit이란? Redux Toolkit은 우리가 이전에 배운 Redux를 개량한 것으로 생각하면 됩니다. Redux를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 생기기 시작했고, Redux 팀에서 이것을 수용하여 코드는 적게, 그리고 Redux를 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 Redux Toolkit입니다. 줄여서 RTK라고도 합니다. ⭐그래서 Redux와 Redux Toolkit은 전혀 다른가? ▶ Redux Toolkit은 우리가 배웠던 Redux와 구조나 패러다임이 모두 똑같습니다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일이 손으로 만들어 줘야 했던.. 2022. 12. 20.
[React] Redux(2) [payload] Payload란? 이전에 Redux를 이용해 counter를 만들었습니다. 그때는 정해진 숫자만 더하고 빼기만 했었는데 이번에는 임의의 값을 넣어 더하고 빼는 counter를 만들어 보려고 합니다. 이때 임의의 값이라는 목적어가 생기게 되고 그 목적어도 액션객체에 담아 같이 보내줘야 합니다. 이렇게 액션객체에 같이 담아 보내주는 것을 Payload라고 합니다. export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; ⭐반드시 payload라는 이름을 통해서 보내야 하나요? 리덕스는 굉장히 유연한 라이브러리이기 때문에 많은 것들이 “표준화”되어 있지 않습니다. 때문에 자신만의 방식으로 프로그래밍 할 수 있는 유연성을 .. 2022. 12. 14.
[React] Redux(1) [count 만들기] Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. Redux 기본 키워드 1. 액션( Action ) 상태에 어떠한 변화가 필요하게 도리 때, 액션이란 것을 발생시켭니다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 합니다. { type : "PLUS_ONE" } 2. 액션 생성함수( Action Creator ) 액션 생성함수는, 액션을 만드는 함수입니다. 액션 생성함수를 만들어서 사용하는 이뉴는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서.. 2022. 12. 13.
728x90