[React] 10. 일정 관리 웹 애플리케이션 만들기

728x90

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다.

이번 실습은 다음과 같은 순서로 진행됩니다.

프로젝트 준비하기
UI 구성하기
기능 구현하기

📌 프로젝트 준비하기

📚 프로젝트 생성 및 필요한 라이브러리 설치

일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요.

$ yarn create react-app todo-app

$ cd todo-app
$ yarn add node-sass classnames react-icons

sass : Sass 를 사용할 예정이므로 설치
classnames : 조건부 스타일링을 편하게 하기 위해 설치
react-icons : 리액트에서 다양하고 예쁜 아이콘을 사용하는 라이브러리, 아이콘을 컴포넌트처럼 다룰 수 있음

📚 Prettier 설정

Prettier : 코드가 제대로 정렬되고, 세미콜론(;)이 바진 곳에 자동 추가되는 등의 자동 코드 정리를 해줌, .prettierrc라는 파일에서 이러한 스타일링을 커스터마이징할 수 있음

Prettier을 설정하여 코드 스타일링을 깔끔하게 정리합시다. .prettierrc 파일을 다음과 같이 만드세요.

// .prettierrc

{
  “singleQuote“: true,
  “semi“: true,
  “useTabs“: false,
  “tabWidth“: 2,
  “trailingComma“: “all“,
  “printWidth“: 80
}

📚 index.ccss 수정

글로벌 스타일 파일이 들어있는 index.css를 수정하겠습니다.

// index.css

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

📚 App 컴포넌트 초기화

컴포넌트를 초기화 한 뒤, 프로젝트 디렉터리에서 yarn start 명령어를 입력하여 개발 서버를 구동하세요.

// App.js

import React from 'react';
 
const App = () => {
  return <div>Todo App을 만들자!</div>;
};
 
export default App;

📌 UI 구성하기

앞으로 만들 컴포넌트들은 다음과 같습니다. 이 컴포넌트들은 관습적으로 src 디렉터리에 components 디렉터리를 만들어 그 안에 저장합니다.

TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여 줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다.
TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다.
TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다.
TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여 보여 줍니다.

📚 TodoTemplate 만들기

// TodoTemplate.js

import './TodoTemplate.scss';

const TodoTemplate = ({ children }) => {
    return (
        <div className="TodoTemplate">
            <div className="app-title">일정관리</div>
            <div className="content">{children}</div>
        </div>
    );
};

export default TodoTemplate;

이 컴포넌트를 작성한 뒤 App.js 에서 import를 따로 해야합니다.

// App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
 
const App = () => {
  return <TodoTemplate>Todo App을 만들자!</TodoTemplate>;
};
 
export default App;

TodoTemplate의 css 스타일을 작성하기 위한 코드는 다음과 같습니다.

// TodoTemplate.scss

.TodoTemplate {
    width: 512px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
    border-radius: 4px;
    overflow: hidden;

    .app-title {
        background: #22b8cf;
        color: white;
        height: 4rem;
        font-size: 1.5rem;
        display: flex; // 주목
        align-items: center;
        justify-content: center;
    }
    
    .content {
        background: white;
    }
}

