10강 일정관리 웹 애플리케이션 만들기

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다.

 

학습범위: p254~p288

 

1. react-icons를 처음 써봤다.

 

링크: https://react-icons.github.io/react-icons/

 

장점 같은 경우는 SVG 형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용을 할 수 있다는 점이다.

 

material UI보다 

불편했던 점은 import ~ from ~ 이거를 일일이 다 써주는게 불편했다.

 

 

2. rem 아직도 어떻게 쓰는지 잘 모르겠다. 기준을 모르겠다.

 

 

const ItemCont = styled.div`
  padding: 1rem;
  display: flex;
  align-items: center;
  &:nth-of-type(even) {
    background: #f8f9fa;
  }
`;

 

3. 영역을 모두 차지하게 할때 flex:1 꽤 유용하다고 느낀다. 

 

 

 

4. 스타일 컴포넌트 사용할때 해당 클래스에 주려면 &.클래스이름  이런식으로 사용하면 된다. 

 

const CheckBoxCont = styled.button`
  flex: 1;
  display: flex;
  align-items: center;
  svg {
    font-size: 1.5rem;
  }
  p {
    margin-left: 0.5rem;
  }
  &.checked {
    svg {
      color: #febb6c;
    }
    p {
      color: #adb5bd;
      text-decoration: line-through;
    }
  }
`;

 

5. 글씨 한 가운데에 줄을 그으려면 text-decoration:line-through; 를 이용하면 된다. 

 

 

 

 

6. 가상의 데이터 구조를 만들어서 작성

 

function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: "한라봉으로 주스 만들어 먹기",
      checked: true,
    },
    {
      id: 2,
      text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
      checked: true,
    },
    {
      id: 3,
      text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
      checked: false,
    },
  ]);

 

 

 

7. useCallback Hook

:컴포넌트가 리렌더링 될 때마다 함수를 새로 만드는 것이 아니라, 한 번 함수를 만들고 재사용할 때 사용.

 props를 전달해야할 함수를 만들 때는 useCallback을 사용하여 함수를 감싸는 것이 최적화에 좋음.

 

import { useState, useRef, useCallback } from "react";
import TodoTemplate from "./components/TodoTemplate";
import TodoInsert from "./components/TodoInsert";
import TodoList from "./components/TodoList";

function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: "한라봉으로 주스 만들어 먹기",
      checked: true,
    },
    {
      id: 2,
      text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
      checked: true,
    },
    {
      id: 3,
      text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
      checked: false,
    },
  ]);

  const nextId = useRef(4);

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

  const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos]
  );

  const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo
        )
      );
    },
    [todos]
  );

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

export default App;

 

 

 

 

8. useRef Hook

 

id값은 렌더링되는 정보가 아니기 때문에 useState가 아닌 useRef를 사용한다.

화면에 보이지도 않고 이 값이 바뀐다고 해서 컴포넌트가 리랜더링 될 필요가 없기 때문!

단순히 새로운 항목을 만들 때 참조되는 값이면 useRef 고려하기!!

 

function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: "한라봉으로 주스 만들어 먹기",
      checked: true,
    },
    {
      id: 2,
      text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
      checked: true,
    },
    {
      id: 3,
      text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
      checked: false,
    },
  ]);

  const nextId = useRef(4);

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

 

 

 

9. 할일 목록 추가 기능 핵심

 

const [todos, setTodos] = useState([
    {
      id: 1,
      text: "한라봉으로 주스 만들어 먹기",
      checked: true,
    },
    {
      id: 2,
      text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
      checked: true,
    },
    {
      id: 3,
      text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
      checked: false,
    },
  ]);

const nextId = useRef(4);

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

 

10. 할일 목록 삭제 기능 핵심

 

 const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos]
  );

 

 

 

11. 할일 목록 수정 기능 핵심

 

const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo
        )
      );
    },
    [todos]
  );