[220502] styled-component 사용하기

디렉토리의 역할

src
    component - 공통적으로 들어갈 컴포넌트 모음
    hook - 훅에 관련된 내용을 넣는 컴포넌트
    pages - 화면에 출력할 영역을 넣음
    reducer - reducer 모음 (useReducer가 아닌 redux 관련)
    store - Context와 같이 전역상태를 만들어주는 디렉토리

컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다.

보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자.

 

 

 

 

 

---

styled-component 설치하기

$ npm install styled-components

 

 

 

 

styled-components 세팅하기

import styled from 'styled-components'

 

 

 

 

styled-components 사용하기

//responsive.jsx
// css 작성
const ResponsiveTemplate = styled.div`
    padding:0 1rem;
    ...
`

const Responsive = () => {
    return(
        <ResponsiveTemplate>
           //css를 적용할 코드 작성 
        </ResponsiveTemplate>
    )
}

 

 

 

 

styled-components에서 세부 스타일 적용하기

컴포넌트 안에 있는 요소에 css를 적용할때면 스타일 컴포넌트 안에 작성해도 된다.

const Wrapper = styled(Responsive)`
    .logo { font-size: 1.125rem;}      // Wrapper 안에 있는 logo
    .menu { display: flex;             // Wrapper 안에 있는 menu
        & > li { margin-left: 0.75rem; // menu 안에 있는 li
            & > a { font-size: 1.2;    // menu 안, li 안에 있는 Link
}}}`

 

같은 요소끼리 간격을 띄울때 다음 코드를 사용하면 됨.

& + & {margin-left: 1rem;}

 

 

 

 

styled-components에서 props 받아서 사용하기 - 기본형

${ () => {} }

 

 

 

 

styled-components에서 props 받아서 사용하기 - 응용형

받아온 props 안에 fullWidth값이 있다면 추가로 스타일을 적용하는 코드.

${ (props)=>{
    if(props.fullWidth === true){
        return `
            margin-top:0.75rem;
            padding : 0 0.75rem;
            width: 100%;
            font-size: 1.125rem;
        `}}



//생략화
${ props => props.fullWidth &&`
        margin-top:0.75rem;
        padding : 0 0.75rem;
        width: 100%;
        font-size: 1.125rem;
    `}