flex는 grid 이전의 레이아웃 배치 전용 기능으로 고안되었습니다.
가로 방향으로 아이템들이 배치되고 높이는 컨테이너 크기로 자동 조정됩니다.
flex라는 display 속성을 더 자세히 알고 싶다면 Flexbox Froggy(https://flexboxfroggy.com/#ko)에 방문하여 학습하는 것도 좋은 방법입니다.

📚 TodoInsert 만들기

// TodoInsert.js

import React from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';
 
const TodoInsert = () => {
  return (
    <form className="TodoInsert">
      <input placeholder="할 일을 입력하세요" />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};
 
export default TodoInsert;

react-icons 라이브러리를 사용하였습니다.
https://react-icons.github.io/react-icons/#/icons/md 사이트에 들어가 사용하고 싶은 아이콘의 이름을 확인한 후 import 구문을 통해 사용할 수 있습니다.

import { 아이콘 이름 } from 'react-icons/md'

App.js에도 렌더링합니다.

// App.js

import TodoInsert from './components/TodoInsert';
import TodoTemplate from './components/TodoTemplate';
 
const App = () => {
  return(
    <TodoTemplate>
      <TodoInsert/>
    </TodoTemplate>
  )
};
 
export default App;

스타일링은 다음과 같습니다.

// TodoInsert.scss

.TodoInsert {
  display: flex;
  background: #495057;
  input {
    // 기본 스타일 초기화
    background: none;
    outline: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: white;
    &::placeholder {
      color: #dee2e6;
    }
    // 버튼을 제외한 영역을 모두 차지하기
    flex: 1;
  }
  button {
    // 기본 스타일 초기화
    background: none;
    outline: none;
    border: none;
    background: #868e96;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.1s background ease-in;
    &:hover {
      background: #adb5bd;
    }
  }
}

+ 버튼에 마우스를 올리면 버튼의 배경색상이 바뀌는 것을 확인할 수 있습니다.

📚 TodoListItem 과 TodoList 만들기

일정 관리 항목을 보일 TodoListItem과 TodoList 컴포넌트를 만들어 봅시다.


// TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import './TodoListItem.scss';

const TodoListItem = () => {
  return (
    <div className="TodoListItem">
      <div className="checkbox">
        <MdCheckBoxOutlineBlank />
        <div className="text">할 일</div>
      </div>
      <div className="remove">
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;

아직 사용하지 않은 아이콘인 MdCheckBox 아이콘 컴포넌트는 할 일이 완료되었을 때 체크된 상태를 보여줄 때 사용합니다.

// TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';

const TodoList = () => {
  return (
    <div className="TodoList">
      <TodoListItem />
      <TodoListItem />
      <TodoListItem />
    </div>
  );
};

export default TodoList;

이 컴포넌트에 TodoListItem을 불러와 별도의 props 전달 없이 내용을 보여줍니다.
이후에 기능을 추가하여 다양한 데이터를 전달할 예정입니다.

두 컴포넌트의 스타일링은 다음과 같습니다.

// TodoList.scss

.TodoList {
  min-height: 320px;
  max-height: 513px;
  overflow-y: auto;
}

// TodoListItem.scss

.TodoListItem {
  padding: 1rem;
  display: flex;
  align-items: center; // 세로 중앙 정렬
  &:nth-child(even) {
    background: #f8f9fa;
  }
  .checkbox {
    cursor: pointer;
    flex: 1; // 차지할 수 있는 영역 모두 차지
    display: flex;
    align-items: center; // 세로 중앙 정렬
    svg {
      // 아이콘
      font-size: 1.5rem;
    }
    .text {
      margin-left: 0.5rem;
      flex: 1; // 차지할 수 있는 영역 모두 차지
    }
    // 체크되었을 때 보여 줄 스타일
    &.checked {
      svg {
        color: #22b8cf;
      }
      .text {
        color: #adb5bd;
        text-decoration: line-through;
      }
    }
  }
.remove {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #ff6b6b;
    cursor: pointer;
    &:hover {
      color: #ff8787;
    }
  }


// 엘리먼트 사이사이에 테두리를 넣어 줌
  & + & {
    border-top: 1px solid #dee2e6;
  }
}

컴포넌트 스타일링을 마친 후에는 App.js에 만들어둔 컴포넌트를 모두 랜더링해봅시다.

// App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
 
const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList />
    </TodoTemplate>
  );
};
 
export default App;

📌 기능 구현하기

📚 App 에서 todos 상태 사용하기

// App.js

import React, { useState } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: 'DaraDaraV 구독하기',
      checked: true,
    },
    {
      id: 2,
      text: '티스토리 좋아요 누르기',
      checked: true,
    },
    {
      id: 3,
      text: '댓글 남기기',
      checked: false,
    },
  ]);

return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList todos={todos} />
    </TodoTemplate>
  );
};

export default App;

추가한 일정 항목에 대한 상태들은 App 컴포넌트에서 관리합니다. useState를 사용하여 todos라는 상태를 정의하고 TodoList의 props로 전달하겠습니다.
todos 배열 안에 들어있는 객체는 고유의 id, 내용, 완료 여부를 알려주는 값을 가집니다.
이 배열은 TodoList 에 props 로 전달됩니다.

// TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';
 
const TodoList = ({ todos }) => {
  return (
    <div className="TodoList">
      {todos.map(todo => (
        <TodoListItem todo={todo} key={todo.id} />
      ))}
    </div>
  );
};
 
export default TodoList;

props로 받아온 todos 배열은 map을 통해 TodoListItem 으로 이루어진 배열로 변환해 렌더링했습니다.
map 을 사용할 때는 key props를 전달해야하는데 여기서는 id 값을 사용했습니다.

TodoListItem 컴포넌트에서 받아온 todo 값에 따른 UI를 보여주도록 코드를 수정해봅시다.

// TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo }) => {
  const { text, checked } = todo;

