React_25_하나의 State로 만들기

지원·2023년 10월 8일

목록 보기

26/71

앞에서 구현한 입력폼을 각각의 State로 관리하는 것이 아니라
하나의 State로 바꾸어보기

input태그에 name속성을 활용하는 것이 핵심이다.
이벤트에서 name값을 가져올 수 있다는 점을 활용하면 된다.

1. values라는 State를 만들고 초기값으로는 객체로 각 input의 필드값을 넣어준다.
const [values, setValues] = useState({
        title:'',
        rating: 0,
        content:''
    });

2. handleChange라는 함수를 만든다.
e.target 값을 name 과 value 로 Destructuring 하고,
이 값을 활용해서 values 스테이트를 변경한다.
distructuring : 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여
개별적인 변수에 할당하는 것
배열 또는 객체 리터럴에서 필요한 값만 추출하여
변수에 할당하거나 변환할 때 유용
e.target에서 value값과 name값을 가져온 다음에
setValues에서는 prevValues 파라미터로 받아서 spred문법을 사용해준다.
[name]이라는 프로퍼티에다가 value를 지정해준다.
const handleChange = (e)=>{
        const { name, value } = e.target;
        setValues((prevValues)=>({
            ...prevValues, 
            [name]: value //대괄호[name]
        }))
    }
[name]
name의 값으로 프로퍼티명을 지정하고 여기에 해당하는 값을
지정해 줄 수 있다.
State의 setter함수( setValues )는 State를 통째로 바꾼다.
그래서 setter함수의 아규먼트로는 완전한 값을 넣어줘야한다.
만역 값의 일부인 {[name: values]}처럼 넣어주면 다른 값들은 사라지게 된다.
ex)
Values 값을 간단하게 만들어보자.
const [values, setValues] = useState({a: 1, b: 2})
setValues({b: 3})

결과
values값이 {a: 1, b: 3}이 되는게 아니라
{b: 3}이 된다.

argument: 함수를 호출할 때 전달되는 실제 값_ 전달인자
parameter: 매개변수

setValues((prevValues)=>({
            ...prevValues, 
            [name]: value //대괄호[name]
        }))

여기서 ( )로 묶는 이유
화살표함수에서 리턴 값을그대로 써 줄 때 리턴값이 객체형이면 함수랑 구분이 안된다.
그래서 오류가 나기때문에 괄호를 감싸주면

이 값이 함수 실행부분이 아니라 리턴 값이고 객체형인
리턴값이구나 하는 것을 표시해 줄 수 있다.

ex)
(num)=>num + 1 //이렇게 쓸 수 있다.
여기서 num + 1 부분 대신에 객체를 리턴하고 싶으면

(num)=>{어떤 값} // 이런 식으로 작성하게 되는데
이러면 함수 실행부분과 구분되지 않는다.

(num)=>({어떤 값})으로 작성하면 오류가 없다.

3. 앞에서 만든 헨들러들은 handleChange로 바꾸어주고
State값도 바꾸어주고
각 input태그에 name값을 지정해준다.

return(
        <form className="ReviewForm" onSubmit={handleSubmit}>
            <input name='title' value={values.title} onChange={handleChange}></input>
            <input type="number" name="rating" value={values.rating} onChange={handleChange}></input>
            <textarea name="content" value={values.content} onChange={handleChange}></textarea>
            <button type="submit">확인</button>
        </form> 
    )