5/6 TIL

오늘은 1번째 팀별 과제 TodoList 만들기에서 각자 맡은 추가 기능을 구현하였다.
나의 역할은

1. 카테고리 별 리스트 나오기
2. 카테고리 전체보기

두 가지 였다. 결국은 카테고리를 눌렀을때 해당 카테고리에 맞는 리스트들이 분류되서 보여지는 것이다.

일단 우리 프로젝트의 폴더 구조를 살펴보면

이렇게 되어있다.

일단 팀에서 중간 머지 한 부분을 풀 땡겨와서 작업을 시작했다.

Category 가

const CATEGORY = ['work', 'exercise', 'study']
export default function TodoCategory() {
  return (
    <section>
      <h3>category</h3>
      <ul className={styles.categoryInner}>
        {CATEGORY.map((cate) => {
          return <li key={`category-${cate}`}>{cate}</li>
        })}
      </ul>
    </section>
  )
}

이렇게 단순하게 되어있다.
그런데 우리가 더미 데이터 구조를

  {
    id: 1651747060687,
    text: '방청소하기',
    date: '2022-05-05',
    category: 'red',
    done: false,
    isLike: true,
  },
  {
    id: 1651747060688,
    text: 'Typescript 강의 듣기',
    date: '2022-05-05',
    category: 'orange',
    done: true,
    isLike: false,
  },
  {
    id: 1651747060689,
    text: '경주 여행 계획 세우기',
    date: '2022-05-07',
    category: 'yellow',
    done: false,
    isLike: true,
  },

이런식으로 만들기로 했었고 category 종류 (color)에 따라 분리 되어야 하니

현재 TodoCategory 컴포넌트에 있는
CATEGORY 배열부터 수정을 시작했다.

const CATEGORY = [
  {
    'title' : 'work',
    'category' : 'red'
  },
  {
    'title' : 'exercise',
    'category' : 'orange'
  },
  {
    'title' : 'study',
    'category' : 'yellow'
  },
  {
    'title' : 'clean',
    'category' : 'green'
  },
]

이렇게 수정해 놓고

      <ul className={styles.categoryInner}>
        {CATEGORY.map(({title, category}) => {
          return (
            <li key={title}>
              <button 
                type="button" 
                onClick={handleCategory} 
                value={category}>
                {title}
              </button>
            </li>
          )
        })}
      </ul>

위와 같이 수정해 놓으면
카테고리 요소 마다 value 로 category 값을 가지고 있기 때문에 클릭했을때 그 요소의 카테고리가 무엇인지 가져오고 가져온 것만 보이게 메서드로 만들면 되기 때문이다.

onClick 했을때 호출되는 메서드인 handleCategory 는
최상위 컴포넌트인 TodoApp 으로 보내어 props로 내려받았다.

최상위 태그인 TodoApp 컴포넌트에

  const [todos, setTodos] = useState([...INITIAL_TODO])

todos state 가 있어서 이것이 화면에 뿌려지는 것이였다.

나는 이 todos state 를 컨트롤 하면 되는데

처음에는 카테고리에 해당하는 Todoitem 들을 setTodos를 이용해서 filter 로 거르면 된다고 생각했는데 처음 클릭에는 잘 작동하는데 그 다음 클릭에는 작동을 안했다.

그도 그럴만한것이 이미 특정 카테고리로 분리되어 todos에 담겼는데, 다른 카테고리를 클릭했을때 업데이트된 todos에는 당연히 없는 것이다.

기존의 todos를 유지해야했고, delete 기능처럼 아이템들이 사라질 수 있는 filter 메서들를 사용하면 안됐다.

그래서 내가 고안한 방법은
더미데이터로 만든것에 invisible 이라는 상태값을 하나더 추가한것이다.

{
    id: 1651747060687,
    text: '방청소하기',
    date: '2022-05-05',
    category: 'red',
    done: false,
    isLike: true,
    invisible: false,
  },
  {
    id: 1651747060688,
    text: 'Typescript 강의 듣기',
    date: '2022-05-05',
    category: 'orange',
    done: true,
    isLike: false,
    invisible: false,
  },
  {
    id: 1651747060689,
    text: '경주 여행 계획 세우기',
    date: '2022-05-07',
    category: 'yellow',
    done: false,
    isLike: true,
    invisible: false,
  },

