[React] 스타일링

인라인 스타일링

- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.

- 스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있는데, 이러한 이름은 - 를 제거하고 카멜 표기법으로 작성해야 한다. (backgroundColor)

 

import './App.css';

function App() {
    const name = '리액트';
    const style = {
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',       // font-size -> fontSize
        fontWeight: 'bold',     // font-weight -> fontWeight
        padding: 16             // 단위 생략 시 px로 지정된다.
    };
    return <div style={style}>{name}</div>;
}
export default App;

 

- 위는 style 객체를 미리 선언하고 div의 style 값으로 지정했는데, 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 된다.

 

import './App.css';
function App() {
    const name = '리액트';
    return <div style={{
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',
        fontWeight: 'bold',
        padding: 16
    }}>{name}</div>;
}
export default App;

 

스타일링 결과

 

className

- 일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정한다.

- 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

 

- JSX를 작성할 때 CSS 클래스를 설정하는 과정에서 className이 아닌 class 값을 설정해도 스타일이

 적용되기는 한다. 그러나 그렇게 사용하면 브라우저 개발자 도구의 Console 탭에 다음과 같은 경고가 나타난다.

 

class 사용 시 나타나는 경고

 

- 이전에는 class로 CSS 클래스를 설정할 때 오류가 발생하고 CSS 클래스가 적용되지 않았는데, 리액트 v16 이상부터는 class를 classname으로 변환시켜 주고 경고를 띄운다.