[클라우딩 어플리케이션 엔지니어링 TIL] 240205 - React 기본. 간단한 일기장 프로젝트

Intro

---

오늘은 React로 간단한 일기장 만들기 실습을 시작했다!!

 

 

오늘 학습한 내용

---

React에서 사용자 입력 처리하기

세부 목표

• 한 줄 입력 처리하기
• 여러 줄 입력 처리하기
• 선택 박스 입력 처리하기
• 사용자 입력 데이터 헨들링하기

 

기능이 비슷한 state는 하나로 묶기

: 하나의 객체로 저장하여 코드를 간단하게 수정할 수 있다.

• 이전 코드

import { useState } from 'react';

const DiaryEditor = () => {
  const [author, setAuthor] = useState('이가연');
  const [content, setContent] = useState('');

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={author}
          onChange={(e) => {
            setAuthor(e.target.value);
          }}
        />
      </div>
      <div>
        <textarea
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
          }}
        />
      </div>
    </div>
  );
};

export default DiaryEditor;

 

• 수정 코드

import { useState } from 'react';

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: '',
    content: '',
  });

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

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input name="author" value={state.author} onChange={handleChangeState} />
      </div>
      <div>
        <textarea name="content" value={state.content} onChange={handleChangeState} />
      </div>
    </div>
  );
};

export default DiaryEditor;

 

 

 

 

---

React에서 DOM 조작하기 - useRef

세부 목표

• 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus

 

DOM을 조작하기 위해 React의 useRef를 사용한다.

import { useState, useRef } from 'react';

const DiaryEditor = () => {
  const authorInput = useRef();
  const contentInput = useRef();

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

  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} />
      </div>
      <div>
        <textarea ref={contentInput} name="content" value={state.content} onChange={handleChangeState} />
      </div>
      <div>
        <label>오늘의 감정점수: </label>
        <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;

 

 

 

 

---

React에서 리스트 렌더링하기

세부 목표

• 배열을 이용하여 React에서 LIST를 렌더링 해보고 개별적인 컴포넌트로 만들어보기

 

일기리스트 (DiaryList) 컴포넌트 만들기

: 서버에서 데이터를 가져오는 걸 구현하기 전에 더미 데이터를 만들어 미리 테스트해 본다.

import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';

const dummyList = [
  {
    id: 1,
    author: '이가연',
    content: '날씨 흐리고 비옴',
    emotion: 4,
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: '홍길동',
    content: '오늘은 집에서 콩나물 불고기를 해먹었다. 맛있었다.',
    emotion: 3,
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: '김바보',
    content: '오늘은 리액트를 공부했다. 재밌었다.',
    emotion: 5,
    created_date: new Date().getTime(),
  },
];

function App() {
  return (
    <div className="App">
      <DiaryEditor />
      <DiaryList diaryList={dummyList} />
    </div>
  );
}

export default App;

 

• state 변수 dummyList가 undefined일 경우를 대비해 값 초기화 (.defaultProps)

DiaryList.defaultProps = {
  diaryList: [],
};

 

• map으로 요소를 만들 땐 key값을 지정해 줘야 한다. (되도록 id값을 사용하고 index값을 사용하는 건 지양함)

const DiaryList = ({ diaryList }) => {
  console.log(diaryList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((item) => (
          <div key={item.id}>
            <div>작성자: {item.author}</div>
            <div>일기: {item.content}</div>
            <div>감정: {item.emotion}</div>
            <div>작성 시간(ms): {item.created_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

 

 

 

결과물

 

 

마무리

---

바닐라 자바스크립트로 구현하는 것 보다 훨씬 간단하게 리액트로 화면을 구현한 것 같다.

리액트에선 DOM을 document.querySelector로 직접 호출하지 않고 useRef로 간단하게 요소를 호출해올 수 있는 게 코드 가독성도 좋고 리액트의 장점인 것 같다.

리액트를 잘 활용해서 앞으로 더 재밌는 프로젝트를 진행해 볼 수 있을 것 같다.