[SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결

행복한 2주차 시작 

📌 uuid 사용하기

React에 유일한 key 값을 제공하는 패키지

React에서의 유일한 key prop 값은 리액트가 리스트 아이템을 구분할 수 있게 한다.

그 전에는 배열의 key값에 인덱스를 넣었는데, 배열의 인덱스는 0,1,2,3.. 이므로 고유한 값이 아니므로 React가 렌더링을 잘못할 수 있기 때문에 고유한 값을 넣어야 한다.

-> 배열에 data 추가 수정 시 전체 배열을 다 수정해야 하기 때문에 

 

위 코드에서 uuid 패키지를 사용해 key값으로 사용할 유일한 UUID를 만들수 있고 이처럼 유일한 ID는 충돌할 염려가 거의 없습니다.

uuid 같은 패키지를 사용함으로써 ID는 유일하고 예측가능해지고, 우리는 각 아이템에 대해 새로운 ID를 생성할 방법을 고민할 필요도 없어진다.

참고 :https://one-it.tistory.com/entry/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%ED%94%BC%ED%95%B4%EC%95%BC-%ED%95%A0-%EC%95%88%ED%8B%B0%ED%8C%A8%ED%84%B4

 

---

📌 스타일 관련 구조 

맞아요... 도전!!!!!!!!!

* Styled component가 속성을 props로 전달받을 때 의 type

interface ProfileImgProps {
  src: string;
  style: {
    width: number;
    height: number;
  };
}

const ProfileImg = ({ src, style }: ProfileImgProps): JSX.Element => {
  return <ProfileImgStyle {...{ src, style }}></ProfileImgStyle>;
};

export default ProfileImg;

const ProfileImgStyle = styled.img`
  width: ${({ style }) => `${style?.width}px`};
  height: ${({ style }) => `${style?.height}px`};
  border-radius: 70%;
  /* object-fit: contain; */
`;

사용 시

<ProfileImg style = {width='20px' height='30px'} />

사실 저  style부분을 generic을 사용하면 완벽

 

참고 : https://github.com/styled-components/styled-components/issues/630#issuecomment-547484722

 

🙂 반복된 component style 지정

1) 정해진 style이 있을 때  : type으로 버튼을 사용할 때 LabelLargeGroup

   장점: props 를 받지 않음으로써 component내의 한 부분이 변경되도 전부 다변경

2) 자잘한 style이  계속 변경될 때: 하나의 component를 만들어서 props로 내려서 사용할까 IssueHeaderButton

 

1) component를 하나씩 만든 경우

const LabelLargeGroup = ({ type }: Prop): JSX.Element => {
  return {
    open: <IssueLabelOpen />,
    closed: <IssueLabelClosed />,
  }[type] as JSX.Element;
};

export default LabelLargeGroup;

const IssueLabelOpen = () => {

  return (
    <IssueLabelStyle>
      <CustomOpenChip
        avatar={<OpenIconGroup type={'label'} />}
        label={OPEN_ISSUE}
        color="primary"
        variant="outlined"
      />
    </IssueLabelStyle>
  );
};

2) props로 일일히 받을 때 

const IssueHeaderButton = ({
  icon,
  text,
  count,
}: IssueHeaderButtonProps): JSX.Element => {
  return (
    <IssueHeaderButtonStyle>
      <IconBox>{icon}</IconBox>
      <div>
        <TextBox>{text}</TextBox>
        <CountBox>{count}</CountBox>
      </div>
    </IssueHeaderButtonStyle>
  );
};

🙂  material UI 에 

객체리터럴로 그룹별로 네임스페이스를 만들어서 사용 

단 material UI의 속성으로 넣어줄때는 변수로 지정이 안됨

 

 

---

📌 decoded를 매번 하는 과정 어떻게 효율적으로 바꿨을까?

수정 전

localStorage.setItem('token', data.token);

        const token = localStorage.getItem('token');
        if (!token) return;

        const decoded =
          jwtDecode<{ name: string; profileImageUrl: string }>(token);

        localStorage.setItem('name', decoded.name);
        localStorage.setItem('profileImageUrl', decoded.profileImageUrl);

        history.push(P.ISSUE_LIST);

 

decoded를 보관해놓고 name과 profileImg로 저장을 했는데,

 

