오늘 코드를 작성하다가 Detail 페이지에서는 Add 버튼을 눌렀을 때
포켓몬이 정상적으로 추가되는데, PokemonList에서 Add 버튼을 누르면
포켓몬이 대시보드에 추가되지 않는 문제를 발견했다. 🤔
문제의 원인
처음에 dispatch()를 사용할 때 addPokemon이라는 함수명을 넣어서 밑에 코드처럼 작성했다.
clickButton={() => dispatch(addPokemon)}
하지만 이렇게 하면 addPokemon 함수 자체가 dispatch에 전달될 뿐, 실행이 되지 않는다!!
why? dispatch는 reducer로 액션 객체를 전달해고 reducer가 store에 state 변경신청을 한 후 state가 변경 되어 리랜더링이 되는 구조이다.
근데 액션객체를 반환시키고 dispatch에 그 값을 담아 reducer로 전달해야하는데 아무것도 반환하지 않는 그냥 함수명을 넣으면? redux 입장에선 이해할 수 없는 값을 받게 되는 것이나 다름없다.
clickButton={(data) => dispatch(addPokemon(data))}즉 이렇게 addPokemon() 함수를 실행시키고 반환한 액션 객체를 담아서 전달해주는 것이 redux-toolkit을 사용할 때 매우 중요하다고 할수 있다.
React의 역방향 데이터 흐름
clickButton={(data) => dispatch(addPokemon(data))}clickButton을 props로 내려줬을 때 data값은 어디에서 오는 걸까? 라는 의문이 생겼고
이 과정이 도저히 이해가 안 가서 리액트 공식 문서를 찾아봤는데,
이걸 역방향 데이터 흐름 (Reverse Data Flow) 이라고 부른다고 한다. 📖
리액트에서는 일반적으로 단방향 데이터 흐름을 따른다.
즉, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 방식이다.
하지만 자식 컴포넌트인 PokemonCard가 클릭될 때 pokemon이 파라미터로 들어가서 실행되고
그 결과로 자식에서 부모로 프롭스가 전달되어 PokemonList에서 파라미터를 받아 실행하는 특이한 현상이 생겼다.
clickButton={(data) => dispatch(addPokemon(data))}
그렇기 때문에 다른 파라미터와 구별하기 위해 pokemon이 아니라 data라는 값을 넣어주었다.
🎯 정리
- dispatch(addPokemon)처럼 작성하면 dispatch()로 전달하는 값이 액션객체가 아니다.
- dispatch(addPokemon(data))처럼 실행시키고 action 값을 반환시킨 것을 리듀서로 전달해야 한다.
- 자식에서 부모로 데이터를 전달하려면 부모 컴포넌트에서 state를 변경시키는 함수를 props로 내려줘야 한다. 마치 콜백함수 처럼!
