프로젝트 진행중, 폼을 수정할때 서버에서 저장된값을 가져와 input 태그의 defaultValue로 값을 넣어주고 있었다.
해당 input값을 수정후 저장도 잘 되었고, 문제 없이 동작하는 듯 하였다.
그러던 중, 다음 주소검색 모듈을 이용해 input값을 변경하는 로직 작성중에 문제가 생겼다.
문제가 되지 않았던 input과의 차이가 있다면 변경되는 주소값을 state로 관리하였기 때문에, 주소를 담는 input의 defaultValue는 state의 값이였다.
검색해본결과! state를 사용하여 값을 변경하려면 value를 사용해야 한다고 한다.
defalutValue는 처음 로드를 위한 것으로 별도의 요청을 하지 않는 한 리렌더링이 되지 않아 렌더링이 일어나는 조건을 걸려면 key값을 주어 변경을 인식하도록 해야 한다고 한다.
나는 defaultValue를 value로 변경하는 방법을 선택했고 react에서 value를 변경하는 값으로 사용하려면 readonly속성을 주거나 onChange 이벤트를 통해 value값을 변경해야 하므로
defaultValue를 value로 변경 후, onChange 이벤트로 주소값이 담긴 state관리하니 문제없이 input의 값이 잘 변경되었다.
