[React] 버튼 클릭 시 상태 변화

onClick을 통해 버튼이 눌리면 상태가 변하기 때문에, 이 부분에서 useState를 활용한다.

 

style변화는 getElementById를 사용해서 id 값으로 눌린 버튼을 찾고, 그 위에 스타일을 바로 적용해준다.

 

 

const Navigator = () => {

const [currentClick, setCurrentClick] = React.useState(null);

const GetClick = (e) => {
	setCurrentClick(e.target.id);
    };
    
React.useEffect{
	(e) => {
    	if (currentClick !== null) {
        	let current = documnet.getElementById(currentClick);
        	current.style.color = "black";
        	current.style.borderBottom = "spx solid";
      },
      [currentClick]
  );
  
  
  return(
  	<div id="case1" onClick={GetClick}>
    회사소개
    </div>
    <div id="case2" onClick={GetClick}>
    메인화면
    </div>
    <div id="case3" onClick={GetClick}>
    마이페이지
    </div>
  	);
    
  };

 

하지만 이 코드는 바뀐 상태가 고정된다는 단점이 있음.

다시 원상태로 돌리고 싶으면

 

다음과 같은 코드를 추가한다.

 

const Navigator = () => {

const [currentClick, setCurrentClick] = React.useState(null);
const [prevClick, setprevClick] = React.useState(null);


const GetClick = (e) => {
	setCurrentClick(e.target.id);
    };
    
    
React.useEffect{
	(e) => {
    	if (currentClick !== null) {
        	let current = documnet.getElementById(currentClick);
        	current.style.color = "black";
        	current.style.borderBottom = "spx solid";
        }
        
        if (prevClick !== null) {
        	let prev = document.getElementById(prevClick);
            prev.style.color = "red";
            prev.style.borderBottom = "none";
            }
        //현재 클릭한 버튼 값을 이전 값 설정에 넘김    
      	setPrevClick(currentClick);
      },
      //버튼 누른 상태가 변화할 때마다 렌더링시킴
      [currentClick]
  );
  
  
  return(
  	<div id="case1" onClick={GetClick}>
    회사소개
    </div>
    <div id="case2" onClick={GetClick}>
    메인화면
    </div>
    <div id="case3" onClick={GetClick}>
    마이페이지
    </div>
  	);
    
  };

 

setPrevClick(currentClick)이 가장 중요한 부분.

클릭된 상태의 값을 이전값 설정에 넘겨주고, 다음 값을 누르면 prevClick의 state는 방금 눌러서

전달해준 값을 갖게 된다.

 

 

 

 

 

 

 

 

https://data-jj.tistory.com/51