[React] 여러 개 버튼 중 하나만 클릭하게 만들기

리액트 하면서 간단한 기능 구현하는 방법을 작성해보려고 한다!

현재 진행중인 고민사거리 프로젝트 전에도 비록.. 완성하지는 못했지만 진행했던 소다박스 프로젝트에서 해당 기능을 라디오 버튼을 이용해서 구현한 적이 있었는데, 이는 코드가 너무 번잡스럽기도 하고 백엔드와 통신하는데에는 문제가 있을 것 같았다. (해당 플젝은 백엔드 연결하기 전에 무산됨.. ㅠㅠ)

그래서 새로운 방법을 모색하던 중
해당 벨로그 글을 발견하였다! 이를 내가 필요한 스타일에 맞게 재구성하여서 코드를 작성해보았다.

출처 벨로그 링크

📍 부모 컴포넌트

부모 컴포넌트는 다음과 같이 구성하였다.

아직 백엔드랑 연동은 안 해서 임의로 notPreferArr이라는 배열을 만들어서 버튼 안에 들어가야하는 내용을 담았다.

handleClick 함수에는 클릭을 할 경우, newArr 배열 안에 클릭 안된 index에는 false 값을 넣고 클릭된 index에 true를 넣어서 isCategorySelect를 불러오면 클릭된 index가 어디인지 알 수 있게끔 하였다.

const [isCategorySelect, setIsCategorySelect] = useState(false);
const notPreferArr =['햄버거', '스테이크', '아이스크림', '어쩔티비'];

const handleClick = (idx) => {
	const newArr = Array(notPreferArr.length).fill(false);
    newArr[idx] = true;
	setIsCategorySelect(newArr);
};

그래서 이를 props로 넘겨주었다.

<div css={buttonWrapStyle}>
	{notPreferArr.map((elm, index) => {
		return (
			<BasicButton
				key={index}
				isSelected={isCategorySelect[index]}
				handleClick={handleClick}
				elementIndex={index}
				content={elm}
			/>
		);
	})}
</div>

📍 자식 컴포넌트

자식 컴포넌트는 다음과 같이 구성하였다.

const { icon, content, isSelected, handleClick, elementIndex } = props;

onClick된 경우, props로 넘겨온 hadleClick 함수를 실행시켰다. isSelected props 값에는 부모 컴포넌트의 isCategorySelect[index] 값을 넣어줬으니 삼항연산자를 이용하여서 true값인 경우, 클릭된 css(clickedButtonStyle)를 넣어주고 false값인 경우, 클릭된 css(buttonStyle)를 넣어주었다.

<li
	onClick={() => handleClick(elementIndex)}
	css={isSelected ? clickedButtonStyle : buttonStyle}
>
	{props.content}
</li>

📍 수정한 부분

출처의 코드랑 대부분 유사하지만, 출처 코드에서는 클래스형으로 작성이 되어있는 부분을 함수형으로 수정하였다.

또한, 해당 프로젝트에서는 emotion.js를 사용하여서 className을 변경하는 대신, css에 클릭된 경우와 클릭되지 않은 경우를 다른 style 값을 넣어주었다.

📍 결과

완성된 화면은 다음과 같다!
다음에 더 좋은 코드로 작성 가능하다면 수정해서 게시물을 다시 올려보겠다~