52분 47초 문제점 2가지 설명 중 2번째 문제점 관련 질문

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

09-03-boards 수정 1편

해결된 질문

작성

237

안녕하세요 차근차근 강의 들으며 공부하고 있는 수강생입니다

현재 강의에서 알려주신 방법에 따라 페이지를 구현할 경우 2가지 문제점에 대해 말씀해 주셨는데요

2번째 문제점은 내가 수정하고 싶은 요소만 수정했을 때, 기존에 입력했던 다른 요소가 삭제된다는 것이었습니다

그런데 container 파일 작성 요소 중

  const [writer, setWriter] = useState();
  const [title, setTitle] = useState();
  const [contents, setContents] = useState();

useState() 소괄호가 비어 있을 땐 기존에 입력했던 다른 요소가 삭제되지 않은 채 수정한 요소가 반영되었습니다

여기서 궁금한 점은

입니다

감사합니다

답변 1

지식공유자

안녕하세요! zero.1.0.one.xx님!

바로 질문에 대한 답변을 드리자면,

useState() 소괄호가 비어 있을 때와 소괄호 안에 빈 문자열("")을 넣어주었을 때 결과가 달라지는 이유

=> const [writer, setWriter] = useState() 소괄호가 비어있기 때문에 writer는 초기값이 undefined가 되겠죠! 따라서, 수정하기 api에서 없는녀석을 굳이 포함시키지 않았기 때문에, network탭을 확인해 보시면 api요청에 값이 포함되어있지 않고 있어요!

=> 반대로, const [writer, setWriter] = useState("") 의 경우에는, 빈 문자열이 초기값으로 들어가 있기 때문에, 수정하기 api에는 writer: "" 로 바꿔줘 라는 요청이 포함되게 됩니다!
위와 같은 이유라면, 어차피 포함시키지 않는게 수정이 안되게 할 수 있으니, 소괄호를 비워놓지 왜 ""문자열로 만드는지가 궁금하실텐데요! 사실 실무에서는 초기값이 있는 경우도, 없는 경우도 있답니다! (ex, 휴대폰번호에서의 "010"). 따라서, 초기값이 있는 경우에 어떻게 작동되는지, 초기값이 없는 경우에는 어떻게 작동되는지를 구분하여 확인해 보시면 좋을 것 같아요! 결과적으로, 단지 본 수업만 놓고 본다면, 초기값이 없는 경우로 진행하여도 무방합니다!

질문자

두 가지 방법을 다 적용해서 해당 강의의 퀴즈를 풀어보면서 비교, 확인해보겠습니다 답변 감사합니다

인프런 커뮤니티 질문&답변