[React] input 값을 useState로 상태 관리 할 때 defaultValue를 왜 사용하면 안될까?

사이드프로젝트 하는 중 마이페이지에서 닉네임을 가져와야하는데 작은 문제가 생겼다.

처음에 로그인한 유저의 닉네임을 그대로 가져오기 위해 input 태그에 defaultValue={user.nickname}을 하고,

닉네임 변경하기 위해 새로운 닉네임 값으로 value={nickname}을 속성에 넣었더니 아래처럼 에러 메세지가 찍혔다.

 

value와 defaultValue를 같이 쓰지 말라는 거였다. 왜 안될까?

 

이유는 value와 defaultValue가 서로 다른 방식으로 동작하기 때문이다.

• defaultValue: <input> 컴포넌트가 처음 렌더링될 때만 적용되는 초기 값. 상태가 아닌, 기본적으로 입력될 값으로 한 번만 설정된다.
• value: 컴포넌트의 상태를 직접적으로 반영한다. useState로 상태를 관리하고 value 속성에 전달하게 되면, 입력 필드의 값이 상태에 따라 항상 업데이트된다.

결론

• value와 defaultValue를 함께 사용하면 리액트가 혼란스러워하고 경고 메시지를 발생시킨다. input에 두 가지 초기값이 설정되는 셈이기 때문에, 예기치 않은 동작이나 일관성 문제를 유발할 수 있다.

그래서 처음에 원하는 방향으로 구현하려면 아주 간단하게도

defaultValue를 넣지 않고 input의 값을 관리하는 useState의 초깃값에 user.nickname을 넣으면 된다. 

  const [nickname, setNickname] = useState<string>(user!.nickname);