defaultProps로 스타일 지정하기

아래와 같이 defaultProps를 지정하고 부모속성에서 사용해보자!

props에서 받아온 값을 활용하여, css 속성을 건드려보았다.

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

const Text = ({ bold, color, size, children }) => {
    const styles = { bold, color, size };

    return (
        <>
            <P {...styles}>{children}</P>
        </>
    );
};

Text.defaultProps = {
    children: null,
    bold: false,
    color: "#222831",
    size: "14px",
};

const P = styled.p`
    color: ${props => props.color};
    font-size: ${props => props.size};
    //bold로 넘어온값이 true면 600 false면 400입니다.
    font-weight: ${props => (props.bold ? "600" : "400")};
`;

export default Text;

 

아래는 똑같은 Text 컴포넌트에 bold 속성을 주고, 주지 않았다.

 

결과물은 보시다싶이 다르다. 위 bold속성을 지정한 결과물이다.

자세히 보기위해 개발자도구로 bold속성을 지정한 엘리먼트를 확인해보자 기본적으로 설정한 color와 font-size가 들어갔다. bold 속성을 가진 엘리먼트는 font-weight가 600으로 지정이 되어있다.

 

bold라는 속성만 입력하면 어떠한 결과값이 반환되는지 알아보기 위해 콘솔을 찍어보았다.

아래의 값에 따라 bold라는 속성을 넣으면 true가 되고, font-size의 조건에 따라 font-weight를 600으로 설정될 수 있다.