React 동적으로 style 추가

비가 주륵주륵 오는 걸 감상하며 평화롭게 프로젝트 프론트단을 만들던 중

리액트에서 스크립트 기능이 필요해짐.

 

 

예를 들어 상단 메뉴에 마우스를 올렸을 때 숨겨진 서브 메뉴를 보여주는 기능,

 

게시판 탭

 

이런 탭 클릭했을 때 임팩트주는 기능 등등...

 

동적으로 style 입혀주는데 스크립트로 원래 하던것처럼

 

document.getElementById(id).style.color = 'red';

 

이런 식으로 ID 값을 추적하는 방식으로 할려고 했으나

생각해보니 리액트는 다른 방법이 있을 것 같아서 갓글에 검색.

검색해보니 useState라는 리액트 훅으로 상태를 사용해 동적으로 style을 변경할 수 있다고 함.

 

 

위의 공지사항, Q&A 탭을 선택했을 때 style을 변경하는 기능을 만들어 봄.

 

import React, { useState } from 'react';

 

먼저 import 해서 불러옴.

const [boardState, setBoardState] = useState("notice");	//기본 공지사항
//boardState : 선택한 탭 상태를 의미
//setBoardState : 탭 상태를 변경할 수 있는 함수

 

먼저 useState를 선언하는데 기본적으로 useState는 배열을 반환하며 첫번 째 원소는 상태값이고, 두번 째 원소는 상태를 변경할 수 있는 함수임.(자세한건 검색해보시면 좋음!)

default 상태를 공지사항이라서 notice를 넣어 줌.

상태는 자기마음대로 boolean 값을 넣어도 되고 string 값을 넣어도 됨.

 

<ul>	//해당 탭 코드
  <li
    className={
      boardState === "notice" ? "noticeBtn cmBtn" : "noticeBtn"
    }
    onClick={() => {
      setBoardState("notice");	//공지사항 클릭 시 상태를 notice로 변경
    }}
  >
    <Link to="#">공지사항</Link>
  </li>
  <li
    className={boardState === "qna" ? "qnaBtn cmBtn" : "qnaBtn"}
    onClick={() => {
      setBoardState("qna");	//Q&A 클릭 시 상태를 qna로 변경
    }}
  >
    <Link to="#">Q &amp; A</Link>
  </li>
</ul>

 

className 부분을 보면 boardState 상태가 notice or qna 인지 체크를 하여 class를 추가함.

필자는 cmBtn이라는 class를 미리 css 설정을 해놓음. 각자 원하는 style을 설정하면 될 듯.

 

공지사항 클릭 시

 

처음 화면에는 당연히 공지사항에 style이 입혀져 있음.

 

Q&A 클릭 시

 

onClick 함수를 사용해 클릭했을 때 상태 변경 처리함.

 

리액트를 하면서 느낀점은 리액트는 상태관리가 중요하다는 점, css도 상태를 이용해 설정이 가능하다는 점이 새로웠음.

다음번엔 좀 더 심화된 기능을 개발해봐야겠음. 끝.

 

 

📢참조

https://devbirdfeet.tistory.com/54

React(24) 리액트 훅 useState란

 

 

 

https://programming119.tistory.com/100

[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?