221129 TIL

오늘은 팀과제를 마무리했다.
양방향 데이터 바인딩에 관하여 이해가 안가서 슬랙에 질문해보았고, 아직 Vue.js에 대해 알지 못하기 때문인 것 같아,
개념정도만 이해하고 넘겼다.

스터디 팀원분의 코드를 보고 새로 알게 된 것에 대해 정리하고, 기술매니저님의 코드리뷰에대해 써보려고 한다.

function Child({ a, b, c}) => {

}

function Child(props) => {
  const { a, b, c} = props
}

위는 자식 컴포넌트의 매개변수에서 props를 구조분해할당한 것이고, 아래는 const를 이용하여 따로 구조분해할당을 한 것이다.
저런 방식으로하니 더 깔끔해 보여서 남기려고 했다.

 

기술매니저님의 코드리뷰

  //Work 추가하기 버튼핸들러
  const addWorkHandler = () => {
    const newWork = {
      id: Math.random() * 100,
      title: title,
      desc: desc,
      isDone: false,
    };
    setWorks([...works, newWork]);
    //인풋태그value 제거하기위함
    setTitle('');
    setDesc('');
  };

어제 팀원분의 의견으로 고친 id값을 매기는 방식에 대해 말씀하셨다.
사실 나도 저걸 적으면서 엄청나게 낮은 확률로 겹칠 수도 있는데...하면서 넘기긴했었다.
todo를 체크하는 사이트이다보니, 그렇게 많은 양의 todo가 만들어지지 않을 것이라고 생각해서 넘겼지만,
매니저님의 의견은 달랐다.

어찌됐든 사용자에게 문제가 발생할 수 있는 확률이 있다면, 사전에 방지하는게 좋다는 의견이셨다.
맞는 말이다.
그리하여 내일은 저 id값을 works의 제일 마지막의 id값에 +1 하는 방식으로 고쳐볼 예정이다.

<div className="under-title">Working.. 🔥</div>
<div className="list-wrapper">
  {works
    .filter((work) => {
      return work.isDone === false;
    })
    .map((work) => {
      return (
        <Working
          handleRemove={removeWorkHandler}
          handleChange={changeWorkHandler}
          work={work}
          key={work.id}
        />
      );
    })}
</div>
<div className="under-title">Done..! 🎉</div>
<div className="list-wrapper">
  {works
    .filter((work) => {
      return work.isDone === true;
    })
    .map((work) => {
      return (
        <Done
          handleRemove={removeWorkHandler}
          handleChange={changeWorkHandler}
          work={work}
          key={work.id}
        />
      );
    })}
</div>

두번째. 코드 리뷰였다.

이렇게 Working과 Done의 컴포넌트는 완료 혹은 취소로 버튼만 다르고 다른건 다 똑같기 때문에,
isDone으로 구분은 해주되, 기존의 컴포넌트를 분리헀던 방식인 Working과 Done이 아니라,
나타내는 컴포넌트와 버튼에대한 컴포넌트를 분리해보는게 어떻냐 라는 의견이셨다.

맞는 말이다. 나는 컴포넌트를 나눌 때 단지 위치가 달라지는 것에 따라서 분리를 했는데,
컴포넌트의 기능에 따라 분리해야하는 것이 올바르다고 생각하여, 내일 저것에 대한 컴포넌트를 한번 나눠볼 예정이다.

 

마지막 코드리뷰

<div className="list-wrapper">
  {works
    .filter((work) => {
      return work.isDone === false;
    })
    .map((work) => {
      return (
        <Working
          handleRemove={removeWorkHandler}
          handleChange={changeWorkHandler}
          work={work}
          key={work.id}
        />
      );
    })}
</div>

<div className="list-wrapper">
  {works
    .map((work) => {
      if(work.isDone === false) {
          return (
            <Working
              handleRemove={removeWorkHandler}
              handleChange={changeWorkHandler}
              work={work}
              key={work.id}
            />
          );
      } else { return null }
    })}
</div>

아래 코드가 원래 작성했던 코드이다.
if문을 통해 isDone을 구분하여 내려보내고, State가 변하면 다시 리렌더링해도 작동할 것이라고 생각했는데,
그러지 못했다. 작동은 하지않았고, 결국 filter을 사용해 해결했었다.
이에 대한 답변으로 State가 변경되면 결국 App.js함수컴포넌트가 다시 렌더링되는데, 이때 state값이 기존에 설정했던
기초값으로 변경되기 때문에 안됐던 것이라고 설명해 주셨다.
음...내가 이해한 바로는 State가 기초값으로 변경되고, 그에따라 기존에 추가했던(isDone이 변경된) 컴포넌트가 옮겨지지 않았다.인데, 어느정도 흐릿하게나마 이해는 되지만 뚜렷하게 이해가 되지않아 내일 다시 질문해 볼 생각이다.