10.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 2-3챕터리뷰(2)

[ 새롭게 알게된 것 ]

---

1. styled-component는 스타일과 컴포넌트를 동시에 만들기 가능함

---

div를 스타일링하고 싶으면 styled.div 아래와 같이 만들기 가능

import React from 'react';
import styled from 'styled-components';

const Subject = styled.div`
  width: 5rem;
  ...생략
`;

---

 

2. 특정 props값을 기반으로 여러 CSS를 조건부로 보여주고 싶다면 직접 CSS 사용해야됨을 알게됨

---

const Circle = styled.div`
  background: ${props => props.color || 'black'};
  ${props =>
    props.huge &&
    ` width: 10rem;
      height: 10rem;
    `}
`;

단, CSS 사용할땐 literal Template을 활용해서 해당 부호안에 CSS를 조건부로 입력해주면 됨을 알게됨

---

 

3. CSS in JS에서 lighten() 또는 darken() 유틸 함수와 유사한 polished 라이브러리가 있음

---

우선 패키지를 아래와 같이 설치해줘야됨

yarn add polished 를 입력하면 끝!

기존의 색상 부분을 polished 유틸함수로 대체하면 아래와 같음

기존꺼

유틸함수 polished 적용

---

 

4. 색상코드 변수를 직접입력하는 대신 ThemeProvider   사용가능함

styled-components: API Reference

---

일종의 전역 팔레트임.

styled-componet를 사용하는 모든 컴포넌트에서 조회하여 사용가능함.

사용방법은 ThemeProvide props로 theme을 설정하면

function App() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          blue: '#228be6',
          gray: '#495057',
          pink: '#f06595'
        }
      }}
    >
      <AppBlock>
        <Button>BUTTON</Button>
      </AppBlock>
    </ThemeProvider>
  );
}

Button 컴포넌트에서 아래와 같이 css 변수대신 활용 가능함

  /* 색상 */
  ${props => {
    const selected = props.theme.palette.blue;
    return

리액트는 정말 편리하고 좋은 라이브러리들이 많다고 느낌.

---