[React 숙련] Css-in-JS (styled-components) 조건부 스타일링 가능

1.Css-in-JS

▶ 자바스크립트로 css코드를 작성하는 방식

 

2.Styled Components 

* 패키지 : 리액트는 없지만, 추가로 외부에서 가져와서 사용하는 외부 라이브러리 (3rd party => npm에 모여있음)

(1) VS 코드에서 plug-in 설치필요 ( vscode-styled-components )

(2) 터미널에서 (yarn create react-app CRA 실행 후 

(3) 터미널에서 yarn add styled-components 실행 (마켓에서 해당 패키지 가져옴)(4) 파일 package.json에서 확인 가능

 import './App.css';

 import styled from 'styled-components';

 function App() {

    const StBox = styled.div`

        width: 100px;

        height: 100px;

        border: 1px solid red;

        margin: 20px;

    `;

    return <StBox>박스</StBox>;

 }

 export default App;

▶StBox = styled.html요소 `내용`

 

 

3. 조건부 스타일링 (props 사용)

▶ props : 부모 -> 자식 컴포넌트로 데이터 내려주기.

▶ props로 borderColor전달해서 각각 색깔 다른 상자 생성에 편리함

▶ 자식 스타일링 컴포넌트 : ${ props => props.borderColor }

import './App.css';

import styled from 'styled-components';

function App() {

    const StBox = styled.div`

        width: 100px;

        height: 100px;

        border: 1px solid ${(props) => props.borderColor};

        margin: 20px;

    `;

    return (

        <>

            <StBox borderColor="red">빨간박스</StBox>

            <StBox borderColor="blue">파란박스</StBox>

            <StBox borderColor="green">초록박스</StBox>

        </>

    );

}

export default App;

 

4. Map과 Switch를 사용해서 리팩토링

import './App.css';

import styled from 'styled-components';

function App() {

    const StContainer = styled.div`

        display: flex;

    `;

    const StBox = styled.div`

        width: 100px;

        height: 100px;

        border: 1px solid ${(props) => props.borderColor};

        margin: 20px;

    `;

    //박스의 색상

    const boxList = ['red', 'blue', 'green', 'black'];

    //색 넣으면 이름 반환

    const getBoxName = (color) => {

        switch (color) {

            case 'red':

                return '빨간박스';

            case 'green':

                return '초록박스';

            case 'blue':

                return '파란박스';

            default:

                return '검정박스';

        }

    };

    return (

        <StContainer>

            {boxList.map((box) => {

                return <StBox borderColor={box}>{getBoxName(box)}</StBox>;

            })}

        </StContainer>

    );

}

export default App;