저도 수정 페이지 왔을때 설명과 다르게 아무것도 보이지 않습니다.

Question

밑에 같은 질문을 하신 분이 계시던데요. 12.15 챕터의 10:33 초에 보면 수정 으로 들어 왔을때 기본값으로 수정 전 데이터가 나온다고 되어 있습니다. 지금까지 영상을 보면서 같이 코딩을 해오고 있었는데요..   그런데 밑에 질문 하신 분 처럼 10:33 초 전 까지의 코딩으로는 수정 시 데이터가 나오지 않습니다. 그리고 인프런 측 인지..답변 설명에 useEffect 얘기 하시던데.. useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]);   이 부분은 10:33 초 전 까지는 나오지 않았습니다. 인프런 측도 답변을 주실려면 정확히 파악 후 답변을 주세요..   뭐가 잘못된 건가요? useEffect 부분이 없어도 설명대로 수정 으로 들어가면 데이터가 나오는게 맞는건가요? 아니면 제가 뭔가 빠트린 것이 있나요?

이정환 Winterlood · Answer

안녕하세요 민경언님 이정환입니다. 강의 내용을 오해하셨네요 😅 말씀하신 10분 15초 ~ 30초 경 강의에서 말씀드린 내용은 "완성본의 경우 이렇게 되야 한다"를 설명드리고 있는 것이지 현재 그래야 한다는 것은 아닙니다. 잘 들어보시면 강의에서는 정확히 아래와 같이 말씀드리고 있습니다. "현재 상황이 아닌 완성본에는 그렇게 되어 있으니 우리도 이런 기능을 구현하겠다" 라는 이야기 인거죠   따라서 현재 민경언님의 진도에서는 수정 페이지가 완성되지 않았기에 들어가셔도 이전 데이터가 출력되지 않는것은 정상적인 동작입니다. 문제 없이 쭉 이후 과정을 수강하시면 되겠습니다.

이정환 Winterlood · Answer

안녕하세요 민경언님 이정환입니다. 먼저 인프런 AI 인턴의 답변은 사람이 작성하는게 아닙니다. AI 모델이 그간의 질문 데이터를 학습하여 답을 내놓는 것이다 보니 다소 부정확 할 수 있습니다. 이런 이유에서 모든 질문에는 오전 9시 ~ 11시 사이에 제가 직접 답변을 달고 있으니 양해해 주시면 감사하겠습니다. 😃   강의 진행 코드에는 문제가 없음을 다시 한번 확인했습니다. 실습 과정에서 오타가 발생하거나 사소한 실수가 있는 것 같습니다. 코드상에서 발생한 문제는 제가 직접 전체 프로젝트의 코드를 확인해봐야 정확한 문제의 원인을 파악할 수 있습니다. 따라서 번거로우시겠지만 전체 코드 파일을 저에게 전달해주시면 감사하겠습니다. 깃허브, 구글드라이브, 이메일 편하신 방법으로 부탁드립니다. 이메일 주소 : king199777@gmail.com 참고로 텍스트로 그냥 업로드 하시면 파악이 어렵습니다. 제가 민경언님의 코드를 직접 실행해봐야 해서요 이 부분 함께 참고해주시면 감사하겠습니다. 이런 이유에서 질문 가이드라인에도 프로젝트 구성중 발생한 문제는 전체 코드를 깃허브 또는 구글 드라이브 링크로 올려주세요 라고 안내드리고 있습니다 😃   PS. "밑에 같은 질문" 이라고 언급하신 질문의 링크를 함께 첨부해주시면 감사하겠습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 민경언님. 12.15 챕터에서 수정 페이지를 불러올 때 기본값으로 이전 데이터가 표시되지 않는 문제는 상당히 보편적인 React 상태 관리 및 비동기 데이터 처리 이슈와 관련이 있습니다. 문제의 원인 초기 데이터 설정이 안 됐을 가능성 : useEffect 를 통해 initData 가 컴포넌트의 상태로 설정되는 부분이 없었다면, 컴포넌트가 렌더링될 때 그 상태가 기본값으로 초기화될 수밖에 없습니다. 데이터의 비동기 처리 : 종종 데이터가 비동기적으로 설정될 때, 컴포넌트는 데이터가 로드되기 전에 렌더링되기 때문에 기본적으로 비어 있는 입력 칸을 보여줄 수 있습니다. 해결 방법 useEffect 를 사용하여 initData 가 갱신될 때마다 setInput 을 호출하여 상태를 업데이트하면 수정 페이지에 들어올 때 기존 데이터가 기본값으로 설정됩니다. useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]); 컴포넌트가 데이터 로드를 기다리거나 설정이 완료될 때까지 로딩 상태를 반영해주는 것도 좋은 방법입니다. 참고 자료 이전에 유사한 문제에 대한 논의가 있었고, 이러한 문제를 해결하는 방법에 대한 지식을 얻기 위해 관련된 질문들을 참고하실 수 있습니다: - 리액트 컴포넌트에서 수정시 초기값 설정 문제 해결 - React 데이터 로딩 및 상태 관리 이 정보가 민경언님에게 도움이 되기를 바랍니다. 추가적인 질문이나 궁금한 점이 있으면 언제든지 알려 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.