React에서 styled-components를 이용한 Child Component 스타일링 문제 해결하기

React Styled-Components에서 자식 컴포넌트에 스타일 적용하는 방법

React와 styled-components를 사용하다보면, 스타일드 컴포넌트의 자식 컴포넌트에 스타일을 적용해야 하는 상황이 자주 발생합니다. 그러나 때로는 적용한 스타일이 의도한 자식 컴포넌트가 아닌 부모 컴포넌트로 전달되는 경우가 있습니다. 이 블로그 포스트에서는 styled-components를 사용하여 React에서 자식 컴포넌트에 제대로 스타일을 적용하는 방법을 알아보겠습니다.

문제 이해하기

해결책에 들어가기 전에, 스타일이 의도한 대로 자식 컴포넌트에 적용되지 않는 이유를 먼저 이해해 봅시다. 제공된 코드에서는 CardImage 컴포넌트 앞에 달러 기호($)가 빠져 있습니다. 이로 인해 스타일이 부모 컴포넌트에 적용되는 것입니다.

export const CardImage = styled.div`
    position: relative;
`

export const Card = styled.div`
    position: relative;
    ${CardImage}{
        max-height: 60%;
        overflow: hidden;
    }
`

덧붙여, “horizontal”이라는 프롭을 기반으로 자식 컴포넌트를 조건부로 스타일링하려고 시도하고 있는 것 같습니다. 그러나 자식 컴포넌트를 렌더링하기 전에 조건을 추가하면 스타일이 제대로 적용되지 않습니다. 이 문제도 해결해 봅시다.

해결책

조건부를 사용하여 자식 컴포넌트를 제대로 스타일링하려면 styled-components에서 ‘css’ 함수를 가져와야 합니다. 이 함수를 사용하면 styled-components 내에서 스타일 블록을 생성하고 조건을 적용할 수 있습니다.

import styled, { css } from "styled-components";

export const CardImage = styled.div`
    position: relative;
`

export const Card = styled.div`
    position: relative;

    ${props => props.horizontal && css`
        ${CardImage}{
            max-height: 60%;
            overflow: hidden;
        }
    `}
`

‘css’ 함수를 사용함으로써, 이제 ‘horizontal’ 프롭에 기반하여 CardImage 컴포넌트를 조건부로 스타일링할 수 있습니다. 스타일은 ‘horizontal’ 프롭이 true인 경우에만 적용됩니다.

대안적인 접근 방식

자식 컴포넌트마다 별도의 styled-components를 사용하려면, 코드를 약간 다르게 구조화하여 원하는 결과를 얻을 수 있습니다. 다음은 대안적인 접근 방식입니다:

const StyledCard = styled.div`
    // 부모 컴포넌트의 스타일
`;

const StyledImage = styled.img`
    // 이미지 컴포넌트의 스타일
`;

class CardImage extends Component {
    render() {
        return <StyledImage />;
    }
}

export default class Card extends Component {
    render() {
        return (
            <StyledCard>
                <CardImage />
            </StyledCard>
        );
    }
}

이 접근 방식에서는 부모 컴포넌트(StyledCard)와 자식 컴포넌트(StyledImage)를 각각 별도의 styled-components로 생성합니다. 이렇게 하면 각 컴포넌트에 적용되는 스타일에 대해 더 명확하고 더 많은 제어권을 얻을 수 있습니다.

결론

React와 styled-components를 사용하여 자식 컴포넌트에 스타일을 적용하기 위해서는 세부 사항에 유의해야 합니다. 올바른 구문을 사용하고 조건에 따라 스타일을 적용하는 방법을 이해함으로써, 의도한 자식 컴포넌트에 스타일이 올바르게 적용되도록 할 수 있습니다. 이를 통해 React 애플리케이션에서 시각적으로 매력적이고 동적인 UI를 만들 수 있습니다.

styled-components를 사용할 때 코드를 항상 재확인하고 올바른 구문을 사용하는 것을 기억하십시오. 연습을 통해 자식 컴포넌트를 스타일링하는 데 익숙해지고 React 애플리케이션의 전반적인 디자인을 더 잘 제어할 수 있게 될 것입니다.

참고 자료 : 

reactjs