Todo List | Notion

<aside> 🔥 기본적인 리액트 지식으로 Todo List 만들어 보기

</aside>

Untitled

<aside> 🔥 dependency 설정

sass : 스타일링
classnames : 조건부 스타일링
react-icons : 리액트 아이콘

yarn add sass classnames react icons

</aside>

<aside> 🔥 컴포넌트 설명

TodoTemplate : 화면 가운데 정렬, 앱 타이틀, children으로 렌더링
TodoInsert : 새로운 항목 추가
TodoListItem : 각 할일 항목 보여주는 컴포넌트
TodoList : TodoListItem 컴포넌트를 map으로 변환하여 보여주는 컴포넌트 </aside>

<aside> 🔥 App.js

App.js에서 state를 관리하고 각 컴포넌트 props로 넘겨준다.

App.js 전체 코드

새롭게 알게된 부분만 정리하려고한다.

useRef의 사용처

렌더링 되지 않는 부분은 state 대신 ref 사용
```
const nextId = useRef(4);
```

callback 습관화

만약 props로 다른 컴포넌트에 전달해야하는 함수를 만들 때는 useCallback을 습관화하자.

const onInsert = useCallback(
    (text) => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1;
    },
    [todos],
  );

filter 되짚기

filter의 파라미터로 넣는 함수는 true false를 반환해야하며, 여기서 true를 반환하는 경우에만

새로운 배열에 포함된다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const biggerThanFive = array.filter(number => number > 5);
// 결과: [6, 7, 8, 9, 10]

해당 todo항목을 제거해줄 때 고유값인 id를 참조하여 해당 id를 제외하고 새로운 배열을 참조하도록 하였다.

// 할일 제거해주는 함수
  const onRemove = useCallback(
    (id) => {
      // filter함수로 해당 아이디 제거하고 새로운 배열 생성
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos],
  );

삼항연산자로 토글 기능 만들기

해당 기능은 check를 했을 경우 state의 true false를 토글하는 기능이다.

클릭하면 부정연산자를 사용해서 반대값으로 바뀌게 구현되었다.

// check 했을 경우 state의 checked 변경
  // css를 위함
  const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [todos],
  );

</aside>

<aside> 🔥 TodoTemplate.js

화면 가운데 정렬해주고 앱 타이틀을 출력하며 children으로 다른 컴포넌트를 렌더링 해준다.

todo list의 틀 같은 느낌이다.

전체코드
css
children props

children을 props로 가지고 있으면 아래 코드와 같이 전체적인 틀로써 작동한다.

// TodoTemplate.js
return (
    <div className="TodoTemplate">
      <div className="app-title">일정 관리</div>
      <div className="content">{children}</div>
    </div>
  );
};

// App.js
return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );

</aside>

<aside> 🔥 TodoList

해당 컴포넌트는 App.js에서 관리하는 todo를 받아와 map을 활용해서 TodoListItem 컴포넌트에

전달하는 역할을 한다.

전체코드
css </aside>

<aside> 🔥 TodoInsert

Untitled

할일을 추가해주는 컴포넌트이다.

전체코드
css

e.preventDefault()

아래 onSubmit 함수는 form에서 submit 이벤트로 브라우저에서 새로고침을 발생시키는데,

이를 방지하기 위해 사용한다.

const onSubmit = useCallback(
    (e) => {
      onInsert(value);
      setValue('');

      // submit이벤트는 브라우저에서 새로고침을 발생시킨다.
      // 이를 방지하기 위한 설정
      e.preventDefault();
    },
    [onInsert, value],

</aside>

<aside> 🔥 TodoListItem

Untitled

App.js에서 state를 받아와 TodoList에서 각각의 할일을 map함수로 반환할 때 쓰이는 컴포넌트.

전체코드
css
구조분해할당

App.js의 todo state를 구조분해할당으로 받아온다.
```
// 구조분해할당으로 받아옴.
  const { id, text, checked } = todo;
```

css 조건부 스타일

check시에 토글 기능으로 state로 관리하는 해당 todo의 checked를 조건부 스타일과 연결짓는다.

여기서 상당히 흥미로운게 className={cn('checkbox', { checked })} 이 부분인데,

classnames 라이브러리를 활용한 것으로 {checked}가 true일 경우 checked 가 추가된다.

따라서 css에서 체크되었을 때 보여줄 스타일이 활성화된다.

<div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
  {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
  <div className="text">{text}</div>
</div>

.checkbox {
    cursor: pointer;
    flex: 1; // 차지할 수 있는 영역 모두 차지
    display: flex;
    align-items: center; // 세로 중앙 정렬
    svg {
      // 아이콘
      font-size: 1.5rem;
    }
    .text {
      margin-left: 0.5rem;
      flex: 1; // 차지할 수 있는 영역 모두 차지
    }
    // 체크되었을 때 보여 줄 스타일
    &.checked {
      svg {
        color: #22b8cf;
      }
      .text {
        color: #adb5bd;
        text-decoration: line-through;
      }
    }
  }

sass로 컴포넌트 사이사이에 스타일링

아래 코드처럼 셀렉터를 잡으면 컴포넌트 사이사이에 스타일링이 가능하다.
```
& + & {
    border-top: 1px solid #dee2e6;
  }
```

</aside>

<aside> 🔥 이렇게해서 1장부터 9장까지 익혀본 개념으로 todo리스트를 완성했다.

따라 치는게 대부분이였지만, 굉장히 흥미로운 시간이였다.

</aside>