Front-End(Web)/React - 프레임워크(React, Next)

[React.js] Inline Style

ttaeng_99 2020. 11. 30. 19:19
반응형

🤷 React.js 프로그래밍을 위한 다양한 스킬들

JSX는 <html>과 매우 유사하지만, 100% 일치하다고 보긴 힘들다. (props 지정 및 할당을 위한 inline-JS{})

여기에는, CSS 스타일링도 들어가야 할 것이고, 또 각각의 컴포넌트들을 어떤 파일구조로 제작하는게 효율적일지 아래 포스팅하겠다.

📒 Inline CSS Styles

JSX에서 기본적인 CSS 스타일링을 첨가하며, 이는 다음과 같이 작성된다.(double {{}}에 주의하자!)

<h1 style={{background: 'lightblue', color: 'darkred'}}>Please style me! I am so bland!</h1>

 

스타일하고자 하는 속성이 많을 경우, 이를 Object 형태로 변수에 저장해도 된다.

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

// 속성들을 Object 형태로 변수 저장
const styles = {
  background: 'lightblue',
  color: 'darkred',
  marginTop: '100px',
  fontSize: 50			// === '50px'
}

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

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

* 참고로, React 스타일링에선 hyphenated-lowercase(margin-top)이 아닌, camelCase(marginTop)으로 쓰인다.

* React 스타일링에서 그냥 숫자는 'px'값으로 인식함.

 

- style.js 파일에서 관리

 

같은 스타일을 여러 파일에서 공유하기 위해, style.js 파일을 만들어서 style Object를 공유한다.

// Style.js

const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const background = 'pink url("https://content.codecademy.com/programs/react/images/welcome-to-my-homepage.gif") fixed';
const fontSize = '4em';
const padding = '45px 0';
const color = 'green';

// 변수에 담아서 공유!
export const styles = {
  fontFamily: fontFamily,
  background: background,
  fontSize: fontSize,
  padding: padding,
  color: color
}

 

// index.js

import React from 'react';
import { styles } from './styles'

// styles 변수에서 필요한 속성만 추출해서 새로운 변수 
const h1Style = {
  color: styles.color,
  fontSize: styles.fontSize,
  fontFamily: styles.fontFamily,
  padding: styles.padding,
  margin: 0,
};

export class AttentionGrabber extends React.Component {
	render() {
		return <h1 style={h1Style}>WELCOME TO MY HOMEPAGE!</h1>;
	}
}

이처럼, style.js에서 다양한 속성을 설정한 뒤 style 변수에 담아서 export 한다.

이후, 다른 js파일에서 이를 import 한 뒤, 필요한 속성을 다시 h1Style이라는 새로운 변수에 담아서 <h1>에 부여했다.

Javascript와 달리 숫자를 기본적으로 px로 받아들이는 React 스타일링의 특성을 숙지해야겠다.

또한, 별도 style.js를 만들에서 export 처리하는 부분도 실무에 적용되는 방법으로 잘 알고 있어야겠다.

반응형