ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React Styled Components
    Front-end/React 2023. 7. 12. 15:38
    728x90
    반응형

    Styled Components

    React styled components js파일에서 css를 사용할 수 있도록 도와주는 Css-in-js 라이브러리이다.

    styled components를 사용하기 위해 우선 설치를 해야한다.

    npm install styled-components

    터미널을 연 후 npm install styled-components 명령어를 입력하여 설치한다.

     

    설치가 완료되면 이러한 로그창이 나타난다.

     

    styled components 를 사용하기위해선 라이브러리를 불러와야한다.

     

    import styled from 'styled-components';

    import로 라이브러리를 불러 온후 변수를 만들어 styled components 문법을 사용하면된다.

     

    // 태그로 사용할 변수명을 만든다.
    let YellowBtn = styled.button`// styled.태그명 을 입력한 후 백틱`` 속에 css를 넣어준다.
      background : yellow;
          color : black;
      padding : 10px;
    `;

     

    styled components 문법을 사용하여 변수에 선언 뒤 태그로 사용한다.

    // 태그를 만들어 태그속 문자를 입력한다.
    <YellowBtn>Button</YellowBtn>

    css-in-js 로 적용된 버튼이 생성된다.

     

     

     

    반응형

     

     

     

    Styled Components Props

    정적인 css로 스타일을 설정할 수 있지만 props를 상속하여 비슷한 유형의 태그들을 중복처리 없이 만들 수있다.

    // 태그 속 props 값을 보내고 싶은 속성을 설정한다
    <YellowBtn bg="blue">Button</YellowBtn>
    <YellowBtn bg="orange">Button</YellowBtn>

    styled component 태그 props를 설정하여 값을 저장한다.

     

    props를 사용하기위해선 ${} 문법을 사용하여 선언된 props변수에서 받아 사용할 수있다.

    let YellowBtn = styled.button`
      background : ${ props => props.bg };	// 태그 속 bg라는 속성의 값을 받아와 설정한다.
      color : black;
      padding : 10px;
    `;

    각각의 태그들이 props값을 받아와 설정하여 css의 중복을 제거할 수 있다.

     

    props를 활용하여 css에 조건을 설정하여 값을 제어할 수 있다.

    let YellowBtn = styled.button`
      background : ${ props => props.bg };
      
      // props의 값에 따라 color값을 변경한다
      color : ${ props => props.bg == 'blue' ? 'white' : 'black' };	
      padding : 10px;
    `;

     

     

    기존에 선언된 styled components상속 받아서 사용할 수 있다.

    상속 받기 위해선 styled()함수인자를 기존에 변수로 선언된 styled components를 넣어 상속받는다.

    // 기존 styled components 
    let YellowBtn = styled.button`
      background : ${ props => props.bg };
      color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
      padding : 10px;
    `;
    
    // 상속받은 styled components
    // 인자속에 기존 styled components 변수를 넣어 상속한다.
    let NewBtn = styled(YellowBtn)`
      ...
    `;
    <YellowBtn bg="blue">Button</YellowBtn>
    <YellowBtn bg="orange">Button</YellowBtn>
    // 상속받은 태그
    <NewBtn bg="red">New Btn</NewBtn>

     

    728x90
    반응형

    'Front-end > React' 카테고리의 다른 글

    React Lifecycle & useEffect - 2  (0) 2023.07.12
    React Lifecycle & useEffect - 1  (0) 2023.07.12
    React Router URL 파라미터  (0) 2023.07.12
    React useNavigate & Nested Routes & Outlet  (0) 2023.07.11
    React Routes & Route & Link  (0) 2023.07.11
Designed by Tistory.