return (
    <div className="TodoListItem">
      <div className={cn('checkbox', { checked })}>
        {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        <div className="text">{text}</div>
      </div>
      <div className="remove">
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;

📚 항목 추가 기능 구현하기

일정항목을 추가하기 위해서는 TodoInsert 컴포넌트에서 인풋 상태를 관리하고 App 컴포넌트에서는 todos 배열에 새로운 객체를 추가하는 함수를 만들어야합니다.

📃 TodoInsert value 상태 관리하기

// TodoInsert.js

import React, { useState, useCallback } from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = () => {
  const [value, setValue] = useState('');

const onChange = useCallback(e => {
    setValue(e.target.value);
  }, []);

return (
    <form className="TodoInsert">
      <input
        placeholder="할 일을 입력하세요"
        value={value}
        onChange={onChange}
      />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};

export default TodoInsert;

인풋에 입력하는 값을 관리할 수 있도록 useState를 사용하여 value라는 상태를 정의합니다
인풋에 넣어줄 onChange 함수도 작성하되, 함수를 재사용하도록 useCallback Hook을 사용합니다.

state가 잘 업데이트 되었는지를 확인하는 다른 방법은 리액트 개발자 도구를 사용하는 방법이 있습니다.

https://chrome.google.com/webstore/category/extensions

onChange 함수에서 console.log 함수를 찍어보는 방법을 이용하면 됩니다.
위의 주소에서 리액트 개발자 도구를 설치후 열면 개발자 도구 탭에 Component가 나타납니다.
TodoInsert를 선택하면 인풋을 수정했을 때 Hooks의 State 부분이 변경되는 것을 확인할 수 있습니다.

📃 todos 배열에 새 객체 추가하기

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
 ( ... )

  // 고윳값으로 사용될 id
  // ref를 사용하여 변수 담기
  const nextId = useRef(4);
 
  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1; // nextId 1씩 더하기
    },
    [todos],
  );

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} /> //추가
      <TodoList todos={todos} />
    </TodoTemplate>
  );
};

export default App;

App 컴포넌트에서 todos 배열에 새 객체를 추가하는 onInsert 함수입니다.
새로운 객체를 만들 때 마다 id 값에 1을 더해야하는데 useRef를 이용해 이를 관리합니다.
id 값은 렌더링되는 값이 아니기 때문에 useState가 아닌 useRef를 이용합니다.
또한 onInsert 함수는 컴포넌트 성능을 위해 useCallback 으로 감쌉니다.

📃 TodoInsert에서 onSubmit 이벤트 설정하기

import React, { useState, useCallback } from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = ({ onInsert }) => {
  const [value, setValue] = useState('');

const onChange = useCallback(e => {
    setValue(e.target.value);
  }, []);

const onSubmit = useCallback(
    e => {
      onInsert(value);
      setValue(''); // value 값 초기화
 
      // submit 이벤트는 브라우저에서 새로고침을 발생시킵니다.
      // 이를 방지하기 위해 이 함수를 호출합니다.
      e.preventDefault();
    },
    [onInsert, value],
  );

return (
    <form className="TodoInsert" onSubmit={onSubmit}>
      <input
        placeholder="할 일을 입력하세요"
        value={value}
        onChange={onChange}
      />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};

export default TodoInsert;

App에서 TodoInsert에 넣어둔 onInsert 함수에 현재 useState로 관리하는 value 값을 파라미터로 넣어 호풀합니다.
onSubmit 함수가 호출되면 props로 받아온 onInsert 함수에 현재 value 값을 파라미터로 넣어 호출하고, 현재 value 값을 초기화합니다.
onSubmit 이벤트는 또한 브라우저를 새로 고침하기에 e.preventDefault() 함수를 이용해 새로고침을 방지합니다.

📚 지우기 기능 구현하기

리액트 컴포넌트에서는 배열의 불변성을 지키면서 배열 원소를 지워야하는 경우, 배열의 내장함수 filter를 사용합니다.

📃 배열 내장 함수 filter

filter 함수는 기존의 배열을 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 추출하여 새로운 배열을 만듭니다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const biggerThanFive = array.filter(number => number > 5);
// result: [6, 7, 8, 9, 10]

함수의 파라미터로 조건문을 넣어둡니다.
파라미터로 넣는 함수는 ture 혹은 flase 값을 반환해야합니다.
true를 반환하는 원소만 새로운 배열에 포함됩니다.

📃 todos 배열에서 id로 항목 지우기

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  (…)
  const onRemove = useCallback(
    id => {
      setTodos(todos.filter(todo => todo.id !== id));
    },
    [todos],
  );
  
return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} />
    </TodoTemplate>
  );
};

export default App;

App 컴포넌트에 id를 파라미터로 받아와서 같은 id를 가진 항목을 todos 배열에서 지우는 함수 onRemove
TodoList의 props를 설정해야함

📃 TodoListItem에서 삭제 함수 호출하기

// TodoList.js

import React from ‘react‘;
import TodoListItem from ‘./TodoListItem‘;
import ‘./TodoList.scss‘;

