🎨 styled-components 사용의 장점 – 전체 프로젝트에서 효율적인 스타일링

🔍 왜 styled-components를 선택했나?

이번 프로젝트에서 styled-components를 사용한 이유는 CSS와 JS를 결합하여 더 효율적인 코드 관리와 유지보수를 이루기 위해서였다. 코드가 점점 커지고 복잡해짐에 따라 컴포넌트화된 스타일링이 필요했기 때문이다. 스타일과 구조가 분리된 전통적인 방식에서 벗어나, 각 컴포넌트 내에서 직접 스타일을 관리하면 더 직관적이고 유지보수가 용이해진다.

💻 styled-components를 활용한 코드 예시: BottomNav

먼저, BottomNav 컴포넌트를 예로 들어보자. 네비게이션 바에 각 아이콘의 활성화 상태에 따라 동적 스타일을 적용했다. 아래와 같은 방식으로 styled-components를 활용해 각 컴포넌트의 스타일을 정의하고 적용했다:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

import home from '../../assets/home.png';
import community from '../../assets/community.png';
import sell from '../../assets/sell.png';
import chatting from '../../assets/chatting.png';
import profile from '../../assets/profile.png';

const Wrapper = styled.nav`
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 5%;
    height: 5%;
    overflow: hidden;
    border-top: 3px solid grey;
    padding-top: 5%;
    padding-bottom: 2%;
    display: flex;
    justify-content: space-between;
`;

const NavLink = styled(Link)`
    text-align: center;
    width: 20%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

interface NavItemProps {
    isActive: boolean;
}

const NavItem = styled.img<NavItemProps>`
    width: 30%;
    height: auto;
    filter: ${({ isActive }) => (isActive ? 'grayscale(0%) brightness(0.4)' : 'grayscale(100%) brightness(1)')};
    transition: filter 0.3s;
`;


const BottomNav: React.FC = () => {
    const [activeNav, setActiveNav] = useState<number>(1);

    return (
        <Wrapper>
            <NavLink to="/home" onClick={() => setActiveNav(1)}>
                <NavItem src={home} isActive={activeNav === 1} />
            </NavLink>
            <NavLink to="/community" onClick={() => setActiveNav(2)}>
                <NavItem src={community} isActive={activeNav === 2} />
            </NavLink>
            <NavLink to="/sell" onClick={() => setActiveNav(3)}>
                <NavItem src={sell} isActive={activeNav === 3} />
            </NavLink>
            <NavLink to="/chatting" onClick={() => setActiveNav(4)}>
                <NavItem src={chatting} isActive={activeNav === 4} />
            </NavLink>
            <NavLink to="/profile" onClick={() => setActiveNav(5)}>
                <NavItem src={profile} isActive={activeNav === 5} />
            </NavLink>
        </Wrapper>
    );
};

export default BottomNav;

✨ styled-components의 장점

styled-components는 여러 가지 장점을 제공한다. 프로젝트 전반에 걸쳐 이점을 최대화할 수 있었다.

• 컴포넌트화된 스타일링

스타일과 컴포넌트를 하나로 묶는 방식을 통해 코드의 직관성이 높아졌다. 각 UI 컴포넌트의 스타일을 해당 컴포넌트 파일에 정의하므로, 한 파일에서 스타일과 로직을 모두 관리할 수 있었다. 이를 통해 스타일을 변경하거나 수정할 때 코드의 가독성이 높아졌고, 유지보수하기 쉬워졌다.

• 동적 스타일링

styled-components는 props를 통한 동적 스타일링이 가능하다. 예를 들어, NavItem 컴포넌트는 isActive라는 props를 받아서, 아이콘의 활성화 상태에 따라 grayscale과 brightness를 조정했다. 이런 방식으로 각 컴포넌트의 상태 변화에 따라 즉각적으로 스타일을 반영할 수 있었다.

• 코드 중복 최소화

재사용 가능한 스타일 컴포넌트를 만들어서 코드 중복을 최소화했다. 예를 들어, NavLink와 NavItem 같은 공통적인 스타일은 하나의 컴포넌트로 정의하여 다른 네비게이션 항목에도 재사용할 수 있었다. 덕분에 코드가 간결해지고, 스타일을 변경할 때 한 곳만 수정하면 되므로 유지보수가 용이해졌다.

• CSS 클래스 네이밍 충돌 방지

styled-components는 고유한 클래스명을 자동으로 생성한다. 따라서 CSS 클래스 네이밍에서 발생할 수 있는 충돌 문제를 방지할 수 있었고, 각 컴포넌트의 스타일이 다른 컴포넌트와 겹치지 않도록 보장했다.

• 가독성 향상

스타일이 컴포넌트와 함께 정의되어 있기 때문에, 다른 개발자가 해당 컴포넌트를 보고 스타일을 즉시 파악할 수 있다. 이는 협업 환경에서 가독성을 크게 향상시키고, 이해도를 높이는 데 기여한다.

🔄 지금 생각했을 때 개선할 점

스타일 재사용성: 코드 중복을 줄였지만, 아직 몇몇 스타일을 상수화하여 전역적으로 재사용하는 부분이 부족하다. 예를 들어, 아이콘 크기나 색상, 글자 크기등을 상수로 정의해두면 더 효율적일 것이다.

⚡ 결론

전체 프로젝트에서 styled-components를 사용함으로써 코드가 훨씬 더 간결하고 유지보수가 용이해졌다. 컴포넌트화된 스타일링과 동적 스타일 적용 덕분에 사용자 경험도 향상되었으며, UI 변경이 있을 때마다 간편하게 수정할 수 있었다. 앞으로도 이 방식을 활용해 다른 컴포넌트들에도 일관되게 적용하고, 더 효율적인 코드를 만들어나갈 것이다.