리액트 라디오 박스 버튼 구현 방법에 대해서 정리해 보았습니다.
대략 로직을 생각해 보면,
- 특정 라디오 그룹이 존재하며 – MUI Radio Group 활용
- 해당 라디오 버튼에 고유값을 지정하고 – MUI Radio button 활용
- 라디오 버튼의 키값을 useState에 값을 담아 – useState Hook 활용
- 각각이 선택되었을 때 로직을 분기
위의 방식으로 처리하면 될 거 같습니다.
리액트에서 MUI 컴포넌트 라디오 박스 버튼 구현 방법
우선은 MUI 컴포넌트를 설치해야 합니다.
라디오 버튼 컴포넌트 import
구현하고자 하는 파일 상단에 import 를 선언합니다.
import Radio from '@mui/material/Radio';
라디오 버튼 값을 담을 state 선언
두 개의 라디오 버튼을 올릴 것이므로 두 개의 값을 담아놓을 수 있는 useState 선언
const [selectedValue, setSelectedValue] = React.useState("a");
html 영역에 라디오 박스 정의
두개의 Radio 박스를 올린 후 첫번째 체크박스에는 ‘a’ 라는 값을 넣어주고, 두번쨰는 ‘b’ 라는 값을 넣어줍니다.
<Box sx={{ display: 'flex', gap: 2 }}>
<RadioGroup row name="row-radio-buttons-group">
<FormControlLabel
value="a"
control={<Radio />}
label="a Option"
onChange={handleChange}
/>
<FormControlLabel
value="b"
control={<Radio />}
label="b Option"
onChange={handleChange}
/>
</RadioGroup>
</Box>
체크 박스 Handle Change 정의
체크 박스를 체크했을 때 이벤트를 정의합니다.
const handleChange = (e) => {
console.log("e.target.value: ", e.target.value);
setSelectedValue(e.target.value);
};
그러면 다음과 같이 MUI Component로 보이게 됩니다.
useState 값으로 제어
이제 아래의 state 값으로 각 라디오 버튼을 제어하면 됩니다.
const [selectedValue, setSelectedValue] = useState("a");
...
if (selectedValue === "b") {
// b 체크박스 클릭
} else {
// a 체크박스 클릭
}
...
이상으로 리액트 MUI 컴포넌트로 라디오 박스 제어하는 방법을 정리해 보았습니다.
그 밖에 도움 되는 글
타입스크립트 리액트 Vite 절대경로 설정하기
ERESOLVE 의존성 충돌 unable to resolve dependency tree 해결 방법