JSX는 React 애플리케이션에서 사용되는 JavaScript의 확장 문법으로, HTML처럼 보이는데 실제로는 JavaScript 코드로 컴파일됩니다. JSX에서는 컴포넌트에 인라인 스타일을 쉽게 적용할 수 있습니다. 이번 포스트에서는 TypeScript와 JSX를 사용하여 React 컴포넌트에 인라인 스타일을 적용하는 방법에 대해 알아보겠습니다.

Inline Style 사용하기

JSX에서 컴포넌트에 인라인 스타일을 적용하려면 style 속성을 사용합니다. style 속성을 객체로 지정하여 해당 객체에 CSS 스타일을 정의할 수 있습니다.

예를 들어, 다음과 같이 JSX에서 div 요소에 인라인 스타일을 적용할 수 있습니다.

import React from 'react';

const MyComponent: React.FC = () => {
  const containerStyle = {
    background: 'lightblue',
    padding: '20px',
    border: '1px solid blue'
  };

  return (
    <div style={containerStyle}>
      <p>This is a sample text with inline styles</p>
    </div>
  );
};

export default MyComponent;

위 예제에서는 containerStyle 객체를 만들어 div 요소의 style 속성에 적용했습니다.

TypeScript와 함께 사용하기

TypeScript를 사용하여 JSX에서 인라인 스타일을 작성할 때, 스타일의 속성명은 camelCase로 작성해야 합니다. 예를 들어, CSS에서 background-color는 JSX에서는 backgroundColor로 작성해야 합니다.

또한 스타일 값을 할당할 때에는 문자열 형태가 아니라 객체 형태로 지정해야 합니다.

const containerStyle = {
  backgroundColor: 'lightblue',
  padding: '20px',
  border: '1px solid blue'
};

이처럼 TypeScript와 JSX를 함께 사용하여 컴포넌트에 인라인 스타일을 적용할 수 있습니다.

결론

JSX에서 컴포넌트에 인라인 스타일을 적용하는 방법에 대해 알아보았습니다. 인라인 스타일을 활용하여 React 애플리케이션을 보다 동적이고 효과적으로 디자인할 수 있습니다. TypeScript와 함께 사용할 때에도 주의할 점을 기억하여, 보다 안전하고 효율적으로 코드를 작성할 수 있습니다.

참고 자료:

• React 공식 문서
• TypeScript 공식 문서