[TIL] 240129(월) id 값 반복 피하기 / 카드 정렬하기

오늘 공부한 내용 정리💁🏻‍♀️

1. uncontrolled component

input 태그에 useState를 사용하기 위해서는 value와 onChange를 사용하였다.

<input type="text" value={} onChange={} />

▶️ 이렇게 사용할 경우, input에 `값을 입력할 때마다` 하나하나 모든 input 값을 useState로 받는다.  

하지만 placeholder랑 name을 넣어주면 uncontrolled component로 사용할 수 있다.

<input type="text" placeholder="제목" name="title" />
<input type="text" placeholder="내용" name="content" />

▶️ uncontrolled component인 경우에는, input 값이 제출 시기에 `한 번만` useState에서 판단하여 값을 받는다. 

2. console.dir

console.log 찍었는데 원하는 값이 안 보이면, console.dir을 찍어보자.

• console.log : html과 같은 형태의 트리 구조로 출력
• console.dir : JSON과 같은 형태의 트리 구조 출력

const TodoForm = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target); // <form></form> : html 요소로 출력
    console.dir(e.target); // 원하는 요소로 찍힘
  };

console .dir(e.target.title.value); 확인해보면, 123 이라는 원하는 값이 찍힌 것을 알 수 있다.

3. id 값 반복 피하기

반복되지 않는 id 값을 부여하기 위해서는 다음과 같이 사용할 수 있다.

id : cards.length +1

단순하게 위와 같이 사용하게 될 경우, id 값이 쉽게 중복될 수 있어 오류가 발생한다.

 

1) Date.now() 메소드

: UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환한다.

밀리초 단위까지 출력이 되므로 겹칠 가능성이 줄어든다.

id : Date.now()

 

2) crypto.randomUUID()

: 암호화된 보안 랜덤 숫자를 생성하여 v4 UUID 를 생성한다.

** UUID (Universally Unique Identifier) : 범용 고유 식별자

id : crypto.randomUUID()

이렇게 랜덤으로 엄청 복잡한 id가 생성된다.

4. Todo-card 정렬하기

Todo list 에서 card의 마감기한 날짜에 따라 오름차순, 내림차순으로 정렬을 하는 기능을 구현하였다.

sort()를 사용하였는데, 우선은 TodoController에 있는 cards를 spread operator를 이용하여 풀어낸 다음 sort 함수를 사용하여 정렬을 하였다.

각각의 a.date와 b.date의 타입을 살펴보면 string으로 나오기 때문에, new Date를 이용하여 날짜(숫자) 형식으로 바꿔주었다.

마지막으로 setCards를 사용하여 해당 이벤트가 발생하였을 때 렌더링되도록 해주었다.

//TodoController.jsx

// Todo 오름차순 정렬
  const sortCards = (order) => {
    const sortedCards = [...cards].sort((a, b) => {
      if (order === "asc") {
        return new Date(a.date) - new Date(b.date);
      }
      return new Date(b.date) - new Date(a.date);
    });
    setCards(sortedCards);
  };

 

<어려웠던 점>

1. sort 함수를 사용하자고 했는데 처음에는 TodoController가 아닌 TodoOrder라는 다른 컴포넌트에서 cards를 풀어서 정렬하려고 했더니 값이 계속 undefined가 나왔다. 이를 cards와 setCards가 있는 컴포넌트에서 함수를 설정하고, props로 함수를 넘겨주니 잘 작동하였다.
2. date가 분명 console.log에 찍히는데 왜 정렬이 안 되는거지 라고 생각했는데, type이 string일거라고 생각을 못했다. new Date로 날짜 형식으로 바꿔주니 잘 작동하였다.
   → data type을 잘 확인하자!

하루를 마치며...🤔

마지막으로 오늘 특강을 들으면서 번아웃이 오지 않는 방법에 대해서 말씀해주신 부분이 너무 깊이 와 닿아 한 번만 더 되새겨보면서 하루를 마무리하고자 한다.

내일의 나에게 미루지 말고 그날의 계획을 모두 잘 지키는 것. 정말 기본적이고 쉬운 일이지만 어려운 일인 것 같다. 아직 내가 나를 잘 모르기 때문이지 않을까.. 하루라는 시간 동안 얼마만큼의 양을 해낼 수 있는지 잘 판단하고 계획을 세우는 것 또한 아주 중요하다. 나 스스로를 더 되돌아보고, 하루 중 그저 그냥 흘러가는 시간을 흘려보내지 말고 잘 붙잡아 하루 24시간을 알차게 쓰도록 하자.