defaultValue 옵션으로 조건부 랜더링을 해도 재랜더링이 일어나지 않는 문제

리엑트 defaultValue

이번에 협업 프로젝트를 하면서 defaultValue라는 개념을 처음 알게 되었는데 사용할때는 그냥 모르고 한번 사용해보자 하는식으로 사용 했었지만 역시 뭐든지 제대로 알고 사용하는게 좋다. 아무것도 모르고 사용했다가 value의 값에는 조건부 랜더링이 되는데 defaultValue에는 조건부 랜더링이 안 돼서 원인을 못찾고 계속 시간만 버릴 수 있기 때문이다.

defaultValue 와 그냥 value

필자는 해당 문제를 ref를 이용해서 값을 바꾸는 식으로 해결을 하였는데 나중에 알게된 사실이지만 defaultValue는 초기 로딩시 초기 로딩값을 위한 속성으로 해당 속성의 값을 변경하기 위해서는 key 값을 설정해주어야 한다. 반면에 value는 지속적으로 변경이 가능한 속성으로 대부분 사용할때 useState를 만들어 변경한다. 이 부분은 이미 많은 정보가 있기 때문에 따로 설명은 하지 않겠다.

defaultValue의 key 설정법

defaultValue의 key 설정법을 알아보자 defaultValue의 key에는 변경될 값을 넣어주는 방법으로 사용하면 된다. 예를 들어 아래와 같이 itemInfo라는 정보를 리렌더링 하고 싶다면 key 값에 똑같이 사용하면 되는 것이다 정말 간단하다

          <input type="text" name="title" id="title" placeholder="제목"
            defaultValue={itemInfo.title}
            key={itemInfo.title}
          />

오늘의 결론

defaultValue를 조건부 랜더링 하고 싶으면 key 값을 설정하자