[Issue] 모임 수정하기 불러오기

[shackstack]

🗒 이슈 내용

모임 수정하기에서 모임 데이터를 불러오는 과정에서의 이슈입니다.

🗒 상세 내용

모임 수정하기에서 유저의 편의를 위해 input값에 기존 모임 데이터가 셋팅되도록 코드를 짜고 있습니다. meetingpage에서 params와 모임상세데이터를 props를 이용하여 넘겨주어 Form에서 props를 받아 셋팅하도록 설계하였습니다. defaultValue값으로 props데이터를 설정하면 UI에서는 데이터가 뜨지만 수정완료버튼을 눌렀을 때 API로 전송되는 데이터는 비어있었습니다. 어떻게하면 변경되지 않는 항목들을 null값이 아닌 기존 데이터로 보낼 수 있을까요?

🗒 관련 자료

[senasoon]

이 이슈 관련해서 읽었던 글 첨부합니다!

props로 useState 초기값 설정
Cannot read properties of undefined...

[senasoon]

아까 회의 때 &&연산자 관련해서 말이 나왔었는데요. 제가 예전에 props를 useState 초기값으로 사용했을 때는 위에 첨부한 첫번째 글처럼 &&연산자를 사용하지 않았습니다. 하지만 이 이슈에 있는 props는 객체이고 저희가 설정하려는 값은 객체 안에 있는 값이기 때문에 처음 Mount 됐을 때 찾으려는 값 자체가 무엇인지 모르게 됩니다. 즉, 처음에 값이 불러져올 때 detailData 자체가 undefined로 떠서 detailData.title 과 같은 부분에서 title이 무엇인지 읽어올 수 없기 때문에 &&연산자를 쓸 수밖에 없는 것 같습니다.

시도는 안했습니다만, &&연산자를 사용하지 않으려면 props를 부모 컴포넌트에서 넘겨줄 때 객체를 풀어서 보내면 어떨까 생각이 드네요.

// MeetingUpdatePage.jsx
<CardUpdateForm {...detailData} params={params} />

// CardUpdateForm.jsx
const CardUpdateForm = ({params, title, tag, location, ...}) => {