100일차 TIL : 최종프로젝트 - 임시 코스 데이터 CRUD

구현 목록

• 검색 결과에서 장소 선택시 코스에 해당 장소 추가하기
• 드래그 앤 드롭으로 코스 순서 변경하기
• 코스에서 장소 선택시 해당 장소 삭제하기
• 코스에서 장소 선택시 설명란에 해당 장소에 대한 설명만 반환하기

• 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로 관리

1. redux에서 불러온 초기 데이터 temporaryList를 dragList의 초기값으로 설정
2. 드래그가 완료되면 현재의 코스 순서를 dispatch
3. reducers에서 초기 데이터의 값을 2번 값으로 변경
4. temporaryList가 변했으므로 useEffect 실행