Update CSS Variables with JS

Javascript30 3일차. 오늘은 input range로 이미지의 여백과 블러, background color를 조정할 수 있는 앱을 만들것이다 물론 React로.

먼저 최초 소스 코드는

wesbos/JavaScript30

여기에 있다.

이번 강의의 핵심은 css파일 내에서 변수를 선언하고 적용시키는 것이다.

위에 올라와있는 코드에서 css부분을 따로 App.js로 이동시키고,

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

.hl {
  color: var(--base);
}

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

다음 코드를 추가했다.

다음과 같이 선언하면 — base, — spacing, — blur는 변수가 되어 .hl { }내의 var( — base)처럼 사용할 수 있다. 이후 javascript 코드를 통해 저 변수를 조정함으로써 이미지와 .hl span에 적용되어있는 css를 변경할 것이다.

components/App.js

App.js에서 state로 spacing, blur, base 세 가지 변수를 사용한다. 각 변수는 동명의 id를 가진 input창의 value로 사용되는데, 이 때 onChange event를 설정해주지 않으면 값이 변경되지 않으니 주의한다.

state가 변경되변 componentDidMount function이 실행된다. 우리는 이 때 아까 css 변수였던 — spacing, — blur, — base를 다시 수정해줄 것이다. 여기서 주의할 점은 단위(px)를 지정해주어야 한다는 점. 단위는 data-{value}로 지정된 값은 object.dataset.{value}값으로 불러올 수 있다.

default값은 큰 의미는 없지만 위 강좌에서 나온 값을 그대로 설정해주었다.

// actions/index.js
export const UPDATE_VALUE = 'UPDATE_VALUE';

export function updateValue(name, value) {
  return {
    type: UPDATE_VALUE,
    name: name,
    value: value
  }
}
// reducers/index.js
import { UPDATE_VALUE } from '../actions/';

const defaultValues = {
  spacing: 10,
  blur: 10,
  base: '#ffc600'
};

function app(state = defaultValues, action) {
  switch (action.type) {
    case UPDATE_VALUE:
      const newState = Object.assign({}, state);
      newState[action.name] = action.value;
      return newState;
  }
};

export default app;

action과 reducer는 다음과 같이 설정한다. 지난 과정에서 비슷한 코드를 많이 작성해보았기 때문에 추가적인 설명은 생략하겠다. 한 가지 다른 점은 세 가지 state 중 변경사항이 생길 경우 이전 state를 그대로 복사한 객체에 변경이 일어난 값만 새로 수정하여 return해준다는 것이다.

// containers/AppContainer.js
import { connect } from 'react-redux';

import App from '../components/App';
import { updateValue } from '../actions/';

const mapStateToProps = state => {
  return { ...state }
};

const mapDispatchToProps = dispatch => {
  return {
    onChange: (name, value) => {
      dispatch(updateValue(name, value))
    }
  }
};

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);


export default AppContainer;

AppContainer에서는 state값은 그대로, onChange function만 새로 정의하여 App component로 전달해주었다.

완성된 모습은 다음과 같다.

spacing, Blur, Base Color값을 변경하면 아래의 이미지가 해당 값으로 변경된다!

Github Source Code

REF

wesbos/JavaScript30