- input 생성 & 컴포넌트 import
- DiaryEditor.js 생성 후 export
// DiaryEditor.js 생성
const DiaryEditor = () => {
// (1) author와 content state를 각각 정의
const [author, setAuthor] = useState("");
const [content, setContent] = useState("");
return (
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input />
<textarea />
</div>
<button>저장하기</button>
</div>
);
export default DiaryEditor;- App.js에서 DiaryEditor.js import
// App.js
import "./App.css";
// DiaryEditor.js import
import DiaryEditor from "./DiaryEditor";
function App() {
return (
<div className="App">
// DiaryEditor 컴포넌트 사용
<DiaryEditor />
</div>
);
}
export default App;- 작성자와 컨텐츠 input 입력값을 실시간으로 인식할 수 있도록 state 기능 추가
// useState import
import React, { useState } from "react";
const DiaryEditor = () => {
// (1) author와 content state를 각각 정의
const [author, setAuthor] = useState("작성자 이름");
const [content, setContent] = useState("");
return (
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
name="author"
// 동적으로 변화하는 값을 author input이 인식할 수 있도록 -> author라는 state를 input의 value prop으로 전달
value={author}
/>
<textarea
name="content"
value={content}
/>
</div>
<button>저장하기</button>
</div>
);
export default DiaryEditor;- 이렇게만 설정하면 setAuthor, setContent 함수는 설정되어 있지 않기 때문에, 두 input 값은 초기값('')에서 변경되지 않음 -> onChange={} 사용
<input
name="author"
// 동적으로 변화하는 값을 author input이 인식할 수 있도록 -> author라는 state를 input의 value prop으로 전달
value={author}
onChange={setAuthor(e.target.value)}
/>
- 이벤트객체에서 input의 value값을 꺼내올 수 있음
e.target.value
<input
name="author"
value={author}
// input의 변화를 감지하는 onChange 함수 사용. 변화 이벤틀를 e로 받아 입력된 값(e.target.value)로 author state를 setAuthor함수를 이용해 업데이트 해준다.
onChange={(e) => {
setAuthor(e.target.value);
}}
/>- state의 형태와 setState의 기능이 동일하다면, state를 두 개로 분리할 필요가 없음 -> state 묶기
// 기존 정의한 author state와 setAuthor는 제거
// const [author, setAuthor] = useState("작성자 이름");
const [state, setState] = useState({
// state의 초기값을 객체로 정의
author: "",
content: "",
emotion: 1,
});- input의 state값 재정의,onChange 함수 수정
<input
name="author"
// state 객체에서 맞는 값을 선택하여 가져옴
value={state.author}
// state 객체가 가지고 있는 프로퍼티 중 author의 값만 업데이트 시켜야함 / content값은 그대로 유지
onChange={
// onChange 시 setState(변화시킬 값)을 정의해줘야하는데, state가 객체였으니 변화될 state값도 객체로 전달해야함
setState({
// author는 input에서 입력받은 값으로 변경
author: e.target.value,
// content는 기존 state에 있던 content값을 그대로 유지
content: state.content,
})
}
/>- but, state 개수가 매우 많다면 하나의 state만 변경하기 위해서 동일한 코드를 너무 많이 작성해야하는 번거로움이 있음 ->전개구문 사용
- 주의 : state 업데이트 구문과 스프레드 연산자의 순서가 변경되면, 변경된 값 위로 기존 값이 덮어씌워지기 때문에 제대로 업데이트 되지 않음.
<input
name="author"
// state 객체에서 맞는 값을 선택하여 가져옴
value={state.author}
// state 객체가 가지고 있는 프로퍼티 중 author의 값만 업데이트 시켜야함 / content값은 그대로 유지
onChange={
// onChange 시 setState(변화시킬 값)을 정의해줘야하는데, state가 객체였으니 변화될 state값도 객체로 전달해야함
setState({
// 기존 state 객체의 property들을 펼쳐줘서 기존 값이 들어가도록 설정
...state,
// 새롭게 변경할 state만 다시 적어서 값 업데이트
author: e.target.value,
})
}
/>
// textarea도 동일하게 작성
<textarea
name="content"
value={state.content}
onChange={
setState({
...state,
content: e.target.value,
})
}
/>- 이벤트 핸들러(onChange에 전달될 함수)도 하나로 합쳐보기 = onChange 함수에 전달될 공통 이벤트 함수(setState) 만들기
const handleChangeState = (e) => {
// console.log(e.target.name); // author or content
// console.log(e.target.value); // input 값
setState({
...state,
// author: e.target.value,
// content: e.target.value,
// 현재 입력된 input or textarea의 name값을 받아와서 변경해야하는 state property의 key값으로 넣어주기
[e.target.name]: e.target.value,
});
};점표기법 vs 괄호표기법
객체의 key값으로 조회할 때, 점표기법은 키값이 정해져있는 겨우만 사용 가능함.
변수를 키값으로 사용하는 경우 괄호표기법을 사용해야함.
[key] : 변경할 값
- 감정점수를 표현할 수 있는 select Box, 작성 버튼 추가
<div>
<select
name="emotion"
value={state.emotion}
onChange={handleChangeState}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
</select>
</div>
<button onClick={handleSubmit}>저장하기</button>- 감정점수를 state로 관리할 수 있도록 state객체에 프로퍼티 추가
const [state, setState] = useState({
author: "작성자",
content: "내용",
emotion: 1,
});- 저장버튼 눌렀을 때 현재 state를 출력하는 기능 추가
const handleSubmit = () => {
console.log(state);
}
