[리액트(React) Study Log] [Person App-024] Setting Class Names Dynamically

[리액트(React) Study Log] [Person App-024] Setting Class Names Dynamically

 

1. state 상태에 따라 react element 에 dynamic 한 class name 을 부여하면, 조건에 따른 css style 적용이 가능함.

 - 순서 : css 파일에 적용할 2가지 style 객체 생성 --> react element 의 className 으로 지정될classes constant 를 빈 list 로 설정 --> list.push(~~) 함수로 조건에 따라 다양한 class를 넣어줌.

/* src-App.css */

 

.App {

  text-align: center;

}

 

.red {

  color: red;

}

 

.bold {

  font-weight: bold;

}

 

 - css class name 이 복수인 경우 empty space 가 들어간 class name을 [ ] 로 감싸서 지정하면 됨. 따라서 리스트 형태로 만들어진 class 의 경우 ['aaa','bbb'].join(' ') 를 이용해서 빈 공백이 들어간 string 을 만들어 준다. --> ['aaa bbb']

// src-App.js

 

...

      style.backgroundColor  = 'red';

    }

 

    let classes = [];

    if (this.state.persons.length <= 2) {

      classes.push('red'); // classes = ['red']

    }

    if (this.state.persons.length <= 1) {

      classes.push('bold'); // classes = ['red', 'bold']

    }

 

    return (

...

        <p className={classes.join(' ')}>This is really working!</p>

...