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

1. 프로젝트 준비

• 1-1) 프로젝트 생성

• 1-2) 필요한 라이브러리 설치

// node-sass설치 => Sass를 css로 변환해주는 라이브러리
npm install node-sass

// sass의 새 버전에서 필요할 수 있는 의존성 추가 라이브러리
// SCSS 파일을 처리할 때 Vite와 같은 빌드 도구에서 사용
npm install -D sass-embedded

 // className을 조건부로 사용하고 싶을 때 편한 라이브러리
npm install classnames

 // React-icons 라이브러리
npm install react-icons --save

• 1-3) Prettier 설정
  프로젝트의 최상위 디렉터리에 .prettierrc 파일 생성

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

• 1-4) 기존 index.css 수정

• 1-5) App 컴포넌트 초기화

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

---

2. UI 구성하기

components라는 디렉터리를 생성해 그 안에 저장하자!
컴포넌트 파일을 components 디렉터리에 넣는 이유?
👉 기능이나 구조상 필요하기보다는 자주 사용되는 관습이기 때문.

✅ 앞으로 만들 컴포넌트들

✔ TodoTemplate
화면 가운데 정렬, 앱 타이틀(일정 관리)을 보여주고 children으로 내부 JSX를 props로 받아 와서 렌더링해 줌.

✔ TodoInsert
새로운 항목을 입력하고 추가, state를 통해 인풋의 상태를 관리함.

✔ TodoListItem
각 할 일 항목에 대한 정보를 보여줌. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여줌.

✔ TodoList
todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해 여러 개의 TodoListItem 컴포넌트로 변환해 보여줌.

2-1.1) TodoTemplate 만들기

// App.jsx
import React from 'react';
import TodoTemplate from './components/TodoTemplate';

const App = () => {
  return <TodoTemplate>Todo App을 만들자!</TodoTemplate>;
};

export default App;

// TodoTemplate.jsx
import React from 'react';
import './TodoTemplate.scss';

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

export default TodoTemplate;

(+) 닫혀 있는 파일에도 자동 완성 제대로 작동시키기

📍 Ctrl+Space
VS Code 에디터의 자동 완성 단축키

프로젝트 최상위 디렉터리에 jsconfig.json 파일 생성 → Ctrl+Space → 자동 완성 박스 + Enter

jsconfig.json 파일을 저장하고 나면, 불러오려는 컴포넌트 파일이 열려 있지 않아도 자동 완성을 통해 컴포넌트를 불러와서 사용할 수 있음!

2-1.2) TodoTemplate 스타일 작성

👉 CSS 놔두고 왜 SCSS를 사용하는 이유는?

👉 지금 작성된 코드 중에서 justify-content와 align-items 요소에 대해 더 알아보자!

• TodoTemplate.scss

// rem => 루트 글꼴 크기에 비례해 상대적으로 바뀌는 단위 (대부분 1rem = 16px)

.TodoTemplate {
    width: 512px;
    // width가 주어진 상태에서 좌우 중앙 정렬
    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;
    }
}