React 간단한 일기장 만들기

간단한 다이어리 만들기

다이어리를 만들기 위해 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;
}