구현 목록
- 검색 결과에서 장소 선택시 코스에 해당 장소 추가하기
- 드래그 앤 드롭으로 코스 순서 변경하기
- 코스에서 장소 선택시 해당 장소 삭제하기
- 코스에서 장소 선택시 설명란에 해당 장소에 대한 설명만 반환하기
- 1차 구현 :
useState
로 관리- 2차 구현 : redux 리팩토링
트리구조
- Post
- PostMap
- PostSearchModal
- CourseLine
Before
1. Post 페이지에서 useState
로 placeList
배열 관리
2. Post -> PostMap -> PostSearchModal순으로 placeList
전달
3. PostSearchModal에서 장소 선택 후 placeList
에 추가
4. 3의 값으로 setPlaceList
5. CourseLine에서 placeList
조회
After
1. PostSearchModal에서 장소 선택시 해당 데이터를 dispatch
2. CourseLine에서 placeList
조회
CourseLine.tsx
const CourseLine = ( => {
const dispatch = useDispatch();
const temporaryList = useSelector(
(state: any) => state.temporarySlice.placelist
);
const [dragList, setDragList] = useState(temporaryList);
const [dragData, setDragData] = useState(initialDragData);
const [isDragged, setIsDragged] = useState<any | null>(false);
(중략)
const onDragEnd = (e: any) => {
setIsDragged(false);
dispatch(updateCourse([...dragData.updateLists]));
setDragData({
...dragData,
move_right: [],
move_left: [],
updateLists: [],
});
e.target.style.visibility = "visible";
e.dataTransfer.dropEffect = "move";
};
(중략)
useEffect(() => {
setDragList(temporaryList);
}, [temporaryList]);
return (
<div>
{dragList?.map((item, key)) => { 중략 }}
</div>
)
- 코스 데이터 : redux로 관리
- 변경된 코스 순서 렌더링 :
useState
로 관리
temporaryList
를 dragList
의 초기값으로 설정dispatch
temporaryList
가 변했으므로 useEffect
실행