해당방법은 사용자의 개인정보인 이름과 프로필이미지가 너무나 쉽게 노출되기 때문에 변경이 필요하다는 조언을 받았다.

 

 

 

 

 

 

 

 

 

 

 

수정 후 

Recoil을 활용한 사용자 정보 활용

export const token = atom({
  key: 'token',
  default: null,
});

export const decodedToken = atom({
  key: 'decodedToken',
  default: {
    name: '',
    profileImageUrl: '',
  },
});

 const decoded = decodedToken && useRecoilValue(decodedToken);
  const profileURL = decoded && decoded.profileImageUrl;

token과 사용자 정보인 name, profileImg을 atom으로 관리하여  개인정보노출을 피하면서도

다양한 component에서 필요에 따라 useRecoilValue를 통해 꺼내와 사용하도록 변경했다.

 

코드를 구현하는 입장서만 생각하지 않고 사용자 입장으로 구현해야 한다는 교훈을 얻었다.

---

📌 MaterialUI 내부 각 요소에 Link 걸기 + 오류와 디버깅 하는 과정

index.js:1 Warning: React does not recognize the `disableRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

라쿤과 함께 여러 오류들을 맞이하며 단순히 오류가 났을 때  Warning 옆의 오류 메세지를 복사해서 검색하는게 다일까? 라는 의문이 들었다. 그러던 중 라쿤이 디버깅을 하고 오류를 찾는 과정에 대해 설명해주었는데, 그 과정과 해결 방법에 대해 정리하고자 한다.

 

[ ❌ Warning 밑 ] 

* 디버깅 순서와 과정과 렌더링 되는 순서대로 보여주는 것 

* 스택에 쌓여 잇는 순서가 보여지는것 

* 오류가 난 위치를 알려주는 것 

---

1) 결국 오류가 난 곳 a link 

2) 그럼 어디에 잇는 링크인가?를 보여주기 위해서 리액트 최상위  부터  들어간다 (StyleProvider) 

3) IssueList / TabGroup / ButtonGroup  계속해서 따라 들어가다 보면

4) ButtonGroup내의 링크(a) 에서 잘못되었다는것을 알게 된다.

 

 

[문제상황]

사용하지도 않은 MaterialUI의 내부요소들을 UpperCase가 잘못되었다는 오류가 발생했다. 

 

TabGroup 

const TabGroup = (): JSX.Element => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CustomTabGroup
        size="large"
        color="primary"
        aria-label="large outlined primary button group"
      >
        <Link to="/main/label-list">
          <TabButton startIcon={<LocalOfferIcon />}>
            <TextGroup type={T.SMALL} content={TT.LABEL} color="#6E7191" />
            <CountGroup count={0} color="#6E7191" />
          </TabButton>
        </Link>
        <Link to="/main/milestone">
          <TabButton startIcon={<FlagIcon />}>
            <TextGroup type={T.SMALL} content={TT.MILESTONE} color="#6E7191" />
            <CountGroup count={0} color="#6E7191" />
          </TabButton>
        </Link>
      </CustomTabGroup>
    </div>
  );
};

TabGroup을 확인해보면 <CutsomTabGroup> 안에  <TabButton>이 있고 그것들이 <Link>로 감싸져 있다.

여기서 간과한 점은 

<CutsomTabGroup> : Material UI의 ButtonGroup이고 

<TabButton> : Material UI의 Button 이다 ( ButtonGroup의 각요소) 

참고 :https://material-ui.com/components/button-group/

 

현재 문제가 되는 코드를 보면 Material UI의 내부에 접근해 Link를 걸고 있기 때문에 문제가 되는 것이었다.

 

 

[ 결론]

⭐️material UI 내부 요소에 링크를 각각 걸 수 없다.

⭐️ Material UI에는 링크를 거는 방법이 따로 있다.

 

[ 해결방안]

1) ButtonGroup을 사용하지 않는다

2) Button에 component로 Link를 전달한다.

 

https://github.com/nygardk/react-share/issues/316

 

탐구 끝에 2) Button에 component로 Link를 전달한다. 방향으로 결심했고 

ReactRouter에서 Link를 가져와서 Button의 component= {Link} 로 전달하면 ButtonrGroup도 사용 가능하고 그 내부의 Button에는 각각 링크를 걸 수도 있게 되었다.