[React] 📚 컴포넌트 스타일링

📋 기억하고 싶은 내용

• style 어트리뷰트는 CSS 문자열 대신 캐멀 케이스 프로퍼티를 가진 JavaScript 객체로 받아들인다.

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

• React는 특정 숫자 인라인 스타일 프로퍼티는 “px” 접미사를 자동으로 추가한다. “px”이 아닌 다른 단위를 사용하길 원한다면, 원하는 단위와 함께 값을 문자열로 지정해야 한다.

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

• style 어트리뷰트를 스타일링의 주요 수단으로 사용하는 것은 일반적으로 권장되지 않는다.
• CSS-in-JS는 외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미한다.
• 컴포넌트 위주의 프로젝트라면 Styled Components 방식이 좋고, 인터렉티브한 애니메이션을 많이 넣는 다면 CSS Modules 방식이 좋다.

🔗 참고 래퍼런스

• style - React Doc
• 스타일링과 CSS - React Doc
• CSS Modules
• Adding a CSS Modules Stylesheet - Create React App Doc
• STATE OF CSS
• Basics - styled-components Doc