[REACT] 리액트로 TODO 리스트 구현하기 :: (1) UI 구성하기

서론

요즘 리액트를 다루는 기술이라는 책으로 코딩을 시작하고 처음으로! 리액트를 접하고 있습니다. 요즘 트렌드가 기존의 MVC구조에서 SPA위주로 추세가 전환되고 있다는 소식이 자주 들려옵니다. 때문에  Vue.js 나 React에 대한 관심이 많았는데 마침 스프링 부트 프로젝트도 끝났겠다, 이번 기회에 한번 도전해보고 싶은 생각이 들어 맘이 맞는 친구와 함께 스터디를 진행하고 있습니다.

 

공부과정은 깃헙에 상시 올라가고 있습니다. 😇

 

본 포스팅 시리즈는 이 책의 10장에 해당하는 '일정 관리 웹 어플리케이션 만들기'를 따라하면서 정리합니다.

 

프로젝트 빌드하기

프로젝트를 시작하기에 앞서 node.js와 npm, yarn이 설치되어 있어야 합니다. 설치방법은 여기에서 다루지 않습니다. 

설치가 되어 있으면 이제 터미널이나 CMD로 들어가서 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.

 

1. 프로젝트 생성

yarn create react-app todo-app

 

2. 라이브러리 설치

yarn add node-sass classnames react-icons

node-sass, classnames, react-icons 세 가지의 라이브러리를 설치하고 있습니다. 차례대로 알아봅시다.

 

2-1. node-sass

React, 혹은 다양한 Framework로 프로젝트를 진행하다보면 Front-End개발자는 css작업을 하게 됩니다. css는 추가적인 플러그인을 설치할 필요 없이 사용할 수 있고, 사용 환경에 영향을 받지 않기 때문에 많은 사람이 css을 사용합니다. 하지만 프로젝트가 복잡해지다보면 이 css파일이 같은 내용이 많아지고, 그 양이 방대해지게 됩니다. 이를 해결하기 위해 등장한 것이 css 전처리기(css Preprocessor) 입니다. css 전처리기는 이름 그대로 css가 동작하기 전 동작하는 예비 처리기로서 node-sass는 리액트에서 css 전처리도구인 sass파일을 읽을 수 있게 해주는 라이브러리입니다.

 

2-1. classnames

html에서는 태그에 class를 붙이고 ' . '을 이용해서 css를 적용하지만 React에서는 class가 예약어라 사용이 불가능합니다. 자바스크립트에서 class란 예약어가 사용되고 있기 때문입니다. 그래서 className을 이용해서 css를 적용합니다.

classNames는 React 라이브러리중 하나로, className을 적용할 때 다양한 옵션을 붙여서 className을 적용할 수 있습니다. className에 true에 해당하는 값은 추가로 표시 가능하고, false인 값은 className에 적용되지 않습니다.

 

* 기본형태

<div className={classNames()} />

 

* 사용법

classNames('test')			// 'test'

classNames('test', 'box')		// 'test box'

classNames('test', {box: false})	// 'test'

classNames('test', {box: true})		// 'test box'

classNames({test: true, box: true})	// 'test box'

classNames(['test', 'box'])		// 'test box'

classNames(null, false, undefined, 0, '')	// ''

 

2-3. react-icons

react-icons 는 https://react-icons.github.io/react-icons/에 있는 리액트 전용 아이콘을 사용하게 해주는 라이브러리 입니다.

들어가보면 각각의 아이콘에 이름이 붙어있는데, 이것을

import { '아이콘 이른' } from 'react-icons/..' // ..는 무슨 아이콘을 사용하느냐에 따라 달라짐

형태로 컴포넌트에 import 할 수 있습니다.

 

3. UI 구상하기

컴포넌트는 용도별로 다음 네 가지를 사용합니다. 

 

1. TodoTemplate: 화면을 가운데 정렬시켜 주는 역할

2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있게 해주는 컴포넌트

3. TodoListItem: 각 할 일 항목에 대한 정보를 보여주는 컴포넌트

4. TodoList: todos라는 배열을 props로 받아온 후, 이를 배열 내장 함수 map을 사용하여 TodoListItem 컴포넌트로 변환하여 보여주는 컴포넌트

 

 

App.js

최종 컴포넌트 배치는 TodoTemplate으로 나머지 컴포넌트들을 감싸주고,  TodoInsert와 TodoList 컴포넌트를 children으로 주입한다.

 

TodoTemplate.js

 

TodoTemplate.scss

 

결과

TodoTemplate은 전체 div의 전체적인 위치를 잡아주는 역할 + App.js에서 children으로 들어오는 Component들을 내부 div에 배치시켜주는 역할을 합니다. 예제에서는 div.content에 {children} 으로 컴포넌트를 받고 있습니다.

 

TodoInsert.js

 

TodoInsert.scss

TodoInsert는 할 일을 추가하는 컴포넌트로 TodoTemplate의 child로 들어가 함께 동작합니다. 여기에서 Sass에서만 보이는 문법요소가 보이는데.. 바로 '&' 입니다. 

 

Sass 공식 독스를 보면 & 에 대한 설명이 있습니다.

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

의역 : 부모 선택자 &는 Sass 만의 특별한 선택자로, 내부 선택자에서 외부 선택자를 참조할 때 쓰입니다. 가상 함수를 추가하거나 부모 선택자 상위의 선택자를 추가하는 등의 복잡한 연산에서 외부 선택자를 재사용 할 때 사용됩니다.

 

그냥 부모 선택자를 가리키는 것이라 이해하면 됩니다. 

 

* Scss

a {
  color: black;
  &:hover {
    text-decoration: underline;
    color: gray;
  }
  &:visited {
    color: purple;
  }
}

* Css

a {
  color: black;
}
a:hover {
  text-decoration: underline;
  color: gray;
}
a:visited {
  color: purple;
}

 

TodoListItem.js   

TodoListItem은 할 일 각각의 것들에 대한 컴포넌트입니다. 나중에 todos라는 객체배열이 오면 배열 각각의 값들을 꺼내서 위 포맷에 넣어주면 됩니다.

 

TodoListItem.scss

 

TodoList.js

TodoList는 상위 컴포넌트인 TodoTemplates으로부터 데이터를 받아 ListItem으로 변환하여 전송하는 역할을 합니다.

 

TodoList.scss

 

결과

 

 

이렇게 UI 구성이 끝났습니다.

 

다음 포스팅에서는 할 일 추가, 수정, 삭제 기능을 넣어보도록 하겠습니다.