Frontend practice/React
React 간단한 일기장 만들기
판다꼬마
2022. 5. 27. 22:20
728x90
간단한 다이어리 만들기
다이어리를 만들기 위해 DiaryEditor.js를 만들었다.
const DiaryEditor = () => {
return <div className="Diaryeditor"></div>;
};
export default DiaryEditor;
그 후 App.js에 불러와준다.
import "./App.css";
import DiaryEditor from "./DiaryEditor";
function App() {
return (
<div className="App">
<h2>일기장</h2>
<DiaryEditor />
</div>
);
}
export default App;
사용자의 입력을 처리하기 위해 state를 사용한다.
import { useState } from "react";
const DiaryEditor = () => {
const [author, setAuthor] = useState("추성준");
return (
<div className="Diaryeditor">
<h2>오늘의 일기</h2>
<div>
<input
value={author}
onChange={(e) => {
console.log(e.target.value);
setAuthor(e.target.value);
}}
/>
</div>
</div>
);
};
-input의 입력값이 바뀌면 실시간으로 입력값이 바뀔 때마다
setAuthor 상태변환 함수를 이용해 author라는 state에 저장하려 한다
-이렇게 입력을 하면 onChange가 실행이 된다.
onChange는 값이 바뀌었을 때 발생되는 이벤트이며 값을 입력하면 콜백 함수가 작동이 되며 출력이 되게 만들었다
이제 변화하는 값이 콘솔에 찍히게 되고 setAuthor가 값을 계속 변화시켜준다.
최종 결과물
DiaryEditor.js
import { useState } from "react";
const DiaryEditor = () => {
const [state, setState] = useState({
author: "",
content: "",
emotion: 1,
});
const handleChangeState = (e) => {
setState({
...state,
[e.target.name]: e.target.value,
});
};
const handleSubmit = () => {
console.log(state);
alert("저장 성공!");
};
return (
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input value={state.author} onChange={handleChangeState} name="author" placeholder="작성자" type="text" />
</div>
<div>
<textarea value={state.content} onChange={handleChangeState} name="content" placeholder="일기" type="text" />
</div>
<div>
<span>오늘의 감정점수 : </span>
<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>
<div>
<button onClick={handleSubmit}>일기 저장하기</button>
</div>
</div>
);
};
export default DiaryEditor;
App.css
.DiaryEditor {
border: 1px solid gray;
text-align: center;
padding: 20px;
}
.DiaryEditor input,
textarea {
margin-bottom: 20px;
width: 500px;
}
.DiaryEditor input {
padding: 10px;
}
.DiaryEditor textarea {
padding: 10px;
height: 150px;
}
.DiaryEditor select {
width: 300px;
padding: 10px;
margin-bottom: 20px;
}
.DiaryEditor button {
width: 500px;
padding: 10px;
cursor: pointer;
}
728x90