✏️ input tag의 defaultValue와 value

 

Input tag에는 비슷해보이지만 다른 속성이 있다. defaultValue와 value가 있는데

두 속성은 지정해주었을 때 처음 보여진다는 부분에서 비슷해보이지만 다르다!

 

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

 

그렇기 때문에 defaultValue를 지정해주고 input 창에 입력을 하게되면 값이 수정되지만,

value를 지정해주고 input 창에 입력하게되면 입력이 되지않고 지정해준 value값만 보여지게 된다.

input 창이 변경되고, 초기화되도록 value 값에 data를 지정해주려면 아래와 같이 작성해 주어야 한다.

 

 

 

 

예시 코드

// onChange 이벤트로 작성된 state 변수 writer
const [writer, setWriter] = useState('')
const onChangeWriter = (event) => {
	setWriter(event.target.value)
}

<input value={props.writer} />

 

위와 같이 작성된 input창의 value를 입력된 후 초기화 해주려면 state 값을 초기화해준다면 input 창도 초기화 된다.

 

 

 

프로젝트를 만들때 defaultValue와 value가 두개 있으면, value값이 더 우선시 되므로 (defaultValue는 무시됨)

defaultValue가 먼저 필요한지, value속성이 필요한지 파악하면서 작성해야한다.