state에 따른 스타일관리

setState란 데이터 변경시 기존의 관련된 dom요소를 찾고 데이터변경에 맞게 ui를 변경하는 과정을 jsx 문법과 같이사용시 선언적으로 처리할 수 있는 기능을 제공하는 함수다. state에 따른 style제어하는 방법을 명확히 하여 시간을 들이붇는 코딩습관을 고쳐보자.

 

state를 통해 class를 제어하는 기본구조

return (
  <div className={state ? 'onClass' : ''}> </div>
);

 

state에 따라서 클래스를 변경함으로 dom요소를 선택하고 노드의 classList, style 속성에 직접접근하는 코드를 짤 필요가 없게됐다. 외우자