Update CSS Variables with JS

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

먼저 최초 소스 코드는

여기에 있다.

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

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

다음 코드를 추가했다.

다음과 같이 선언하면 — 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값은 큰 의미는 없지만 위 강좌에서 나온 값을 그대로 설정해주었다.

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

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

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

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

Github Source Code

woohyun