JSX (최종)

- 개요

JSX 문법에 CSS를 추가하여 웹페이지에 스타일을 적용하는 방법을 알아본다

스타일을 적용하는 방식은 JS를 사용한 CSS in JS 방식이다

 

1) JSX에서의 스타일링 적용 - JS 오브젝트의 사용

import ReactDOM from 'react-dom';

// JS에서 CSS 스타일링을 적용하는 코드
// style="position:relative;width:400px"

const element = (
  <div
    style={
        {
            position: 'relative',
            width: 400,
            height: 1000,
            backgorund : '#f1f1f1f1'
        }
    } 
  />
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

JSX 코드에서 CSS 스타일링을 적용하기 위해서는 JS 오브젝트를 사용한다

위의 JSX 컴포넌트에서 첫 번째 중괄호는 JSX에 JS 오브젝트를 넣기 위함이고,

두 번째 중괄호는 JS 오브젝트를 정의한다

 

2) 스타일링 오브젝트의 재사용

import ReactDOM from 'react-dom';

const roundBoxStyle = {
  position: 'absolute',
  top: 50,
  left: 50,
  width: '50%',
  height: '200px',
  padding: 20,
  background: 'rgba(162,216,235,0.6)',
  // 3. JSX에서 속성은 camelCase로 작성 / JS에서 border-radius로 작성
  borderRadius: 50
};

const element = (
    <div style={roundBoxStyle}>Hello1</div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

위와같이 JS 스타일링 오브젝트를 변수로 생성하여 여러개의 JSX 컴포넌트에서 사용할 수 있다

변수로 정의된 오브젝트에서 속성을 정의하는 경우 camelCase로 작성해야 한다

 

 

렌더링 결과는 위와 같다

선언한 스타일링 오브젝트를 사용하여 JSX 컴포넌트의 스타일을 설정하였다

 

3) 클래스를 사용한 스타일링

// index.css 파일
.highlight {
  color: #fff;
  font-weight: bold;
  font-size: 36px;
}

 

// index.js 파일
import './index.css';
import ReactDOM from 'react-dom';

const element = (
  <div style={{ ...roundBoxStyle, top: 350 }}>
    <div className="highlight">Hello2</div>
  </div>
);

ReactDOM.render(element, document.getElementById("root"));

 

스타일링 오브젝트를 클래스로 정의하고 정의한 클래스를 className 속성에서 사용한다

JSX에서는 JS와 다르게 class가 아닌, className 속성을 사용한다

 

 

렌더링 결과는 위와 같다

index.css 파일에서 정의한 highlight 클래스를 사용하여 JSX 컴포넌트에 스타일링을 적용하였다

 

4) 조건부 스타일링

import './index.css';
import ReactDOM from 'react-dom';

const element = (
    <div style={{ ...roundBoxStyle, top: 650 }}>
      <div
        className={
          1 + 1 === 2 ? 'highlight' : false
        }
      >
        Hello3
      </div>
    </div>
);

ReactDOM.render(element, document.getElementById("root"));

 

조건문을 사용하여 조건에 따라 스타일링을 적용할 수 있다

위의 코드에서는 비교연산자를 사용하여 값이 참이라면 highligt 클래스를 스타일에 적용한다

 

 

렌더링 결과는 위와 같다

1 + 1 연산의 값이 2이므로 highlight 클래스로 정의된 스타일링 오브젝트를 적용한다