왜 styled-components를 사용하는 거지?

지금까지 사용해본 결과 개인적으로 느끼는 점은

1. 기존의 명시법 ~<태그명 className="이것이 의미하는 것의 이름" ...>~보다 깔끔하고 직관적이다.
2. props를 이용한 가변 스타일링이 더 용이하다.
3. 확장성, 재사용성이 좋다.

라는 것이다. .css 파일을 따로 분리하지 않아도 된다는 것은 두말할 것 없고!

문법

아주 간단해서 처음 사용해도 쓸 수 있다 //착각이었다!

먼저 import styled from 'styled-components' 해주고

const 이름=styled.태그명`스타일`

주의할 점은 반드시 render 메소드 밖에서 선언해야한다는 것 정도.

가변스타일링에서 문제

styled-components를 사용하면서 편리하다고 했던 가변 스타일링 도중 문제가 생겼다.

import React, {useState} from 'react'  
import styled from 'styled-components'

const TodoItem =({id, contents, is\_com, is\_del})=>{  
const \[isCompleted, setIsCompleted\] = useState(is\_com===1?true:false)

return(
    <div>               
        <TodoContents color={is_com}>
            {contents}
        </TodoContents>
    </div>
);

}

const TodoContents=styled.div `color: ${(props) => props===1?"blue":"black"}`

export default TodoItem;  

위의 코드에서 가변 스타일링이 전혀 적용되지 않는 다는 것이다.
다른 블로그들에서 봤을 때 대부분 삼항연산자에 조건을 달지 않고 사용하는데 그게 이유인가?
스타일컴포넌트에 props가 있는 경우와 없는 경우만 체크하는 걸까?

찝찝한 해결

스타일컴포넌트의 props를 이용한 삼항연산자에 대한 처리는 여전히 숙제
약간 다른 방법으로 위에서 주고 싶은 효과는 만들어 냈다✌

import React, {useState} from 'react'
import styled from 'styled-components'

const TodoItem =({id, contents, is_com, is_del})=>{  
    const [isCompleted, setIsCompleted] = useState(is_com===1?true:false)  

    return(
        <div>             
            {isCompleted?
                <TodoContents completed>{contents}</TodoContents>
            :
                <TodoContents uncompleted>{contents}</TodoContents>
            }
        </div>
    );
}

const TodoContents=styled.div`
    color: ${props => {
        return props.completed?"gray":"black"
    }}
`

export default TodoItem;

isCompleted 변수 값에 따른 렌더링은 JSX+styled-components를 통해 구현했다.

먼저 isCompleted값이 true인 경우와 아닌 경우를 나눠 스타일컴포넌트의 props를 달리줘서 처리하는 식으로 만들었다.

마음에 쏙 드는 코드는 아니지만 나중에 다시 연구해보는 걸로!✨