React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기

토글 메뉴가 열렸을 때와 닫혔을 때, border-bottom 의 두께를 다르게 변경하고 싶다. 

백문이 불여일견 ! 결과화면을 먼저 살펴보자.

 

결과화면 미리보기

- 토글 메뉴가 열렸을 때, 빨간박스 안의 border-bottom이 연하다.

 

- 토글 메뉴가 닫혔을 때, 연했던 border-bottom 이 진해졌다.

 

 

---

React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기

 

List.tsx

리액트 컴포넌트 내에서 useState 로 선언한 closeList 라는 상태변수를 이용하면 변경 가능하다.

먼저 closeList 라는 변수를 useState 를 통해 선언해주자. 

const [closeList, setCloseList] = useState<boolean>(false);

 

 

위에서 선언한 closeList가 로직에 의해서 true 로 바뀌면 클래스 이름은 동적으로 변경된다.

- closeList 가 true 일 때, 

className = 'divider' 으로 변화가 없고 

 

- closeList 가 false 일 때, 

className = 'divider open' 으로 변경된다. open 이라는 클래스가 활성화 되면서  open 클래스에 해당하는 css 속성이 적용된다.

<div className={`divider ${closeList ? '' : 'open'}`}></div>

 

 

List.css

- open 클래스가 추가되면 밑줄이 없어진다

.divider {
  border-bottom: 1px solid #dbdee2;
}

.divider.open {
  border-bottom: 0;
}