FE 문제직면 & 해결과정

고민 과제와 시도

issue-tracker 프로젝트를 구현하며 경험한 크고 작은 문제 상황과 해결 과정에 대한 페이지 입니다.
프로젝트 내 고민했던 문제와 해결을 위한 시도, 그 결과를 공유합니다.

📌 고민과제1) 공동 component에 대한 고민

스타일 속성만 가져와서 사용하는 것과 component를 아예 만들어 놓고 사용하는 것의 기준이 애매한것이 고민
ex) 처음엔 button에 +아이콘이 함께한 styled component였지만 button의 스타일이 다양해지면서 +아이콘을 props로 받게 하면서 기능 component로 변경했다. 공통적으로 사용하는 속성은 총2가지

• 공통 기능 component : atome/common/~~

  공통 기능 component img

  

• 공통 styled component : style/CommonStyle
  style만 있는 component 조금씩 customizing이 필요한 부분만 바꿈으로써 편리하게 사용 가능

  공통 기능 component img

  

💡 해결과정

코드구현에 답이 있는 것은 아니기 때문에 2가지의 공통요소를 나누는 기준만 정해서 사용하면 유용할 것으로 판단

• 공통 기능 component : 때에 따라 미세하게 style 지정이 달라 공통 스타일 지정 외에도 커스터마이징이 추가로 필요한 경우
• 공통 styled component : 구체적이고 세부적인 style 지정이 되어있고 3회 이상 반복적으로 사용되는 경우

✨ 해당 코드디자인을 사용하며 느낀 장단점

장점: 반복을 줄이고, 공통 스타일이 한 데 모여있기 때문에 유지보수 하기 편리할 것으로 예측한다.
단점: 너무 많은 공통스타일 정의가 있어 적재적소에 맞춰 사용하기에 복잡할 수 있다.

---

📌고민과제2) Material UI와 styled-component의 충돌

기본적으로는 styled-components 에서 지정한 스타일은 Material UI로 지정한 스타일에 덮이게 된다.
➡️ styled-components가 선언된 후에 Material UI에서 인라인으로 선언되기 때문

하지만 다양한 스타일을 구현하기 위해서는 Material UI에서 기본적으로 지정하는 style 외의 지정이 필요했다.

💡 해결과정

Material UI에서 추가로 스타일을 지정하는 방법은 크게 2가지로 정리했다.

1. Material UI의 useStyle 사용 useStyle - 기본적으로 제공하는 component외에 약간씩 스타일을 변경하고 싶을 때 사용

2. injectFirst 사용
   를 통해서 Material-UI → Styled-Components 의 순서로 바꿀 수 있다.

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

그렇다면 styled-componets가 가능한데 굳이 useStyle의 장점은 무엇일까?
useStyle의 장점 : useStyle 를 사용하면 materialUI의 TypeScript 사용시 타입을 알아서 추론해주는 장점이 있다.
실제로 styled-components 사용시 추가로 넘겨줄 style들의 type을 지정해야 하는 번거로움이 있었습니다. ex)ButtonGoup.jsx