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

변시윤·2023년 2월 10일
0

내일배움캠프 4기

목록 보기
110/131
post-custom-banner

구현 목록

  • 검색 결과에서 장소 선택시 코스에 해당 장소 추가하기
  • 드래그 앤 드롭으로 코스 순서 변경하기
  • 코스에서 장소 선택시 해당 장소 삭제하기
  • 코스에서 장소 선택시 설명란에 해당 장소에 대한 설명만 반환하기
  • 1차 구현 : useState로 관리
  • 2차 구현 : redux 리팩토링

트리구조

  • Post
    • PostMap
      • PostSearchModal
    • CourseLine



검색 결과에서 장소 선택시 코스에 해당 장소 추가하기

Before
1. Post 페이지에서 useStateplaceList 배열 관리
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에서 불러온 초기 데이터 temporaryListdragList의 초기값으로 설정
  2. 드래그가 완료되면 현재의 코스 순서를 dispatch
  3. reducers에서 초기 데이터의 값을 2번 값으로 변경
  4. temporaryList가 변했으므로 useEffect 실행
profile
개그우먼(개발을 그은성으로 하는 우먼)
post-custom-banner

0개의 댓글