프론트엔드/HTML,CSS

버튼 클릭시 색상을변경하기(feat. 리엑트)

후누피 2023. 7. 5. 14:57
728x90
버튼 클릭을 할때마다 버튼의 색상이 바뀌는것을 작업하는것이 목표이다.

 

 

먼저 flaticon에서 아이콘들을 가져와,

해당아이콘을 클릭했을 때 색상이 변하는 작업을 할 것이다.

mui를 이용해서 기본적인 구조를 잡았었지만,

html 의 숙련도(?)를 위해 html로 수정하였다.

 

 

 

 

import {useState } from 'react';

 

먼저, 클릭했을 때 상태를 관리하기위해 useState를 import해온다.

 

const [food1, setFood1] = useState(false);
const [food2, setFood2] = useState(false);
const [food3, setFood3] = useState(false);
const [food4, setFood4] = useState(false);
const [food5, setFood5] = useState(false);
const [food6, setFood6] = useState(false);
const [food7, setFood7] = useState(false);
const [food8, setFood8] = useState(false);

 

그리고, 각각의 버튼에 상태를 바꿔주기위해 각각의 useState를 만들어준다.

 

 

<button className='food1_button' onClick={()=>setFood1(!food1)}
</button>

 

이게 버튼하나의 코드이다... 글을 작성하고 추후에 코드를

더 간결하게(?)해줄 방법을 찾아봐야겠다.

물론, 이 버튼부분만 따로 컴포넌트로 쪼개서 관리하고있지만 더 간결하게 만들어봐야겠다.

 

 

일단, onClick 이벤트가 발생하면, 애로우함수

(익명함수:함수를 따로 선언하지 않고도 함수를 정의하고 사용할 수 있다.)

가 setFood1(!food1)을 실행시켜준다 기본값이 false인 food1의 값을 true로 변경시켜준다 (클릭할때마다 상태값이 변한다)

 

그리고 style 또한 food1가 true일때 이미지, false일때 이미지를 따로 지정해둬,

우리눈에는 클릭할때마다 이미지가 바뀌게 되는것을 확인할 수 있다.

(삼항연산자활용)

 

👇전체코드👇

더보기
import '../../assets/styles/css/choose_food.css'
import {useState } from 'react';
const Choose_food:React.FC = () => {
const [food1, setFood1] = useState(false);
const [food2, setFood2] = useState(false);
const [food3, setFood3] = useState(false);
const [food4, setFood4] = useState(false);
const [food5, setFood5] = useState(false);
const [food6, setFood6] = useState(false);
const [food7, setFood7] = useState(false);
const [food8, setFood8] = useState(false);
return (
<div className='choose_food'>
<div className='food'>
<div className='food_list'>
<button className='food1_button' onClick={()=>setFood1(!food1)}
</button>
<button className='food2_button' onClick={()=>setFood2(!food2)}
</button>
<button className='food3_button' onClick={()=>setFood3(!food3)}
</button>
<button className='food4_button' onClick={()=>setFood4(!food4)}
</div>
<div className='food_list2'>
<button className='food5_button' onClick={()=>setFood5(!food5)}
<button className='food6_button' onClick={()=>setFood6(!food6)}
<button className='food7_button' onClick={()=>setFood7(!food7)}
<button className='food8_button' onClick={()=>setFood8(!food8)}
</div>
</div>
</div>
);
}

export default Choose_food;

 

 

 

이렇게 클릭시에 색깔이 변하는것을 확인할 수 있다!

728x90