[리액트(React) Study Log] [Person App-025] Adding and Using Radium
- react 의 normal javascript inline style 에서 기본적으로 pseudo selectors(hover 등) 와 media queries 사용이 불가능한데, 이를 가능하게 해주는 3rd party package 가 있음 ; radium
- radium 설치 : npm install --save radium
// src-App.js
import Radium from 'radium';
- radium 은 HOC(higher order component) 임. (다른 component 를 감싸서 그 component 에 특정 기능을 제공하는 component, 추후 다시 다룰 예정임.)
export default Radium(App);
- person.js 에도 적용
//src-Person-Person.js
import Radium from 'radium';
export default Radium(person);
- Radium 에서 style 의 hover property name 은 selector 는 생략(inline 이므로)하고 : 로 시작하는데, colon 은 유효한 javascript property name 이 아니기 때문에 ' ' 로 감싼다.
':hover': {}
- style 객체 속성을 덮어쓸 때는 ';hover' 가 string 이므로 . (dot) 이 아니라 [ ] 를 사용.
style.backgroundColor = 'red';
style[':hover'] = {
- App.js 에 pseudo selector(hover) 적용
// src-App.js
...
render() {
const style = {
backgroundColor: 'green',
color: 'white',
border: '1px solid blue',
padding: '8px',
cursor: 'pointer',
':hover': {
backgroundColor : 'lightgreen',
color : 'black'
}
}
let persons = null;
if (this.state.showPersons) {
persons = (
...
)
style.backgroundColor = 'red';
style[':hover'] = {
backgroundColor : 'salmon',
color : 'black'
};
}
...