7. React 스타일 적용

1. inline 스타일 사용하기

리액트에서는 JSX에 inline스타일을 적용할 수 있습니다.

JSX의 style은 객체형식으로 들어가게됩니다.

JSX는 자바스크립트로 변수명으로 ‘-’ 를 사용할 수 없기 때문에 스타일명은 camleCase로 명명해야합니다.

inline 스타일은 간단하게 사용할 수 있다는 장점이 있지만 여러 단점들이 존재하기 때문에 inline 스타일 사용은 지양하는 것이 좋습니다.

function App() {
  return (
    <div style={{backgroundColor: "blue", color:"white"}}>
      hello world
    </div>
  );
}

export default App;

재사용성이 떨어집니다: 인라인 스타일은 각 컴포넌트나 JSX 요소에 직접 작성되므로, 같은 스타일을 여러 요소에 적용하려면 매번 동일한 스타일 코드를 작성해야 합니다. 이는 코드 중복을 유발하고 유지보수를 어렵게 만듭니다.
선택자 지원이 부족합니다: 인라인 스타일은 :hover, :active 등의 CSS 선택자를 지원하지 않습니다. 또한 미디어 쿼리나 @keyframes 등의 CSS 규칙을 사용할 수 없습니다.
스타일 우선순위가 가장 높습니다: 인라인 스타일은 CSS의 다른 스타일 규칙보다 우선순위가 가장 높습니다. 따라서 인라인 스타일이 적용된 요소에 다른 CSS 클래스나 선택자를 적용하려면 !important를 사용해야 할 수도 있습니다.
코드 가독성이 떨어집니다: 인라인 스타일은 HTML과 CSS 코드가 섞여 있어 가독성이 떨어집니다. 대형 프로젝트에서는 스타일 코드와 로직 코드를 분리하는 것이 유지보수에 더 효과적일 수 있습니다.
성능 문제가 발생할 수 있습니다: 인라인 스타일은 컴포넌트가 리렌더링될 때마다 새로운 객체를 생성합니다. 이는 메모리 사용량을 증가시키고, 불필요한 리렌더링을 유발할 수 있습니다.

이러한 이유로, 인라인 스타일은 간단한 스타일링이 필요하거나, 동적으로 스타일을 변경해야 하는 경우에 주로 사용됩니다. 복잡한 스타일링이 필요한 경우에는 CSS 클래스, CSS 모듈, 스타일드 컴포넌트 등의 방법을 사용하는 것이 더 효과적일 수 있습니다.