React Emotion Error nth-child / nth-of-type

1. react emotion 사용 중 에러 발생

 - The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type"

 

2. 차이점
 - nth-child(n) :  부모의 모든 자식 중 n번째
 - nth-of-type(n) : 부모의 특정 자식 중 n번째

3. 이유
성능적인 문제는 아니고 SSR할 때 안전하지 않다.
스타일을 받아야 할 요소가 SSR 시 제자리에 있지 않을 경우에 제대로 된 스타일 적용되지 않습니다.

 

4. EX( :first-child )

import styled from "@emotion/styled";

const Text = styled.p`
  color: gray;
  &:first-child {
    color: black;
  }
`;

export default () => (
  <div>
    <Text>Title</Text>
    <Text>Subtitle</Text>
  </div>
);

다음은 서버 측에서 생성된 구조입니다.

<div>
  <style data-emotion-css="1fyxi0m">
    .css-1fyxi0m {
        color: gray;
    }

    .css-1fyxi0m:first-child {
        color: black;
    }
  </style>
  <p class="css-1fyxi0m">Title</p>
  <style data-emotion-css="1fyxi0m">
    .css-1fyxi0m {
        color: gray;
    }

    .css-1fyxi0m:first-child {
        color: black;
    }
  </style>
  <p class="css-1fyxi0m">Subtitle</p>
</div>

첫 번째 자식은 <style>요소이고 <p>가 아니므로 :first-child가 작동하지 않습니다.

5. 따라서 

SSR을 사용하지 않는다면 문제가 없겠지만 React에서는 여러 요소가 섞여 있는 컴포넌트에서는 사용하기 좋을 것 같습니다.

 

(2021-02-23 / infinum Frontend Handbook / https://infinum.com/handbook/frontend/react/common-ssr-errors)