payload란? "페이로드(payload)"는 데이터 패킷(packet)이나 메시지에 담겨 있는 유용한 정보를 나타낸다. 리덕스에서의 페이로드는 액션(Action) 객체의 속성 중에서 실제로 필요한 데이터를 의미한다. 액션은 리덕스 스토어에서 어떤 변화를 일으킬지 나타내는 객체이며, 이 액션 객체 안에 포함된 정보가 페이로드이다. 작성 예시는 다음과 같다. // payload가 추가된 액션객체 {type: "ADD_NUMBER", payload: 10} // type뿐만 아니라 payload라는 key와 value를 같이 담는다. State를 변경하는데 있어 만약 리듀서에게 어떤 값을 같이 보내줘야 한다면 payload를 액션객체에 같이 담아 보낸다. ⭐️ 꼭 payload라는 이름을 통해서 보내야하는..
웹개발/react
Action Creator (1) Action Creator 만들기 액션객체를 한 곳에서 관리할 수 있도록 “함수"와 액션 value를 상수로 만들어보자. PLUS_ONE 이라는 액션 객체를 만드는 함수를 만든다면 아래와 같이 만들 수 있는데, 우리는 이것을 Action Creator라고 부른다. 말 그대로 액션을 만드는 생성자 인 것. // src/redux/modules/counter.js const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성 // 액션객체를 반환하는 함수 생성 // export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용될 예정이기 때문입니다. export const plusOne = () => { return { type: PLUS_ONE, ..
리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 : https://velog.io/@annahyr/리덕스-흐름-이해하기 1. counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) (1) 어떻게 counter.js 모듈에 있는 state의 값을 변경할 수 있을까? u..
useRef? 리액트 공식 문서에서는 useRef를 다음과 같이 정의한다. useRef() Hook은 DOM ref만을 위한 것이 아닙니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 만약 를 사용하여 React로 ref 객체를 전달한다면, React는 모드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것입니다. useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. 즉 useRef와 useState와의 가장 큰 차이점은 렌더링 여부로 정의할 수 있다. 코드로 한번 살펴보자. useState import { useRe..
