styled-component가 웹표준을 향상시킨다고?

응 맞다! styled-component는 웹표준을 향상시킨다.

왜 그럴까?
styled-components가 웹표준을 해치지 않는 이유는, 결국 styled-components가 생성하는 스타일 코드는 일반적인 CSS와 동일하기 때문이다. 생성된 CSS는 HTML 문서 내의 <style> 태그에 포함되며, 웹 브라우저가 이를 해석하여 렌더링한다.
아주 똘똘한 녀석이다
난 아직 styled-component 사용이 어색하니 오늘 과제한 내용을 포스팅 해보겠다.

styled-component가 뭔데?

styled-component는 리액트에서 css스타일을 작성하고 관리하기 위한 라이브러리 이다
기존의 css를 사용하는 방법과 달리, 'styled-components' 는 javascript 코드내에서 css 스타일을 작성한다

import styled from 'styled-components';

const Button = styled.button `
  color: white;
  background-color:blue;
  border-radius: 4px;
  padding:8px;
  font-size: 16px;
`;

function App(){
 return (
  <div>
   <Button>Click me</Button>
  </div>
  )
}

위 코드에서 'styled.button' 을 이용하여 'Button' 컴포넌트를 정의하고, 템플릿 리터럴 문법(``)을 사용하여 css 스타일을 작성한다
그리고, 'Button' 컴포넌트를 렌더링할때 css가 적용된 채로 렌더링된다.

+
styled-component는 props 에 따라 동적으로 스타일을 변경할 수도 있다.
그래서 반응형 디자인,테마 구현이 가능하다

다음의 코드는 styled-component를 이용해서 웹표준에 맞게 작성한 js파일이다

import styled from "styled-components"

const FontSizeSpan = styled.span`
  font-weight: 700;
  font-size: ${props => props.size ||'1rem'};
`
const MarginBottom = styled.li `
 margin-bottom: ${props => props.br * 20 + 'px'};
`
const Stylings = styled.li`
 ${props => props.styling}
`
const StylingCircle = styled.li`
 ${props => props.styling};
  margin-bottom : ${props=> props.br * 20 +'px'};
`
const BackColor = styled.div`
 ${props => props.styling};
 margin-bottom : ${props =>props.br *20 + 'px'};
`
const ColorGray = styled.h1`
 ${props => props.styling};
`
const Page02 = () => {
    return (
        <article>
            <h1>문제 2 : 자주 틀리는 마크업</h1>
            <p>자주 틀리는 HTML 요소의 사용법들을 고쳐봅시다. 웹 표준을 저해하는 사용법이지만, 화면 상으로는 큰 문제가 없기 때문에 의외로 자주 발견할 수 있는 예시들 이기도 합니다.<br />
            우측 문제 가이드와 유어클래스 콘텐츠를 참고하여 웹 표준에 맞는 마크업으로 바꾸세요.</p>
            <li>아래 자주 틀리는 마크업 예시들을 웹 표준에 맞게 수정하세요.</li>
            <li>예시 외에도 애플리케이션 내에 틀리게 사용한 마크업이 있습니다. 찾아서 수정해보세요.</li>
            <section>
                <h2>틀린 마크업 예시</h2>
                <section>
                    <h3>예시 1</h3>
                    <ul>
                    <li>
                        <div>
                        <label>어떻게 틀렸을까요?</label>
                        </div>
                    </li>
                    <li>
                        <p>
                            <em>모두 같은 종류의 실수를 하고 있습니다.</em>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <strong>틀린 이유를 찾아서 수정해보세요.</strong>
                        </h4>
                    </li>
                </ul>
                </section>
                <section>
                <h3>예시 2</h3>
                <ul>
                    <li>
                        <strong>화면만 보면 틀렸다는 사실을 인지하기 어렵습니다.</strong>
                    </li>
                    <li>
                        <em>
                            Element탭이나 Visual Studio Code에서 소스 코드를 확인하세요.
                        </em>
                    </li>
                </ul>
                </section>
                <section>
                <h3>예시 3</h3>
                <ul>
                    <li>
                    <FontSizeSpan size="1.5rem">글씨 크기를 조절하고 싶을 땐</FontSizeSpan>
                    </li>
                    <li>
                    <FontSizeSpan size="0.5rem">요소 종류를 사용하는 것이 아니라</FontSizeSpan>
                    </li>
                    <li>
                    <FontSizeSpan>CSS를 이용해주세요.</FontSizeSpan>
                    </li>
                    <li>
                    <FontSizeSpan size ='1.8rem'>요소의 의미와 맞지 않습니다.</FontSizeSpan>
                    </li>
                </ul>
                </section>
                <section>
                <h3>예시 4</h3>
                <ul>
                    <MarginBottom br={2}>요소 사이에 간격을 주고 싶을 때에도</MarginBottom>
                    <MarginBottom br={4}>CSS를 이용해주세요.</MarginBottom> 
                    <MarginBottom br={1}>태그의 존재 의의와 맞지 않습니다.</MarginBottom>
                    <li>요소 사이의 간격을 조절할 때가 아니라 줄 바꿈을 할 때 사용해주세요.<br />
                    이렇게 사용해주시면 됩니다.</li>
                </ul>
                </section>
                <section>
                <h3>예시 5</h3>
                <ul>
                    <Stylings styling={{"color": "blue"}}>스타일 속성을 적용하고 싶을 때에는</Stylings>
                    <Stylings styling={{"font-size": "2rem"}}>태그 안에 style 속성을 작성하는 방법인</Stylings>
                    <Stylings styling={{"font-weight": "900"}}>인라인 스타일링을 사용하지 마세요.</Stylings>
                    <Stylings styling={{"text-shadow":"3px 3px 3px yellow"}}>CSS 코드를 따로 작성하는 것이 웹 표준에 맞는 사용법입니다.</Stylings>
                </ul>
                </section>
                <section>
                <h3>종합 예시</h3>
                    <label>
                    <ul>
                        <StylingCircle styling={{"list-style":"circle"}} br={2}><strong>위 예시를 종합적으로 섞어놓았습니다.</strong></StylingCircle>
                    </ul>
                        <BackColor styling={{"background-color":"rgba(120,0,250,0.2)"}} br={1}><strong>이 정도 되면 보기만해도 불편하실 것 같습니다.</strong></BackColor>
                        <ColorGray styling={{"color":"gray"}}><em>틀린 곳을 찾아서 수정해보세요.</em></ColorGray>
                    </label>
                </section>
            </section>
        </article>)
}

export default Page02

특히 하면서 인상적이 었던건 return 문에 컴포넌트를 작성할때 css를 주는 부분의 속성이 달라도
styling이라고 묶어서 위에서 하위컴포넌트가 props.styling로 받을 수 있다는 것이다.

그리고 <br>을 남발하지 않도록
사용한 br의 갯수를 props로 정의하고, 하위컴포넌트에서 props.br로 내려받았다

기존의 html 태그를 이용해서 컴포넌트를 만들고, 그 컴포넌트에 props를 받아와서 스타일링을 자유자재로 할 수 있었다