[React] 데이터 수정하기 (useRef, defaultValue, selected)

개요

수정 기능을 구현하려면 데이터를 Form에 가져와서 수정 후 다시 반환되어야 한다.
<input> 태그와 <select> 태그에서 수정하기 위해 사용되는 속성을 알아보자.

💡수정 처리

REST API를 호출하여, method : "PUT" 이용

---

Form에 수정할 데이터 가져오기

<input> 태그

텍스트 수정은 <input> 태그에 defaultValue={}에 담아 불러올 수 있었다.

<input type="text" defaultValue={profile.name} ref={nameRef} />

<select> 태그

<select> 태그는 속성 defaultValue, value로 사용했을 때 적용되지 않아서
if문으로 구분하여 <option> 태그에 selected를 추가했다.

<select ref={careerRef}>
	{
		experience.map((career)=>{
			if(profile.career == career.career){
				return (
					<option key={career.id} value={career.career} selected>
						{career.career} 년차
					</option>
				)
			}
			else{
				return (
					<option key={career.id} value={career.career}>
						{career.career} 년차
					</option>
				)
			}
		})
	}
</select>

---

수정한 데이터 접근

위 코드를 보면 속성 ref={}가 들어가 있는데, 이는 훅스 useRef의 반환 객체이다.
이를 통해 수정한 데이터에 접근할 수 있다.

• 변수 설정 - const 변수명 = useRef(null);
• 변수 접근 - 변수명.current.value

// 변수 설정
const nameRef = useRef(null);

// 변수 접근
nameRef.current.value

---

관련 링크

🪄 [GitHub] 위 방법 이용한 프로젝트 보기

🪄 [React] 데이터 전달하는 3가지 방법