-
[React.js] Inline StyleFront-End(Web)/React - 프레임워크(React, Next) 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 처리하는 부분도 실무에 적용되는 방법으로 잘 알고 있어야겠다.
반응형'Front-End(Web) > React - 프레임워크(React, Next)' 카테고리의 다른 글
[React.js/Side Lib.] PropTypes (0) 2020.12.01 [React.js] Components Seperation (0) 2020.12.01 [React.js] Stateful vs Stateless Components (0) 2020.11.29 [React.js] Hooks - useEffect() (0) 2020.11.28 [React.js] Hooks - useState() (0) 2020.11.27