defaultValue와 value

input 태그의 속성인 defaultValue와 value에 값을 넣으면 둘 다 input 박스에 처음부터 보여진다.

차이점

• defaultValue: input tag에서 처음 보여줄 값
• value: input tag에서 계속 보여줄 값

defaultValue를 지정하고 input 박스에 값을 입력하면 값이 수정이 된다.
반면, value를 지정하고 input 박스에 값을 입력하면 값이 입력되지 않고 지정해준 value만 계속해서 보여준다.

input 창이 변경/초기화 되고, value 값에 data를 지정하려면 onChange 함수에서 setState를 활용해서 props로 값을 전달해줘야 한다.

---

onChange 함수
입력 받은 값e.target.value으로 state를 변경한다.

const onChangeWriter = (e: ChangeEvent<HTMLInputElement>) => {
    setWriter(e.target.value);
  };

onChange 함수 바인딩, value 지정
value에 props를 통해 받은 변경된 state를 지정한다.

<S.CInputShort
  onChange={props.onChangeWriter}
  type="text"
  value={props.writer}
  defaultValue={ props?.data?.fetchBoardComments[props.index].writer || ""}
  ></S.CInputShort>

---

제어 컴포넌트 : controlled component

state에 값을 미리 넣어 놓으면, 바로 input box 안에 입력된 상태로 나온다.
따라서, state를 빈값으로 만들면 input box도 비워진다.

• 단점
  하나 입력할 때마다 함수가 실행되어 값이 변경되고 props 전달받아야 해서 느리다 --> 긴 장문의 글에는 부적합

• 장점

1. 글 등록 후 초기화 할 때 유용하다. 이렇게 하지 않으면 getElementById 등을 이용해야하는데 좋은 방법이 아니다.
2. 현재 작성되어 있는 것이 state라는 것을 장담할 수 있다. (특정 버그 상황 등 정확도가 중요한 상황에는 제어 컴포넌트가 더 안전)

위 같은 상황 아니면 비제어로 한다. 버벅임이 없도록!

value를 지정하면 defaultValue는 보여지지 않는다. value를 빈 값("")으로 지정하더라도 defaultValue는 무시된다.

value={ state || (데이터에서 받아온 기존 값 ?? "") }

value={ props.zipcode || (props.data?.fetchBoard.boardAddress?.zipcode ?? "")}