콘텐츠로 이동

2024 11 28

2024-11-28

Styled Components

  • 개요
    • 아래와 같이 reactRef를 ref에 두고 하위에 shadowDom을 깔았는데, 여기서 reactRef의 height를 계산을 못했음
    • 계속 height를 잘 계산했다가 계속 0이였다가 반복... shadowDom을 하위로 쓰다보니 그런 것 같아서 찾아봄 
      <div ref={reactRef}>
    <root.div>~~~</root.div>
</>
  • ShadowDom
    • ShadowDOM을 쓰게되면, 별도의 DOM 트리를 쓰게 된다. 이는 기존 메인 도큐먼트와 분리를 시켜버리는 역할을 함.
    • 이런 분리는 height/width 등의 속성 계산에 애를 먹임 1. DOM Isolation
      • ShadowDOM은 분리/캡슐화된 DOM 트리를 만듦
      • 이는 ShadowDOM 안에서의 hieght를 ShadowDOM 밖에서 재려고 할때 오류가 날 수 있음. 2. Style Encapsulation 3. Layout Calculations
      • 브라우저는 ShadowDOM을 별도의 레이아웃 컨텍스트로 취급함
      • 이는 정확한 측정에 어려움을 줄 것

  • 해결책 Styled Components https://www.daleseo.com/react-styled-components/

    • [CCS in JS]
      • 스타일 정의를 CSS가 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 것

    • [문법]

      • styled 함수를 임포트하여 원하는 스타일 적용 
        import styles from '!raw-loader!./../../scss/style_v2.scss';
import cstyles from '!raw-loader!./../../scss/custom.css';

const ContentDiv = styled.div`
    ${styles}
    ${cstyles}
`;
      • 이런식으로 Styled Components를 사용해 JS 코드안에 삽입된 CSS 코드는 글로벌 네임스페이스 사용 X
      • 각 JS마다 고유한 CSS 네임 스페이스를 부여하여 각 리액트 컴포넌트에 완전히 격리된 스타일 적용 가능
      • 해당 컴포넌트를 쓰는 페이지에 접속했을 때 <style> 시트가 도입됨
      • props 처럼 특정 속성을 넘겨서 가변 영역으로 쓸 수 있음