React Project 책으로 삽질하기 1(나를위한 기록)
프로젝트 생성하기
- 언제나 그렇듯 프로젝트를 먼저 생성합니다.
create-react-app book_copy-todo-app프로젝트 생성이 끝나면 가장 먼저 git repository와 연결해준다. git을 쓰는 가장 큰 이유중 하나는 형상관리 겸 개인적으로 commit 메시지를 확인하기 위해서입니다.
그 후 추가 라이브러리를 설치해줍니다. 책에선 아이콘을 사용할 수 있다니깐… 일단 사용합니다. 전 Sass를 잘 못쓰기때문에 css.module를 이용하여 진행하겠습니다.
npm install react-icon
index.css 수정하기
다음으로는 가장 기본적인 index.css를 수정합니다. 기존에 작성되 있는 코드를 지운 후 새로 css를 작성합니다.
상세한 노멀라이즈는 진행하지 않고 body에 대해서만 위의 사진처럼 margin과 padding을 0으로 지정합니다.
App.js 컴포넌트 수정하기
다음번에는 App 컴포넌트를 열어서 기존에 작성되있던 코드들을 삭제해줍니다.
그 후 위의 사진과 같이 코드를 작성해줍니다. 코드를 작성 한 후 터미널에서 ‘npm start’ 를 입력하여 프로젝트를 구동시켜봅니다.
정상적으로 작동한다면 아래와 같은 화면이 출력됩니다.
기본적인 컴포넌트 생성하기
책에선 4개의 컴포넌트를 사용해서 일정관리앱을 만든다고 나와있다. 책을 믿고 그대로 진행해보자! 먼저 src 폴더 안해 하위폴더인 components 폴더를 생성해준다. 그 후 해당 폴더안에 4개의 컴포넌트를 생성해준다.
TodoTemplate.js
TodoInsert.js
TodoListItem.js
TodoList.js
일단 컴포넌트들을 먼저 다 생성해놓은 후 각각에 해당하는 컴포넌트들의 코드를 작성한다.
TodoTemplate.js 코드 작성하기
먼저 일정관리 앱의 타이틀을 담당하는 TodoTempalte 에 코드를 작성하겠습니다.
import React from "react";
import './Todo.css';
const TodoTemplate = ({ children }) =>{
return (
<div className="TodoTemplate">
<div className="app_title">일정관리</div>
<div className="content">{children}</div>
</div>
);
};
export default TodoTemplate;
css의 경우 각각의 컴포넌트의 최상위 클래스명을 다르게 해서 진행 할 예정이므로 일반적인 css로 작성했습니다. 해당 컴포넌트에 코드를 작성한 후 바로 css 를 작성합니다.
* {font-size:62.5%;}
.TodoTemplate {width:51.2rem; margin:6rem auto auto auto; border-radius: 0.4rem; overflow:hidden;}
.TodoTemplate .app_title {display:flex; align-items:center; justify-content:center; background:#22b8cf; color:#ffffff; height:4rem; font-size:3.5rem; padding:1rem 0;}
.TodoTemplate .content {background: #ffffff; font-size:2rem;}
.TodoTemplate .content * {font-size:1.6rem;}
css 까지 작업이 끝나면 브라우저에서 정상적으로 적용이 됬는지 확인합니다.
코드를 똑같이 따라했다면 위의 사진과 같은 결과가 랜더링됩니다. 일단은 책을보고 따라하는 기준이기때문에 큰 디자인은 책에 나와있는 기준으로 작성하겠습니다.
TodoInsert.js 코드 작성하기
다음으로 작성할 컴포넌트는 일정을 등록하는 컴포넌트인 TodoInsert 입니다. 작성할 코드는 아래와 같습니다.
import React from "react";
import { IoAdd } from 'react-icons/io5';
const TodoInsert = () => {
return(
<form className="TodoInsert">
<input placeholder="할 일을 입력하세요"/>
<button type="submit">
<IoAdd />
</button>
</form>
);
};
export default TodoInsert;
TodoInsert 컴포넌트에서 초반에 설치한 react-icon을 드디어 사용합니다. import { IoAdd } from 'react-icons/io5'; 이 코드가 react-icon 라이브러리를 불러와 import 시켜주는 코드입니다.
icon 사용법은 xe-icon이나 폰트어썸과 비슷하게 사용하고싶은 아이콘 name을 import {아이콘이름} from 'react-icons/io5'; 으로 선언한 후 해당컴포넌트에서 랜더링을 해주면 됩니다.
코드작성이 끝나면 App.js에 TodoInsert.js 를 불러와서 App.js를 랜더링 해봅니다.
랜더링이 정상적으로 진행되면 위와같은 컴포넌트가 랜더링됩니다.
Comments