[React] 투두리스트 컴포넌트 구조&코드 분석

 

📖리액트를 다루는 기술을 통해 공부한 내용을 바탕으로 작성한 포스트입니다.📖

오늘은 그동안 배웠던 컴포넌트들을 중심으로 할 일을 작성하고 기록하는 투두리스트를 만들어보았다.

처음으로 컴포넌트를 사용해서 완성된 한 페이지를 만들어보는 거라 예제를 따라하면서도 컴포넌트간의 구조와 세세하게 쓰이는 속성들에 관해 더 자세하게 알고 싶었다.

그리고, 코드를 작성하는데 있어 궁금한 부분들이 많이 있어서 정리해보았다.

 

---

 

일단 정리한 부분은 

• 투두리스트의 컴포넌트 구조

• import cn from {classnames};

---

 

리액트로 만든 투두리스트 코드

원래는 코드를 다 따로 올리려고 했지만, 만든 파일도 많고 하다보니 가독성이 떨어질 것 같다는 판단하에 깃헙을 올리는 게 더 나을 것 같다.

github.com/MinJoo-Park01/React-Study/tree/master/todo-app/src

MinJoo-Park01/React-Study

투두리스트를 만들어놓은 파일이니 참고하면서 보실 분들은 들어가서 확인해보시는 것도 괜찮을 것 같다 =)

이는 벨로퍼트님의 리액트를 다루는 기술 이라는 책에서 나와있는 예제인데 이를 바탕으로 내 나름대로 새로운 투두리스트를 만들 예정이다.

 

투두리스트의 컴포넌트 구조

리액트를 지금까지 공부한 내용들을 바탕으로 간단한 예제인 투두리스트를 만들어보았다.

state에 의해 움직이고 이 투두리스트에서는 어떤 컴포넌트가 어떤 역할을 하고, 어떤 함수들을 가지는지 또, 어떤 값들을 props로 가져서 동작이 되고 있는지 한 눈에 보기 위해서 아래 사진과 같이 이 투두리스트의 구조를 그려보았다.

 

 

이 예제는 App 에서 todos 상태와, onToggle, onRemove, onCreate 함수를 지니고 있게 하고, 해당 값들을 props 를 사용해서 자식 컴포넌트들에게 전달해주는 방식으로 구현되고 있다.

이 프로젝트는 작은 프로젝트이기 때문에 이렇게 하나하나 구현해도 큰 문제가 발생하지 않는다.

하지만, 프로젝트의 규모가 커지게 된다면 App에서 모든 상태관리를 하기엔 코드가 복잡해질 수 있고, 가독성이 떨어지기도 하며, props를 전달해줘야 하는 컴포넌트가 너무 깊이 있어 오랜시간이 걸릴 수도 있다.

 

✋🏻이런 문제점을 해결하기 위해선 Context API를 사용하면 된다고 한다.

Context API를 사용해서 구현하는 방법은 다음에 따로 만들어서 정리해서 올려야겠다!!

 

---

 

🤔import cn from {classnames}; 이 뭐지?

이번 투두리스트 예제를 작성하다가 import cn from {classnames}; 라는 코드가 사용되는 걸 발견하였다.

이게 뭔가 싶기도 하고, 예제가 하라는 대로 이 코드를 작성하고 실행시키면 오류가 뜨는 걸 발견할 수 있었다.

투두리스트 코드를 작성하다보면, map함수에서 쓰이는 key 값은 각 항목마다 가지고 있는 고윳값인 id를 넣어주어야한다.

또, todo데이터는 통째로 props로 전달해야한다.

=> 이렇게 여러 종류의 값을 전달해야 하는 경우에 classnames를 사용해서 객체로 통째로 전달하는 편이 나중에 성능 최적화를 할 때 편리하다.

 

하지만, 이렇게 읽고나니 이해가 되는듯~ 안되는듯~해서 검색을 하다 아래 깃헙을 보게 되었다.

 

JedWatson/classnames

이 깃헙을 읽고나니, classnames은 리액트 라이브러리 중 하나로, 위에서 객체를 통째로 전달하는 것처럼 조건부로 classNames를 결합할 수 있는 자바스크립트의 유틸리티라고 한다.

그냥 import cn from {classnames}; 이 코드를 작성하면, 실행시켰을 때 위에서 말한 것처럼 당연히 오류가 발생한다.

 

//classname 사용방법

//npm
npm install classnames

//yarn
yarn add classnames

터미널에서 위와 같은 명령어를 실행시켜야지 classnames 유틸리티를 사용할 수 있다.

 

나는 이를 토대로 투두리스트에 작성된 classnames를 사용한 코드를 한 번 뜯어보겠다!

👇🏻TodoListItem.js

import React from 'react';
import { MdCheckBoxOutlineBlank, MdCheckBox, MdRemoveCircleOutline } from 'react-icons/md';
import './TodoListItem.css';
import cn from 'classnames'; //classnames사용 명시
import './TodoListItem.css';

const TodoListItem = ({ todo, onRemove, onToggle }) => {
    const { id, text, checked } = todo;
    return (
        <div className="TodoListItem">
            <div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
                {/* 윗 부분에서 classnames 사용 */}
                {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
                <div className="text">{text}</div>
            </div>
            <div className="remove" onClick={() => onRemove(id)}>
                <MdRemoveCircleOutline />
            </div>
        </div>
    )
}

export default React.memo(TodoListItem);

 

위에 올려놓은 코드에서 <div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}> 이 부분이 cn으로 classnames가 사용되었다.

className에 true에 해당하는 값은 추가로 표시가 가능하고, false가 된다면 className에 적용되지 않는다.

이 코드는 checkbox 를 checked에서 나온 true 혹은 false의 값을 갖도록 하나로 묶어준 후, 하나의 묶음으로 조건부 스타일링을 할 수 있도록 도와주는 것이다.

따라서, 이 부분이 체크표시가 됐다면 checkbox checked라고 표시가 가능한 것이고, checked가 false라면 checked가 적용이 되지 않아서 checkbox만 className에 적용될 것이다.