2023. 3. 30. 17:31ㆍ개발/react,next
const dispatch = useDispatch();
const { codeList, codeListError, codeDetail, codeDetailError } = useSelector(
({ codeReducer }) => ({
codeList: codeReducer.codeList,
codeDetail: codeReducer.codeDetail,
})
);
useEffect(() => {
dispatch(codeAction.getCodeList({ target: "codeList" }));
}, []);
useDispatch()와 useSelector()는 React-Redux 라이브러리에서 제공하는 hook입니다. useDispatch()는 Redux store에 action을 dispatch하기 위한 함수를 반환하고, useSelector()는 Redux store의 state를 선택하는 함수입니다.
const dispatch = useDispatch();는 useDispatch()를 호출하여 Redux store에 action을 dispatch하기 위한 함수를 dispatch 상수에 할당합니다.
const { codeList, codeListError, codeDetail, codeDetailError } = useSelector(...)는 useSelector()를 호출하여 codeReducer라는 Redux store의 state를 선택합니다. codeList, codeListError, codeDetail, codeDetailError는 codeReducer의 하위 객체입니다.
useEffect(() => { dispatch(codeAction.getCodeList({ target: "codeList" })); }, []);는 컴포넌트가 mount될 때 한 번 실행되고, dispatch()를 사용하여 getCodeList action을 호출합니다. getCodeList action은 target 속성을 이용해 codeList를 대상으로 코드 목록을 가져오는 것을 명시합니다.
이 코드는 Redux store에서 codeReducer의 state를 선택하여 해당 state에 접근하고, getCodeList action을 dispatch하여 데이터를 가져오는 예시입니다.
'개발 > react,next' 카테고리의 다른 글
redux-toolkit (0) | 2023.04.04 |
---|---|
리액트 연습 코드 모음 (0) | 2023.03.31 |
리액트 CRUD 기본 코드 useState([]) (0) | 2023.03.30 |
Redux (0) | 2023.03.29 |
리액트에서 여러패이지마다 태마 색상을 지정해서 사용 (0) | 2023.03.28 |