const TodoList = ({ todos, onRemove }) => {
  return (
    <div className=“TodoList“>
      {todos.map(todo => (
        <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} />
      ))}
    </div>
  );
};

export default TodoList;

TodoListItem에서 onRemove 함수를 사용하기 위해 TodoList 컴포넌트를 거쳐야합니다.
props로 받아온 onRemove 함수를 TodoListItem에 전달하는 코드를 작성합시다.

// TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';
 
const TodoListItem = ({ todo, onRemove }) => {
  const { id, text, checked } = todo;
 
  return (
    <div className="TodoListItem">
      <div className={cn('checkbox', { checked })}>
        {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        <div className="text">{text}</div>
      </div>
      <div className="remove" onClick={() => onRemove(id)}>
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};
 
export default TodoListItem;

삭제 버튼을 누르면 TodoListeItem에서 onRemove 함수에 현재 자신이 가진 id를 넣어서 삭제 함수를 호출합니다.

📚 수정 기능

수정 기능은 삭제 기능과 비슷합니다.

onToggle이라는 함수를 App에 만들고 해당 함수를 TodoList 컴포넌트에 props로 넣어줍니다. 이 함수는 TodoList를 통해 TodoListItem에게 전달합니다.

📃 onToggle 구현하기

// App.js

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
 
const App = () => {
  (...)
 
  const onToggle = useCallback(
    id => {
      setTodos(
        todos.map(todo =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [todos],
  );
 
  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};
 
export default App;

배열 내장 함수인 map을 이용하여 특정 id 객체의 checked 값을 반전시킵니다.
불변성을 유지하면서 특정 배열 원소를 업데이트할 때는 map을 사용합니다.
map을 사용하여 만든 배열에서 변화가 필요한 원소만 업데이트 되고 나머지는 그대로 있습니다.

📃 TodoListItem 에서 토글 함수 호출하기

App에서 만든 onToggle 함수를 TodoListItem에서 호출하도록 TodoList를 거쳐 전달합시다.

// TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';

const TodoList = ({ todos, onRemove, onToggle }) => {
  return (
    <div className="TodoList">
      {todos.map(todo => (
        <TodoListItem 
          todo={todo} 
          key={todo.id} 
          onRemove={onRemove} 
          onToggle={onToggle}
        />
      ))}
    </div>
  );
};
 
export default TodoList;

// TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo, onRemove, onToggle }) => {
  const { id, text, checked } = todo;

return (
    <div className="TodoListItem">
      <div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
        {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        <div className="text">{text}</div>
      </div>
      <div className="remove" onClick={() => onRemove(id)}>
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;

📌 QUIZ

react에서 아이콘을 컴포넌트처럼 사용할 수 있도록 하는 라이브러리의 이름은 (____) 입니다.
(____) 는 코드를 작성할 때 코드 스타일을 깔끔하게 정리하는데 사용합니다.
(____) 라는 display 속성은 배치에 사용됩니다.
map 을 사용하여 컴포넌트로 변환할 때는 (____) 를 전달해야하기에 실습에서는 id 값을 넣어주었습니다.
(____) 는 브라우저에 나온 리액트 컴포넌트를 심층 분석할 수 있도록 리액트 개발 팀이 만든 도구 입니다.
리액트 배열에서 특정 조건만을 만족하는 원소만을 추출하기 위한 함수는 (____) 입니다.
(____) 함수를 이용하면 배열의 특정 원소만 업데이트하여 사용할 수 있습니다.
react-icons의 아이콘 "MdAdd" 를 사용하기 위한 코드를 작성해보세요
우리가 진행한 실습에서는 TodoInsert에서 onSubmit 이벤트 설정하였습니다. onClick 이벤트로 우리가 했던 이벤트 처리를 하는 코드를 작성해보세요.

react-icons
Prettier
flex
key props
리액트 개발자 도구
filter
map

import { MdAdd } from 'react-icons/md'

const onClick = useCallback(
  () => {
    onInsert(value);
    setValue(“); // value 값 초기화
  },
  [onInsert, value],
);

return (
  <form className=“TodoInsert“>
      <input
      placeholder=“할 일을 입력하세요“
      value={value}
      onChange={onChange}
      />
      <button onClick={onClick}>
        <MdAdd />
      </button>
    </form>
);

저작자표시

'프레임워크 > REACT' 카테고리의 다른 글

[React] 13. 리액트 라우터로 SPA 개발하기 (0)	2023.01.04
[React] 11. 컴포넌트 성능 최적화 (0)	2022.12.25
[React] 9장. 컴포넌트 스타일링 (0)	2022.12.17
[React] 8장. Hooks (0)	2022.12.12
[React] 07. 컴포넌트의 라이프사이클 메서드 (0)	2022.11.14