리액트 관련.. redux, styled-components, react-pose etc...

styled-components 성능

---

자주 변경되는 styled 노드는 attr 함수를 통해서 style을 정의해주는 게 성능상 좋다.(개발 콘솔에 waring을 띄어줌)

const PointerStyled = styled.div.attrs({

  style: ({ isDragging, playRate }) => ({

    left: `${isDragging === 'true' ? 0 : playRate}%`

  })

})`

  position: absolute;

  transition: 0s;

  width: ${pointerWidth}px;

  height: 10px;

  background: blue;

  border-radius: 10px;

`

React does not recognize the `[whatever]` prop on a DOM element.

---

html 노드를 구성할 때 대문자가 포함된 속성명을 소문자로 변환시킨다. 다시말해 대문자를 허용시키지 않고 모두 소문자로 변환시켜서 적용시킨다.

리액트 컴포넌트 라이브러리가 구현된 코드를 보면 대부분 props가 전달될 때 일반적으로 속성으로 전부 전달시킨다. <Button {...props}/>

문제는 styled-components에서 style 논리를 위해서 적용된 props가 node에 까지 전달되어 node 속성으로까지 적용될 때이다. 보통 이런 경우 위와 같은 에러 메시지를 뿜게 되는데 

예를 들어 styled-components 같은 라이브러리를 사용할 경우 자체적으로 컴포넌트를 구현하면 아래와 같다.

const Styled = styled.div`[스타일 선언]`

기존 컴포넌트를 활용할 경우는 아래와 같다.

const StyledMyComp = styled(MyComponent)`[스타일 선언]`

자체 노드를 사용하는 경우 전달된 props가 노드를 생성할 때 전달되지는 않는다. 하지만 기존 컴포넌트를 사용할 경우 styled 컴포넌트 props는 기존 컴포넌트에게까지 props가 전달되는데 MyComponent 가 props를 명시적으로 필요한것만 사용하지 않고 props 전부를 node 속성으로 사용하는 경우 문제가 될 수 있다. 그래서 일반적으로 다른 써드파티 라이브러리를 같이 사용할 때 자주 발생한다. MyComponent가 react-router-dom Link 컴포넌트일 경우나 react-feather svg 아이콘 컴포넌트일 경우와 같이 말이다.

<Styled isVisible={isGood}/>

<StyledMyComp isVisible={notGood}/>

추가적으로 대문자가 포함된 props와 같이 문제되는 현상으로 boolean 타입으로 전달하는 방식으로 props가 전달될 때도 문제이다. node는 속성으로 boolean을 받을 수 없기 때문이다.

결론

이런 문제가 발생할 경우 props 명을 소문자로 정의하고 boolean 타입으로는 값을 전달해주지 말 것. 

이 방법이 싫다면 사용하는 라이브러리에서 원하는 props만 다음 컴포넌트에 전달할 수 있는 방법이 있는지 찾아보거나 직접 구현하는 방식으로 접근해야 한다.