[JS/React] 1️⃣ 간단한 일기장 만들기

포스팅을 하기에 앞서 여담 하나를 얘기하자면,

인프런에 리액트 강의들이 꽤 많고 각각의 강의들은 해당 강의를 수강하면 최소 1개에서 많게는 4-5개의 프로젝트를 완성할 수가 있다. 내가 수강 중인 리액트 강의는 '감정 일기장' 프로젝트를 만들 수 있는데 수많은 강의들 중 내가 이 강의를 선택한 이유가 좀 황당하다.
대학교 1학년 땐가 앱스토어 인기 유료 앱에 'MOODA'란 감정을 기록해서 일기를 작성할 수 있는 앱이 있었다. 앱 아이콘과 상세 화면 사진을 봤을 때, UI가 상당히 아기자기(아기자기한 거에 마음이 약한 편)하여 구매하게 되었고 2년 동안은 꽤 잘 사용한 거 같다.
여튼, 그래서 졸업작품에서 리액트를 사용하게 돼서 처음 사용해보는 터라 리액트 강의를 찾아보고 있었고, 해당 강의를 발견하게 되었다. 이 수업을 들으면 나 같은 초짜도 MOODA 같은 프로그램을 만들어 볼 수 있다니라는 신기한 마음이 들어서 선택하게 되었다...ㅎ(리뷰도 많긴 했다...)

~혹시 MOODA UI를 궁금해할까 싶어서 첨부~

 

본론으로 돌아와서, 이번 포스팅에서는 리액트를 사용하여 간단한 일기장 틀을 구현한 코드에 대해 작성하도록 하겠습니다. (이후에 기능들이 추가될 때마다 해당 글에 이어서 포스팅을 업로드하도록 하겠습니다.)

 

 

📌 구현할 일기장의 구조

상단 - 작성자

중앙 - 일기내용

하단 - 감정지수

이렇게 3개의 input을 입력 받아서 버튼을 눌렀을 때, 저장 성공했다는 알림이 뜸

 

 

 

 

👩🏻‍💻 전체 코드

import React, { useState, useRef } from "react";

const DiaryEditor = () => {

  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

  const authorInput = useRef(); // focus()를 사용하기 위해 Input창에 접근
  const contentInput = useRef();

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();
      return;
    }
    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }
    alert("일기 저장 성공");
  };
  
  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}
        ></input>
      </div>
      <div>
        {/* 여러 줄 입력 가능 */}
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
        ></textarea>
      </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}>Save</button>
      </div>
    </div>
  );
};

export default DiaryEditor;

const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

  const authorInput = useRef(); // focus()를 사용하기 위해 Input창에 접근
  const contentInput = useRef();

⬆️ 전체 코드에서 해당 코드는 input으로 들어오는 입력값들의 초기값과 이후에 focus 기능을 사용하기 위해 객체에 접근이 가능하도록 선언해 놓은 변수들입니다.

 

이제, handleChangeState() 함수와 handleSubmit() 함수를 보도록 하겠습니다.

const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

⬆️ 이 함수는 작성자, 일기내용, 감정지수가 input으로 입력이 들어왔을 때 onChange 이벤트에서 사용되는 함수입니다.

spread 연산자로 useState를 사용하여 설정한 초기값들을 사용하되, 입력 들어온 객체의 value값은 변경해줍니다.

const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();
      return;
    }
    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }
    alert("일기 저장 성공");
  };

⬆️ 이 함수는 작성자를 입력하는 칸이나 일기 내용을 입력하는 칸에 일정 글자수를 채우지 않고 Save 버튼을 눌렀을 때, onChange 이벤트에서 사용되는 함수입니다.

이때, useRef를 사용하여 객체에 접근이 가능하도록 하였으므로 '변수명'.current.focus();를 사용하여 focus 기능을 주게 됩니다.

글자수를 모두 만족한다면 알림창이 뜨게 됩니다.

 

각각의 컴포넌트들을 생성하는 과정은 어렵지 않으므로 전체 코드를 참고하시면 되겠습니다😊