10일차 스타일드 컴포넌트 - 생활코딩! React 리액트 프로그래밍

이번 파트부터는 하위 챕터 없이 파트마다 한 주제를 완결적으로 다룬다.

각 파트가 이렇게 짧아도 되나 싶은데 일단 이번 파트 'Styled Component' 는 아주 간단했다.

가벼운 실습만으로 핵심을 모두 파악할 수 있었다.

저자께서 후속 수업을 준비한다는데, 저자께서 알려주신 서말(https://seomal.com/map/1/234)에 들어가보니 22년 이후로 텅 비어 있었다. 그만큼 이 모듈의 사용법이 매우 쉽다는 뜻으로 생각해도 되겠다.

 

일단, 실습 코드를 붙여본다.

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
import styled from 'styled-components'
const SimpleButton = styled.button`
  color: white;
  background-color: green;
`;
const LargeButton = styled(SimpleButton)`
  font-size: 50px;  
`;
const ReactButton = props => {
  return <button className = {props.className}>{props.children}</button>
};
const ReactLargeButton = styled(ReactButton)`
  font-size: 50px;
`;
const PrimaryButton = styled.button`
  color:${ props => props.primary ? 'white' : 'black'};
  background-color:${ props => props.primary ? 'blue' : 'gray'};
`;
 
 
function App() {
  return (
    <div>
      <SimpleButton>Simple</SimpleButton>
      <LargeButton>Large</LargeButton>
      <ReactButton>React</ReactButton>
      <ReactLargeButton>ReactLarge</ReactLargeButton>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}
 
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

 

스타일드 컴포넌트는 사실 상 이게 다라고 해도 무방하더라.

백틱(`)을 이용한 Tagged Template Literal 문법을 십분 활용한 점이 캬... 역시 JS라는 생각. (그 옜날 JQuery의 기발함이 문득 떠오른다.)

 

 

사족으로... 내가 프로젝트를 맡았을 때 FE 쪽 기술스택 결정이 필요했고, 그 중 CSS 프레임워크 결정도 필요했는데  FE개발자에게 여러가지 설명 들었고 일단 프로토타이핑 단계 때는 스타일드 컴포넌트와 이모션(Emotion) 중에서 이모션, 최종 상용 레벨에선 Tailwind로 결정했었다. 즉, 현업에서 스타일드 컴포넌트를 접해볼 기회는 의사결정 단계 외에는 없었다.

무슨 뜻이냐면 일단 근래 CSS-in-JS는 사양 추세였고, 그 중에서도 스타일드 컴포넌트는 모던한 개발자들에게는 더욱 기피 대상이었던 것 같다.

어쨌든, 이 때도 웹개발 분야의 너무 급박한 변화에 얼이 빠졌던 기억이 난다.