리액트 팬레터 홈페이지 만들기: 댓글 수정 기능 구현

0.TIL

▶ useState만 사용해서 Router 구현은 Router.js 에서 모든 Route마다 props로 데이터를 전달해야함.

▶ 메인페이지 -> 상세페이지 -> 상세페이지의 업데이트 페이지 이렇게 이동하도록 구현을 알기까지 삽질함.

▶ 데이터를 업데이트 하기 위해서는 2가지로 나눔 (데이터 변경 & 수정완료 시 처리)

--> 이 부분을 한 번에 처리하려고해서 시간을 너무 버렸음...😢안 될때는 나눠서 생각하면 편리함.

---

1. 화면

1. 등록된 댓글의 "하니"를 클릭시 상세페이지 이동

2. 상세페이지에서 [수정] 버튼 클릭하여 버튼 재 클릭시 수정완료 ( 버튼 명칭은 변경예정 "수정<>수정완료")

3. [홈으로] 버튼 클릭하여 돌아가면 수정된 데이터 확인 가능

---

2. 코드

  const param = useParams();

    const foundData = comments.find((item) => {

        //console.log(item.id === params.id);

        return item.id === param.id;

    });

 

    const [editData, setEditData] = useState({ ...foundData });

▶ useParam으로 메인페이지에서 상세페이지로 넘기는 id 값 찾기

▶ editData는 데이터 업데이트용 : 초기값은 상세페이지의 id 데이터로 넣어준다.

 

<StInput defaultValue={foundData.writer} onChange={(e) => handleChange(e, 'writer')}></StInput>

▶input 에 value가 아닌 defaultValue으로 넣어야 입력이 되는 것이 보였음

▶onChange 이벤트에 작성자/내용 2가지를 수정하기 위해서 매개변수를 2개 설정

 

    //데이터를 변경

    const handleChange = (event, field) => {

        setEditData({ ...editData, [field]: event.target.value });

    };

▶변경된 데이터는 setEditData를 통해 작성자/내용 2가지를 field로 구분해서 객체의 value를 변경함

 

    //수정완료 시 처리

    const handleUpdate = () => {

        setComments(comments.map((comment) => (comment.id === foundData.id ? editData : comment)));

        setIsEdit((prev) => !prev);

        navigate('/detail/' + foundData.id);

    };

 

<button onClick={handleUpdate}>{isEdit ? '수정완료' : '수정'}</button>

 

▶[수정] 버튼을 누르면 setComments를 통해 데이터를 넣음 

▶map함수를 통해 선택된 상세페이지의 id 값을 확인하여 맞으면 수정된 데이터  / 아니면 기존 데이터 넣기

▶setIsEdit 는 내일 [버튼] 명칭을 수정완료 / 수정로 변경할 예정

--> isEdit ? '수정' : '수정완료' / 변경해서 작동 완료.

▶완료 후에는 상세페이지로 이동 (수정할때는 DetailUpdate.jsx 를 사용함)

 

 

끝.