[TIL] 11/12 styled-components 모르는 것 정리

1. styled-components 모르는 것 정리

 
1.1. styled-components 의 중첩 스타일링
 
스타일링 컴포넌트를 작성할 때 이렇게 중첩으로 스타일링을 작성할 수 있다는 것을 알게 되었다. 
컴포넌트 구조와 스타일이 일치하기 때문에 어떤 태그(클래스)에 어떤 스타일링이 적용되었는지 쉽게 알아볼 수 있다. 

const HeaderStyled = styled.header`
  .logo {
    img {
      width: 250px;
    }
    margin: -15px;
  }
`;

 
 
- 중첩 스타일의 동작 방식
 
styled-components 는 내부적으로 CSS 클래스를 생성할 때 중첩된 스타일을 컴파일한다. 
위의 코드를 컴파일하면 아래와 같이 앞에 유니크한 클래스 이름이 붙어서 생성되는 것을 확인할 수 있는데, 클래스 이름을 유니크하게 생성하여 다른 컴포넌트와 스타일이 충돌하지 않도록 방지한다. 

.sc-bdfBQB .logo img {
  width: 250px;
}

.sc-bdfBQB .logo {
  margin: -15px;
}

 
 
1.2. ThemeProvider
 
styled-components 는 ThemeProvider 라는 컴포넌트를 제공하는데, 이 컴포넌트를 사용해서 애플리케이션 특정(또는 전체) 영역에 테마 객체를 전달할 수 있다. 
 
ThemeProvider 는 React 의 Context API 를 내부적으로 사용하여, theme 객체를 컨텍스트 값으로 전달한다. 이 컨텍스트 값은 styled-components 안에서 자동으로 소비되기 때문에 다른 styled 컴포넌트 안에서 특별한 작업없이 불러와서 사용이 가능하다. 
 
 
ThemeProvider 로 theme 를 전달

return (
    <ThemeContext.Provider value={{themeName, toggleTheme}}>
        <ThemeProvider theme={getTheme(themeName)}>
            ...
        </ThemeProvider>
    </ThemeContext.Provider>
    );

 
이런 식으로 theme 를 사용할 수 있다. 

const Button = styled.button`
  background-color: ${({ theme }) => theme.color.primary}; // theme 사용
  color: ${({ theme }) => theme.color.text};
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
`;

 
 
※ React Context API 정리 참고

[TIL] 11/11 React context API, 테마 스위쳐 구현, 모르는 것 정리