value 와 defaultValue 의 차이

저도 배우는 입장이지만 지나가다 아는대로 써봤어요

value는 무조건 수정이 안 되는 건 아닌데요
일단 사용자가 직접 input 창에 입력, 수정할 수 없는 값이면 readOnly를 써줘야돼요

import { useState } from "react";

export default function TestPage() {
  const [zipcode, setZipcode] = useState("");

  const onChangeZipcode = (event): void => {
    setZipcode(event.target.value);
    console.log(zipcode);
  };

  return (
    <>
      <input type="text" value={zipcode} />
    </>
  );
}

대충 위처럼 작성하고 실행해보면 입력이 안 먹히고 Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. 라는 경고가 뜨는데 왜냐하면

<input type="text" value={zipcode} />

value={zipcode}인데 onChange가 없으니 사용자가 input창에 입력하는 걸 감지하고 zipcode를 바꿔줄 수가 없어요
만~약 사용자가 input창에 입력을 한다 쳐도 zipcode가 안 바뀌는데 value는 무조건 zipcode여야 하니까 input창에 입력이 된다면? 이상해지는거죠 그래서 저렇게만 쓰면 어차피 readOnly로 만들어지고, 진짜 이렇게 동작하는 걸 원하는거면 readOnly를 명시적으로 쓰라는 소리같아요

<input type="text" value="07250" />

얘도 value="07250"이면 뭔 짓을 해도 07250에서 안 바뀔테니까 얘도 같은 경고가 뜰거에요 이게 강의에서 예로 든 "반갑습니다"를 value로 넣은거랑 같은 거고 그래서 value를 수정할 수 없다고 하신 것 같은데

만약

<input type="text" value={zipcode} onChange={onChangeZipcode} />

이렇게 onChange를 붙여서 사용자가 입력하는대로 zipcode도 바뀔 수 있게 해주면 value여도 입력내용이 바뀌어요

근데 defaultValue는 onChange 없이 얘만 달랑 써도 입력을 바꿀 수 있어요
<input type="text" defaultValue="07250" />

value는 무조건 그 입력창에 써져있는 게 항상 value값이어야 하는거고
defaultValue는 말그대로 처음에 기본값으로 써져있는 것뿐이라 뭘하든 수정이 되는거죠

결론적으로 zipcode의 경우에는 value를 입력창에서 직접 수정할 수 없기 때문에 readOnly를 써야하고, 안해보긴 했는데 readOnly를 빼도 어차피 readOnly로 만들어질 것 같아요

그리고 value는 사용자의 입력 값이 state와 연결되는 제어 컴포넌트에서 사용하고 defaultValue는 비제어 컴포넌트에서 사용한다고 하네요

https://ko.react.dev/reference/react-dom/components/input

여기에도 자세한 내용이 나와있네요

그리고 props.address !== ""가 거짓인 경우를 물어보셨는데 제가 생각하기엔
게시글 작성이든 수정이든 처음에는 무조건 props.address === "" 일 거예요
새로운 페이지로 넘어갈 때, state도 전부 새로 초기화되면서 만들어지는 걸로 아는데 그럼 address도 (작성이든 수정이든) 초기값인 빈 문자열로 만들어진 상태일 것이고

그래서 처음에는 무조건 props.address !== ""이 아니니까, 즉 address가 빈 문자열이니까 props.zipcode 가 아닌

props.data?.fetchBoard.boardAddress?.address ?? ""

여기로 넘어오고, props.data?.어쩌구저쩌구.address가 존재한다면 이게 바로 글을 수정중(더 정확히 말하면 수정하려는 글에 이미 기존에 작성한 address가 존재함)이라는 뜻이에요

왜냐하면 애초에 props.data는 edit 페이지에서만 fetchBoard해서 전달하고 있거든요 new에서는 data가 없어요

아무튼 이 props.data.어쩌구.address값이 있으면 이걸 주소창에 넣어주는거니까 그럼 수정 페이지에 게시글에 썼던 주소가 알아서 채워져서 보이겠죠(이게 defaultValue 역할)

그리고 props.어쩌구.address가 없다는 건 new 페이지(게시글 작성하는 경우)이거나 수정할 글에 주소를 설정하지 않았거나? 일 것 같네요 그렇게 ""가 되는거고

마지막으로 props.address !== ""인 경우는 사용자가 주소를 골랐을 때(=주소라이브러리 창에서 주소 골라서 onCompleteAddressSearch가 실행되고 address라는 state가 변경되면서 ""이 아닌 값이 되었을 때) 이 고른 주소가 나와줘야 하니까 props.address가 비로소 value로서 표시되고요

마지막 질문은 저도 정확히 모르겠지만 위의 내용상 value를 쓰는게 맞는거같아요 writer state와 입력값이 연동되기 때문에요

그리고 제가 나중에 댓글 수정을 구현하면서 이런식으로 바꾸게 되었고

value={
  props.writer !== ""
    ? props.writer
    : props.el?.writer ?? ""
}

이때 props.writer를 defaultValue로 하니 생기는 문제점이

저는 내용을 입력하고 등록하기를 누르면 새 댓글이 작성되면서 댓글창의 작성자와 비밀번호와 내용은 비워지도록 하고 싶어서, 등록하기를 누르면 실행되는 함수 마지막에 state들을 setState("")로 바꿔버렸거든요

근데 defaultValue를 쓰니까 이렇게 다른 곳에서 state를 ""로 바꾼 게 적용이 안 되어버려요
그러니까 입력창의 내용과 props.writer의 내용이 항상 같다는 보장이 없다는 거예요...

onChange={props.onChangeWriter}가 있기 때문에 입력창에서 철수 라고 쓰면 그게 곧 writer state값이 되긴 하지만
반대로 다른 곳에서 setWriter("영희") 해봤자 입력창의 내용은 바뀌지 않는거고, defaultValue는 처음 초기값을 표시하는데서 역할을 다하는거죠
만약 value={props.writer}면 영희로 바뀌었겠죠

이래서 아마 state와 입력값이 연결될 때는 value를 사용해야 한다고 하는 것 같아요

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