TIL 20211115 [항해99 61일차]

뷰데이터 관리

고민한 문제. 프로젝트 추가하기를 클릭하고 작성완료를 누르면 추가하기 창이 새로고침을 해야 사라짐

• 문제가 발생한 이유
  클릭해서 추가하기 창이 나오고 작성 완료하면 없어지는 부분이 각각 다른 컴포넌트에 연결이 되있어서 처음에는 스테이트로 관리를 해서 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 변경시키려고 했는데 계속 오류가 발생하고 데이터 전달이 잘 이루어지지 않았다. 그리고 onHide에 ()가 빠져있어서 실행이 안 됐다.

• 해결방안
  자식이 부모의 데이터를 관리하는 방법을 피하기 위해 뷰 데이터를 리덕스로 관리하게 해서 1차 해결이 됐었는데, 뷰데이터를 리덕스에 저장하는 부분 재고해야 한다는 피드백을 받았다. 리덕스에서는 최대한 비즈니스 로직에 관련한 엔티티들, 데이터들, 모델들을 저장해서 활용하면 좋을 것 같다고 하셔서 자식이 부모데이터를 바꾸도록 접근하는 것이 아닌 자식이 부모의 데이터를 바꿔라라는 이벤트를 나타낼 수 있도록 다시 접근을 했다.

//부모 컴포넌트
const CardAdd = () => {
  const [click, setClick] = React.useState(false);

  const closeClick = () => {
    setClick(false);
  };

return (
    <Grid width="100%" height="100%" padding="0px 0px 7% 0px;">
      <TextDiv>
        <TitleText>
          나의 카드 <Count>{cardCount.length}</Count>
        </TitleText>
        <TextBtn
          onClick={() => {
            setClick(true);
          }}
        >
          + 카드 추가하기
        </TextBtn>
      </TextDiv>
      <Grid margin="0px 0px 48px 0px">
       // closeClick 함수를 onHide에 담아서 자식 컴포넌트에서 사용 
        <CardBackWrite onHide={closeClick} />
      </Grid>
      {cardList.backCardIdx.map((cardId) => {
        return (
          <Grid key={cardId}>
            <CardPortfolio cardId={cardId} />
          </Grid>
        );
      })}
    </Grid>
  );
};

//자식 컴포넌트
const CardBackWrite = ({ onHide }) => {
  
  const addCardBack = () => {
   //작성완료 버튼 누르면 작성화면 꺼지게 함. 
    onHide();
    // dispatch(isSuccess(!handleClick));
  };

  return (
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <AddBtn
              onClick={addCardBack}
              disabled={disabled}
            >
              <Text
                bold20
                color={disabled ? ColorStyle.PrimaryPurple : ColorStyle.Gray300}
              >
                작성 완료
              </Text>
            </AddBtn>
            <div
              onClick={() => {
               // 작성 취소버튼을 누르면 작성화면 꺼지게 함
               onHide();
              }}
            >
              <CloseBtn cursor="pointer" />
            </div>
          </div>
  );
};

---

오늘은 위에 오류 해결과 함께 마이페이지 태그검색 부분 CSS수정, 카드 뒷면 수정하기에서 링크 연결 로직 수정을 했다. 추가하기 버튼 리덕스에서 뷰 데이터를 관리하는 것에서 다시 state로 관리하는걸로 바꿨는데 생각보다 금방 해결됐다. 리덕스로 관리하는걸로 바꾸기전에 처음에는 state로 관리하는걸로 하려고 했었는데 안 됐었던 이유가 onHide에 ()가 빠져있어서 onHide 함수가 실행이 안 됐던 거였다...😱 이런 실수는 줄이도록하자!
그리고 뒷면 카드가 하나도 없을때 +아이콘 상자를 클릭했을때 추가하기가 나오는 부분이 생각보다 오래걸렸는데... 진작에 컴포넌트를 나눌걸 그랬다. 왜 한컴포넌트에서 다 하려고해서 오랜시간 삽질을 한건지...😂 그치만 삽질 덕에 적당히 컴포넌트도 잘 나눠주는 것이 중요하구나를 느꼈다.