Archive

React.js Styling Components & Elements

28 Jan 2021 | React

React.js Styling Components & Elements

  1. Inline CSS styling

    • Inline 방식으로 CSS 스타일링을 할 수 있다
    • 객체 생성 후 css문법을 적는데 주의할 점은 css가 아니라는것.
    • 예시: background-color => backgroundColor (Camle표기법)
    • 예시: backgroundColor: ‘white’, 값은 문자열로 적어야한다
    • html 태그에 style={style}로 주입한다
    • 문제점은 css상에서 가능한 hover 등 pseudo effect를 넣을 수 없다는것
    • 하지만 inline 방식의 style은 객체를 이용하기에 조건에 맞게 객체의 요소를 편집함으로서 동적인 effect 효과를 낼 수 있다
    • re-render시에 편집된 style을 다시 태그에 주입하는 것을 이용한 것이라 state나 props가 바뀌어 re-render가 일어나야한다는 전제조건이 필요
    const style = {
    backgroundColor: 'green'
}
   
<button style={style}></button> //버튼이 있다고 하자
   
if(!isStop) {
    style.backgroundColor = 'red';
}
// 이와 같이 조건에 맞게 객체의 요소를 직접 편집할 수 있다


  2. Change the className

    • 리액트에서 {}의 의미는 Javascript를 이용한다는 것이다★
    • 즉, 뭐든 바닐라 js로 하기 나름인건데 className 역시 {}를 이용해 얼마든지 변경이 가능하다
    • className은 css와도 연관이 되므로 className이 바뀔때마다 스타일링이 바뀌는 환상적인 경험을 할 수 있다
    /**
다음과 같은 CSS가 있다고 하자
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
*/
   
// 클래스이름을 저장할 빈 배열 생성
const classes = [];
   
// 조건에 맞춰서 배열을 변경
if (this.state.length <= 2) {
    classses.push('red', 'bold');
}
   
// className=red bold가 되므로 css가 적용이 된다
<div className={classes.join(' ')}>
	<p>어쩌구</p>
</div>


  3. Radium

    • Inline 방식의 스타일 관리를 해주는 멋진 패키지가 있다
    • 이것을 이용하면 hover와 같은 pseudo selector와 media query도 inline으로 적용이 가능하다
    • npm install –save radium 설치 고고
    • radium을 사용하려면 import와 export 설정이 필요하다
    • pseudo selector는 ‘ ‘로 감싸서 사용
    import Radium from 'radium'; // import 필요
   
const app = () => {
    const style = {
        ':hover': 'salmon' // 'pseudo selector'
    }
}
   
export default Radium(app); // Radium 메소드로 export
    • media query도 사용법은 위와 같다
    • 주의할점은 최상위 컴포넌트의 전체를 Radium의 StyleRoot 컴포넌트로 감싸주어야한다
    import Radium,{ StyleRoot } from 'radium'; // import 필요
   
const app = () => {
    const style = {
        '@media (min-width: 500px)': 
        	width: '450px';
    }
    return (
    	<StyleRoot>	// * StyleRoot로 감싸야함
        	<div>
            	...
            </div>
        </StyleRoot>
    )
}
   
export default Radium(app); // Radium 메소드로 export


  4. styled-components library

    • https://styled-components.com/ 공식 홈페이지
    • npm install –save styled-components 라이브러리 설치
    • import styled from ‘styled-components’;
    • styled.모든HTML태그 백틱 사이에 css를 적는다
    • 스타일링한 태그를 컴포넌트처럼 쓸 수 있다. props 역시 전달이 가능하고 이벤트도 걸 수 있다
    • 이 역시 자바스크립트이기에 아래처럼 사용이 가능
    import styled from 'styled-components';
   
const StyledDiv = styled.div`
	width: 60%
	color: ${props => props.value ? 'red' : 'black'}
	...
	@media (min-width: 500px){
		width: 450px;
	}
`; // css를 백틱 사이에 적는다
   
// 이렇게 스타일링한 컴포넌트를 html 태그처럼 사용한다
   
<StyledDiv alt={this.state.value}>
	<h1>hi</h1>
</StyledDiv>


  5. Class Module

    • react-scripts 2.0.0 이상 버전에서는 eject를 통한 설정파일 편집을 하지 않고도 class module을 이용한 styling이 가능하다
    • 저마다 고유한 format의 className을 정의하기 때문에 충돌을 방지할 수 있다
    • css 파일을 만들때 xxx.module.css 로 지정하여 .name으로 styling 한다
    • 사용처에서 import 하고 className={변수명.name}으로 사용
    /* Button.module.css 파일명 */
.error {
    background-color: red;
}

    import styles from './Button.module.css';
   
<button className={styles.error}>btn</button>



참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

Radium

Adding a CSS Modules Stylesheet

Related Posts