일단은 다 false로 셋팅해 두어 전체가 보이도록 하고 카테고리를 클릭했을때 해당 카테고리는 그대로 보이고 아닌것들만 true로 바꾸어 안보이게 만드는 것이다.

그렇게 만든 메서드 handleCategory는 아래와 같다.

  const handleCategory = ({currentTarget}) => {
    const category = currentTarget.value
    if(category){
         setTodos((todos) => todos.map(
           (todo) => (todo.category === category ? 
           { ...todo, invisible: false } : 
           { ...todo, invisible: true } )
         )
       )
    }else{
      setTodos((todos) => todos.map((todo) =>  ({...todo, invisible: false}) ))
    }
  }

handleCategory 코드 설명

category 변수는 내가 클릭한 카테고리의 종류(color 값으로 되어있음)가 무엇인지 가져온다.
그리고 전체보기 가능해야 했기 때문에,

CATEGORY 배열에 전체에 해당하는 요소도 추가했다.

const CATEGORY = [
  {
    'title' : 'all',
    'category' : ''
  },
  {
    'title' : 'work',
    'category' : 'red'
  },
  {
    'title' : 'exercise',
    'category' : 'orange'
  },
  {
    'title' : 'study',
    'category' : 'yellow'
  },
  {
    'title' : 'clean',
    'category' : 'green'
  },
]

all 을 선택했을때는 category에 빈값을 두어
if 문으로 구분을 했다.

  const handleCategory = ({currentTarget}) => {
    const category = currentTarget.value
    
    if(category){
      
    }else{
      
    }
  }

all 선택시

setTodos((todos) => todos.map((todo) =>  ({...todo, invisible: false}) ))

모든 아이템의 invisible : false 가 되어 보여지도록,

각각의 카테고리를 선택할 시

 setTodos((todos) => todos.map(
   (todo) => (todo.category === category ? 
   { ...todo, invisible: false } : 
   { ...todo, invisible: true } )
   )
 )

선택된 카테고리 와 일치하는 것은 invisible: false 해서 보이게
일치하지 않는 것은 invisible: true로 안보이게 조건문을 만들었다.

그리고 TodoItem 컴포넌트에 가서

const { id, text, done, invisible} = todo 

invisible 를 추가하고

cx 라이브러리를 로드해서

import { cx } from '../../styles/index'

TodoItem 컴포넌트 최상위 태그인 li 에다가

  return (
    <li 
    	className={cx(styles.todoElement, {[styles.isHidden]:invisible})} 
    	key={`todo-${id}`}>
      ...
    </li>
  )

invisible 이 true 일 때만 isHidden 클래스를 넣어서 안보이게 하라는 조건문을 넣어주었다.

TodoItem.module.scss

cx 는 두개 이상의 class 를 보기 좋게 쓸수 있게 해주고, 위 코드처럼 조건문도 사용할 수 있어서 가독성이 더 좋아진다.

그리고 TodoItem.propTypes 에도 invisible를 추가했다. 뭔지는 잘 몰랐는데 타입을 설정해줘야하는 부분인것 같아서 다른 상태값 한거 보고 참고했다.

TodoItem.propTypes = {
  todo: PropTypes.shape({
    id: PropTypes.number,
    text: PropTypes.string,
    done: PropTypes.bool,
    invisible: PropTypes.bool,
  }),
  handleToggle: PropTypes.func,
  handleRemove: PropTypes.func,
  handleEditMode: PropTypes.func,
}

리액트가 익숙치도 않고 그래서 너무 막막했는데, 그래도 팀 과제 할때는 민폐는 안 되야지 하는 마음으로 끝까지 하니까 성공했다. 처음에는 막막할 것 같았는데 하고 나니 그래도 뿌듯하고 또 다른것을 도전해 보고싶은 욕심이 생긴다.