input 태그의 속성인 defaultValue와 value에는 차이가 있다.
차이점
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 전달받아야 해서 느리다 --> 긴 장문의 글에는 부적합
장점
글 등록 후 초기화 할 때 유용하다. 이렇게 하지 않으면 getElementById 등을 이용해야하는데 좋은 방법이 아니다.
현재 작성되어 있는 것이 state라는 것을 장담할 수 있다. (특정 버그 상황 등 정확도가 중요한 상황에는 제어 컴포넌트가 더 안전)
위 같은 상황 아니면 비제어로 한다. 버벅임이 없도록!
value를 지정하면 defaultValue는 보여지지 않는다. value를 빈 값("")으로 지정하더라도 defaultValue는 무시된다.
value={ state || (데이터에서 받아온 기존 값 ?? "") }
value={ props.zipcode || (props.data?.fetchBoard.boardAddress?.zipcode ?? "")}
출처 : https://velog.io/@e_juhee/defaultValue-value
좋은 글이 있어서 제가 경험한 겸 적어 놓았습니다.
