[WIL 2023.06.18] 내배캠 5주차

📝 Situation(상황): 이번주 목표

• ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다.
• 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다.
• 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다.
• 리액트 입문강의를 활용해 투두리스트 페이지 만들어보기.

 

👀 Task(임무): situation 중 문제들

• 완료 <-> 취소 간 상호이동
• id 값의 중복
• input validation 적용
• 컴포넌트 분리

 

🔍 Action(접근방법): 해결시도

<button
  className="update-btn"
  onClick={() => todoUpdateClickBtn(item.id)}
>
  완료
</button>

객체의 id값을 가져와서 

const todoUpdateClickBtn = (id) => {
  // isDone 값을 변경 해준다면!?
  const updatedTodos = todos.filter((item) => {
    if (item.id === id) {
      item.isDone = !item.isDone;
    }
    return item;
  });

  setTodos(updatedTodos);
};

객체의 id값과 현재 클릭한 id가 일치한다면 isDone키로 받고 있던 불리언을 반대로 반환 하라는 식을 작성하여

완료<->취소 버튼 클릭 시 성호 이동이 가능하게 하였다.

 

그리고 id값이 중복되는 문제는

const todoID = todos.length > 0 ? todos[todos.length - 1].id + 1 : 1;

기존에 배열의 마지막 요소에 +1을 했던 것이 문제였기 때문에 

id값을 배열길이의 +1로 두니까 문제가 배열의 인덱스가 10이라고 가정했을때 

5의 항목을 삭제하면 총 인덱스는 9로 바뀌고

이 때 새로운 카드를 생성하면 id가 10인 항목이 생성되는데 그러면 이 배열 안에 id가 10인 항목은 2개가 되는 것이다.

그래서 삭제하고 완료 취소를 반복하다보면 어느새 난리가 나는 문제가 발생했었다.

이런 문제는 마지막 요소의 "아이디"의 +1 이라고 한다면 중간에 어떤 것을, 몇 개를 삭제해도 값이 중복 될 일은 없다.

 

validation check는 state의 값이 비어있다면 submit이 되지 않게끔 하면 되는 것이다.

막상 작성하고 보면 꽤나 간단한데 여기까지 생각 해내는데 은근 오래걸렸다.

if (title === '' || contents === '') return;

그리고 아쉬운 점이 있다면 값을 입력 해달라고 알럿창을 띄웠으면 더 좋았을 것 같다.

 

코드를 다 작성 하고 나서 컴포넌트를 분리하려니 은근히 막막한 기분이 들었다.

다음에는 처음부터 나눠서 해보는 것을 시도해보자.

먼저 어떻게 나눌지 구상하고 파일부터 만들어두고 하나씩 나누어 보았는데

내가 이렇게 나누면 되겠지 하고 구상한 것과 실제로 짜여진 로직에 차이가 있어서 수정이 되었다.

거기까지 이해하는데에도 시간이 꽤 많이 걸렸다.

 

지금은

이렇게 컴포넌트가 구성되어 있지만

원래는 

이렇게 리스트 안에 폼 컴포넌트가 들어가고 버튼들도 따로 다 하나씩 컴포넌트로 나눌 예정이었다.

하지만 부모>자식 한방향으로만 props를 전달하는데 List>Form 구조는 반대였다.

굳이 저렇게 부모 자식 관계를 만들고 싶다면 Form>List 가 되는 것이 맞았고, 전달해야하는 props가 너무 많아짐+ props drilling...굳이 부모 - 자식으로 둬야 할 이유가 있나 싶어서 App 밑에 나란히 분리 하는 것으로 변경 했다.

버튼들 또한 굳이 분리를 하는 것이 오히려 비효율적으로 보여서 분리하지 않기로 결정했다.

 

📃 Result(결과): action 후 성과

기본에 충실한 디자인... 맘에는 안들지만 이번엔 코드에 집중을 많이 했다.

스스로도 많이 고민하고

조원 분들에게 많이 물어도 보고 했던 한 주가 아니었나 싶다.

 

📓 Point(정리): 이번주 요약

리액트를 간단하게 배우고, 익혀보며 기초가되는 props, state, 컴포넌트, 불변성, Rendering에 대해 이해해보았다.