🌏 기능 구현 준비
- 컴포넌트 별로 어떤 기능을 구현해야 하는지 살펴보기
- 기초 데이터 설정하기
- 데이터 모델링 하기
- 목 데이터 설정하기
1. 컴포넌트 별 기능 살피기
UI 완료하고 컴포넌트 기능을 구현한다. 컴포넌트별로 어떤 기능을 구현해야 하는지 살펴본다.
- App 컴포넌트: 할 일 데이터 관리
- Header 컴포넌트: 오늘의 날짜 표시
- TodoEditor 컴포넌트: 새로운 할 일 아이템 생성
- TodoList 컴포넌트: 검색에 따라 필터링된 할 일 아이템 렌더링
- TodoItem 컴포넌트: 할 일 아이템의 수정 및 삭제
✅ CRUD
구현할 컴포넌트의 기능을 잘 살펴보면, 주로 데이터를 추가(생성)하고, 조회하고, 수정하고, 삭제하는 기능으로 이루어져 있다. 데이터를 다루는 4개의 기능, 즉 추가(Create), 조회(Read), 수정(Update), 삭제(Delete) 기능을 앞 글자만 따서 CRUD라고 한다. CRUD는 데이터 처리의 기본 기능으로, 웹 서비스라면 기본적으로 갖추고 있어야 한다.
2. 기초 데이터 설정하기
// useState 불러오기
import { useState } from 'react';// useState를 이용해 할 일 아이템의 상태를 관리할 State를 만든다.
// 함수 useState에서 인수로 빈 배열을 전달해 State 변수 todo의 가본값을 빈 배열로 초기화한다.
const [todos, setTodos] = useState([]);
- CRUD의 대상인 할 일 아이템부터 생성해야 한다.
- 리액트에서는 보통 리스트 형태의 데이터를 보관할 때 배열을 이용한다.
- State 변수 todos는 [할 일 관리] 앱에서 데이터를 저장하는 배열이면서 동시에 일종의 데이터베이스 역할을 수행
- 예를 들어 사용자가 새 할 일 아이템을 만들면, 빈 배열이었던 todos 값은 아이템이 추가된 배열로 업데이트된다.
3. 데이터 모델링 하기
자바스크립트에서는 보통 현실의 사물이나 개념을 표현할 때 객체를 사용한다. 현실 사물은 일반적으로 여러 속성을 동시에 가지고 있기 때문이다.
💡 예를 들면 나를 객체로 표현한다면?
let person = { name: "이지은", gender: "female"}
이렇게 현상을 사물이나 개념을 프로그래밍 언어의 객체와 같은 자료구조로 표현하는 행위를 '데이터 모델링'이라고 한다.
📌 그렇다면 데이터 모델링은 왜 하는 걸까? 이유는 현실 세계의 사물이나 개념을 프로그래밍 언어로 표현하고 다뤄야 하기 때문이다.
앞으로 만들 [할 일 관리] 앱에서 알 일 아이템에는 일의 완료 여부, 일의 종류, 생성 날짜 등 정보가 담겨 있다. 요소를 각각 별도의 이름으로 구분한다. 또한 할 일 아이템에는 페이지에 렌더링하지는 않지만, id라는 고유 식별자가 있다. 모든 아이템에는 해당 아이템을 구별하기 위한 고유한 식별자가 필요하기 때문이다. 고유 식별자가 없으면 특정 아이템을 삭제하거나 수정하는 등의 연산이 불가능하다.
📌 데이터 모델링을 하는 이유는 데이터를 어떻게 관리할지 생각하기 위함이다. 모델링 과정이 잘못되면 작업 과정에서 큰 문제가 생길 수 있다. 문제가 발생하면 데이터를 관리하는 모든 과정을 수정하게 되는데, 아예 프로젝트를 처음부터 다시 시작하는 상황도 발생한다. 특히 여러 팀원과 협업하는 프로젝트라면 문제가 심각해진다. 따라서 모델링은 반드시 데이터 관리 프로그램을 구현하기 전에 노트나 메모장 등에 적어 보면서 코드를 작성해야 한다. 많은 시간을 들여서라도 데이터 모델링의 완성도를 높이는 게 프로젝트의 시간이나 비용을 줄이는 데 큰 도움이 된다.
💡 모델링을 토대로 할 일 아이템을 자바스크립트 객체로 만들면?
{
id: 0,
isDone: false,
content: "React 공부",
date: new Date().getTime(),
}
- id : 특정 아이템을 식별하는 고유한 값
- isDone : 불리언 자료형으로 현재 상황에서 할 일이 완료되었는지 여뷰를 확인할 때 이용
- content : 할 일이 무엇인지 알려주는 문자열
- createDate : 할 일의 생성 시간. new Date()로 Date 객체를 만들고 getTime 메서드를 이용해 이 객체를 타임 스탬프값으로 변환한다. 타임 스탬프 값으로 시간을 저장하면 보관할 데이터의 양이 대폭 줄어든다.
4. 목 데이터 설정하기
목(Mock) 데이터란 모조품 데이터라는 뜻이다. 기능을 완벽히 구현하지 않은 상태에서 테스트를 목적으로 사용하는 데이터다. 임시 데이터라 표현하기도 한다. 기능을 아직 개발하지 않아 데이터가 없는 상황일 때 목 데이터를 사용한다. 임시 데이터 역할을 하는 목 데이터가 있으면, 데이터 관리 기능 개발이 한결 수월해진다.
[컴포넌트 외부에 Mock 데이터 만들기]
// 3개의 객체를 저장하는 배열 목 데이터를 만든다.
// 배열에 저장된 객체는 각각 다른 할 일 아이템
const mockData = [
{
id: 0,
isDone: false,
content: "콩두부 산책하기",
date: new Date().getTime(),
},
{
id: 1,
isDone: false,
content: "명상하기",
date: new Date().getTime(),
},
{
id: 2,
isDone: false,
content: "코딩하기",
date: new Date().getTime(),
},
];
[state 변수 todos의 기본값으로 목 데이터 전달]
const [todos, setTodos] = useState(mockData);
📕출처: 한 입 크기로 잘라 먹는 리액트_이정환