9.4.3 스타일에서 props 조회하기

    styled-components를 사용하면 스타일 쪽에서 컴포넌트에게 전달된 props 값을 참조할 수 있습니다. 이전에 작성했던 Box 컴포넌트를 다시 볼까요?

    StyledComponents.js - Box 컴포넌트

    const Box = styled.div`
      /* props 넣어  값을 직접 전달해   있습니다. */
      background: ${props => props.color || 'blue'};
      padding: 1rem;
      display: flex;
    `;

     

    이 코드를 보면 background 값에 props를 조회해서 props.color의 값을 사용하게 했습니다. 그리고 color 값이 주어지지 않았을 때는 blue를 기본 색상으로 설정했습니다.

    이렇게 만들어진 코드는 JSX에서 사용될 때 다음과 같이 color 값을 props로 넣어 줄 수 있습니다.

    <Box color="black">(...)</Box>
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.