[리액트 / React] 스타일 적용 / 인라인 스타일 / CSS 클래스네임 / classnaems 라이브러리

  인라인 스타일

• 리액트는 html과 달리 객체로 스타일 속성 값을 지정해주어야 한다.
• css에서 -가 들어가는 것은 카멜케이스로 작성해야 한다.
• 인라인에 들어가는 내용이 많으면 아래 코드처럼 작성하자.

const style = {
	backgroundColor: 'blue';
}

fuction Button({ childeren, onClick}) {
	return(
		<button style={style} onClick={onClick}>
			{children}
		</button>
	);
}

export default Button;

• 위 코드를 아래처럼 작성할 수 있다. (들어가는 내용이 적을 때 사용)

fuction Button({ childeren, onClick}) {
	return(
		<button style={{ backgroundColor: 'blue' }} onClick={onClick}>
			{children}
		</button>
	);
}

export default Button;

 

 

 

 

  스타일을 중복되게 사용하는 법

스프레드 문법을 사용하기.

const basicStyle = {
	padding: '10px 5px',
	cursoir: 'pointer'
}

const blueStyle = {
	...basicStyle,
	color: 'blue'
}

const redStyle = {
	...basicStyle,
	color: 'red'
}

 

 

 

 

  스타일로 조건 연산자 넣기

const basicStyle = {
	padding: '10px 5px',
	cursoir: 'pointer'
}

const blueStyle = {
	...basicStyle,
	color: 'blue'
}

const redStyle = {
	...basicStyle,
	color: 'red'
}

fuction Button({ childeren, onClick, color}) {
	const style = color === 'red' ? redStyle : blueStyle;
	return(
		<button style={style} onClick={onClick}>
			{children}
		</button>
	);
}

export default Button;

 

 

 

 

  CSS 클래스네임 사용하기

• css파일에 정의된 클래스명을 className prop에 문자열로 넣어주면 된다.
• 재사용성을 위해 className prop을 부모 컴포넌트에서 받으면 더 좋다.
• margin과 같이 요소의 외부적으로 영향을 끼치는 스타일 속성은 부모 컴포넌트에서 다루는 것이 좋다.

/* index.css */

body {
	background-color: 'blue',
	color: #fff;
}

// index.js

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

ReactDOM.render(<App />, document.getElementById('root'));

 

이 페이지의 조건연산자 코드에 css파일을 적용한다고 하면,

/* Butto.css */
.Button {
	padding: '10px 5px',
	cursoir: 'pointer'
}

.Button.blue = {
	...basicStyle,
	color: 'blue'
}

.Button.red = {
	...basicStyle,
	color: 'red'
}

// Button.js

import './Button.css';


// color 값에 blue를 적어주는 건 컬러값이 없을 때 undefined가 될 수도 있으니 기본값 넣어주는 것.
fuction Button({ childeren, onClick, color = 'blue'}) { 
	const classNames = `Button ${color}`; // 공백 있음! 공백이 없으면 하나의 클래스네임이 됨.
	return(
		<button className={classNames} onClick={onClick}>
			{children}
		</button>
	);
}

export default Button;

 

 

 

 

  classnames 라이브러리를 사용하기

터미널에서 npm install classnames을 입력하고 설치한 다음에, 아래 코드처럼 import로 불러온다.

import classNames from 'classnames';

function Button({ isPending, color, size, invert, children }) {
  return (
    <button
      className={classNames(
        'Button',
        isPending && 'pending',
        color,
        size,
        invert && 'invert',
      )}>
     { children }
   </button >
  );
}

export default Button;