1. 프로젝트 준비하기
강의로 들으시려면 (인프런)한 입 크기로 잘라먹는 리액트 10% 쿠폰 받기 (기간 한정)

📄

Table Of Contents

요구사항 분석하기 리액트 앱 만들기

프로젝트 구현에 앞서 구현에 필요한 준비 작업을 진행합니다. 프로젝트 1을 준비할 때처럼 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현하겠습니다.

요구사항 분석하기

다음 그림은 이번 장에서 만들 [할 일 관리] 앱을 최종적으로 구현한 모습입니다.

최종 구현 페이지에서 보듯이 [할 일 관리] 앱에 는 다음과 같은 기능이 있습니다.

오늘의 날짜를 요일, 월, 일, 연도순으로 표시 합니다.

할 일(Todo)을 작성하는 입력 폼이 있고, <추 가> 버튼을 클릭하면 할 일 아이템을 생성합니다.

[할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있습니다.

리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 <삭제> 버튼으로 이루어져 있습니다.

요구사항 분석에 맞게 페이지의 각 UI 요소를 역할에 따라 구분할 수 있도록 컴포넌트 단위로 나누겠습니다. 컴포넌트를 적절히 분할하는 일은 개인적으로 많은 연습이 필요한데, UI 요소를 컴포넌트 단위로 생각하는 게 중요합니다. 이 책의 분할결과를 보기 전에 여러분도 요구사항을 생각하면서 UI 요소를 컴포넌트로 나눠보길 바랍니다. 공책 등에 직접 그려보는 걸 추천합니다.

다음 그림은 [할 일 관리] 앱의 UI 요소를 컴포넌트로 구분한 그림입니다.

[할 일 관리] 앱의 UI 요소를 컴포넌트 단위로 나누면 다음과 같습니다.

Header: 오늘의 날짜를 표시 형식에 맞게 보여 줍니다.

TodoEditor: 새로운 할 일 아이템을 등록합니다.

TodoList: 검색어에 맞게 필터링된 할 일 리스트를 렌더링합니다(만약 검색 폼이 공백이면 필터링하지 않습니다).

TodoItem: 낱낱의 할 일 아이템에는 기본 정보 외에도 체크박스와 <삭제> 버튼이 있습니다. 체크박스를 클릭하면 할 일을 마쳤는지 여부가 토글되고, <삭제> 버튼을 클릭하면 해당 아이템을 삭제합니다.

✋🏼

토글은 디지털 신호가 1 또는 0을 되풀이하는 상태라는 뜻으로, 이 앱에서는 체크 표시 여부에 따라 할 일을 마쳤는지 아닌지를 확인할 때 사용합니다.

리액트 앱 만들기

프로젝트 2를 위한 새 리액트 앱을 생성하고 불필요한 파일과 코드는 삭제합니다. 이것은 프로젝트 1의 준비 과정과 동일합니다.

문서(Documents) 아래에 새로운 폴더 ‘project2’를 만듭니다.

비주얼 스튜디오 코드에서 project2 폴더를 불러온 다음, 터미널을 열고 npx create-react-app . 명령을 입력해 리액트 앱을 생성합니다.

앱을 생성했다면 다음 4개의 불필요한 파일은 삭제합니다.

src/App.test.js

src/logo.svg

src/reportWebVitals.js

setupTest.js

계속해서 App.js와 index.js에 작성된 불필요한 코드를 삭제합니다. 자세한 수정 사항은 프로젝트 1의 준비하기를 참고합니다.

불 필요한 코드를 삭제했다면 두 파일의 최종 코드는 다음과 같습니다.

코드를 불러오는 중 입니다 ...코드를 불러오는 중 입니다 ...

터미널에서 npm run start를 입력해 리액트 앱을 시작합니다. 그러면 아무것도 없는 빈 페이지가 나옵니다.

PREV0. 장 소개

NEXT2. UI 구현하기