[React] styled-components 모듈 사용하기(조건 , 외부,상속)

 

 

먼저 Styled-components를 install해야 한다.

vsCode를 사용하시는 분들은 아래 확장팩을 추가하시면 좀 더 편하게 styled-components를 사용하실 수 있습니다.

아래부터 예시 소스입니다.

라인별 설명은 주석처리로 상세하게 해 놓았습니다.

 

총 세 가지 예시입니다.

• styled-components 사용 예시
• styled-components 외부의 javascript 코드에 바로 접근하는 예시
• styled-components 상속 예시

 

Styled-components 예시 소스

isLoaded가 false냐 true냐 조건에 따라 화면에 complete 메시지를 보여주거나 숨겨주는 소스입니다.

import React from "react";
import "./App.css";
import styled from "styled-components" // style-component 모듈 사용

// div함수를 받아 뒤 템플릿 리터럴로 함수로 받기 때문에 h1함수에 대해서 바로 css를 동적으로 선언 가능.
// h1자리에는 div, span, image 등 다 올 수 있다.
// 조건에 따라 css를 다르게 줄 수 있다.
const Component = styled.div`
    display: ${props => props.isLoaded ? 'block' : 'none'}
`

function App() {
    return (
        // 조건별로 랜더링
        // ={true} 생략 가능
    <Component isLoaded>complete</Component>
    )
}

export default App;

IsLoaded를 false로 처리하면

Props뿐만 아니라 외부의 자바스크립트 코드에도 바로 접근 가능

import React from "react";
import "./App.css";
import styled from "styled-components" // style-component 모듈 사용

// props뿐만 아니라 외부의 javascript 코드에도 바로 접근할 수 있다.
const color = `red`;

// div함수를 받아 뒤 템플릿 리터럴로 함수로 받기 때문에 h1함수에 대해서 바로 css를 동적으로 선언 가능.
// h1자리에는 div, span, image 등 다 올 수 있다.
// 조건에 따라 css를 다르게 줄 수 있다.
const Component = styled.div`
    display: ${props => props.isLoaded ? 'block' : 'none'};
    color: ${color};
`

function App() {
    return (
        // 조건별로 랜더링
        // ={true} 생략 가능
    <Component isLoaded>complete</Component>
    )
}

export default App;

기존 요소들을 그대로 가져오고 추가된 몇 가지 요소만 새로 작성하고 싶은 경우

기 작성된 요소를 그대로 상속 받고 추가할 요소들을 작성하는 방법이 있다.

 

import React from "react";
import "./App.css";
import styled from "styled-components" // style-component 모듈 사용

// props뿐만 아니라 외부의 javascript 코드에도 바로 접근할 수 있다.
const color = `red`;

// div함수를 받아 뒤 템플릿 리터럴로 함수로 받기 때문에 h1함수에 대해서 바로 css를 동적으로 선언 가능.
// h1자리에는 div, span, image 태그 등 다 올 수 있다.
// 조건에 따라 css를 다르게 줄 수 있다.
// 기존의 css는 자바스크립트와 완전히 분리되어 관리가 되었다.
// JSX 문법으로 html 소스가 function 안에서 작성하는 것과 비슷하다.
const Component = styled.div`
    display: ${props => props.isLoaded ? 'block' : 'none'};
    color: ${color};
`

// 기존 요소들을 그대로 가져오고 추가된 몇 가지 요소만 새로 작성하고 싶은 경우
// 여기서 Wrapper 컴포넌트는 다른 컴포넌트를 감싸는 최상위 컴포넌트
// Wrapper는 기존의 Component 요소를 그대로 상속받고 추가할 요소들을 작성한다.
const Wrapper = styled(Component)`
    background-color: gray;
    margin: 20px;
`

function App() {
    return (
    // 선언된 Wrapper 사용
    // Wrapper로 기존의 컴포넌트를 감쌌고 Wrapper가 없다면 flagment로 감쌀 수 있다.
    // Wrapper는 Component를 상속 받아 Component의 모든 속성을 갖고 있기 때문에 dispay 조건인 loaded가 있어야 실제로 display 처리 됨
    <Wrapper isLoaded>
        {/* 조건별로 랜더링
        sLoaded의 ={true} 생략 가능 */}
        <Component isLoaded>complete</Component>
    </Wrapper>
    )
}

export default App;