[React] Advanced React - Style

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

---

Inline Style

JSX의 inline style은 다음과 같이 두번의 중괄호 안에 적용된다.

<h1 style={{ color: 'red' }}>Hello world</h1>

• 첫 번째 중괄호 : javascript 쓸 것이라는 표시
• 두 번째 중괄호 : 객체 literal 표시

Style 변수 할당

적용해야 할 스타일이 많아지면 인라인으로만은 감당이 되지 않음
→ 스타일을 변수에 할당하여 적용시키는 방법이 있음!

import React from 'react';
import ReactDOM from 'react-dom';

const styles = {
  background: 'lightblue',
  color: 'darkred'
};

const styleMe = <h1 style={styles}>Please style me! I am so bland!</h1>;

ReactDOM.render(styleMe, document.getElementById('app'));

styles에 이미 객체 형태로 선언이 되어있기 때문에, double curly braces가 필요 없어졌다!

React에서의 스타일 선언 문법

1. 속성명은 '' 없이 쓰지만 속성값은 '' 사이에 써야한다.
2. JS에서 속성명은 소문자와 -의 조합으로 쓰지만, 리액트에선 camelCase로 쓴다.
3. 숫자에 붙는 단위는 px이 기본값이다. 그러므로 px를 생략하고 숫자형으로 써도 된다. (기본값이 px가 아닌 속성들)

• ex) 'margin-top': '20px' → marginTop: 20

const styles = {
	background: 'lightblue',
	color: 'darkred',
	marginTop: 100,
	fontSize: 50
};

Exporting Styles

재사용 가능한 스타일을 만들고 싶으면 따로 js 파일에 스타일들을 넣어둘 수 있음
그리고 이를 export하여 재사용이 가능

// facebook color palette

const blue = 'rgb(139, 157, 195)';
const darkBlue = 'rgb(059, 089, 152)';
const lightBlue = 'rgb(223, 227, 238)';
const grey = 'rgb(247, 247, 247)';
const white = 'rgb(255, 255, 255)';

export const colorStyles = {
	blue: blue,
	darkBlue: darkBlue,
	lightBlue: lightBlue,
	grey: grey,
	white: white
};

이렇게 하면 import를 통해 쓸 수 있다

import React from 'react';
import ReactDOM from 'react-dom';
import { colorStyles } from './styles';

const divStyle = {
	backgroundColor: colorStyles.lightBlue,
	height: '100%'
}