React에서 라디오 버튼 사용하기
www.daleseo.com
React에서 라디오 버튼 사용하기
이번 포스팅에서는 라디오 버튼(Radio Button)을 통해 사용자의 선택을 받을 수 있는 React 컴포넌트를 작성하는 방법에 대해서 알아보겠습니다. React에서 양식 UI를 구현할 때 많이 사용되는 패턴인 비제어 컴포넌트와 제어 컴포넌트로 모두 구현해보고, 효과적인 상태 관리를 위해 어떻게 컨텍스트(Context)를 활용할 수 있는지 실습을 통해 배워볼까요?
📝 포스팅: https://www.daleseo.com/react-radio-buttons/
🧑💻 실습 코드: https://codesandbox.io/s/react-radio-buttons-pnnkvl
• Radio 컴포넌트 작성
• RadioGroup 컴포넌트 작성
• 비제어 컴포넌트로 활용
• RadioContext 추가
• RadioGroup 컴포넌트 수정
• Radio 컴포넌트 수정
• 제어 컴포넌트로 활용
HTML과 CSS만으로 라디오 버튼을 사용하는 방법은 아래 게시물을 참고 바랍니다.
📙 CSS 라디오 버튼 스타일링 가이드: https://careerly.co.kr/comments/85939
React 컴포넌트를 스타일하는 다양한 방법이 궁금하시다면 아래 게시물을 참고 바랍니다.
📕 React 컴포넌트 CSS 스타일링 기본: https://careerly.co.kr/comments/86222
📗 Styled Components로 React 컴포넌트 스타일하기: https://careerly.co.kr/comments/86823
📘 Emotion으로 React 컴포넌트 스타일하기: https://careerly.co.kr/comments/88931
React로 양식 UI를 구현하는 기본적인 방법이 궁금하시다면 아래 게시물을 참고 바랍니다.
📓 React로 양식(form) UI 구현하기: https://careerly.co.kr/comments/86324
📔 React Hook Form 라이브러리 사용법: https://careerly.co.kr/comments/87155
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 10월 4일 오후 8:36
댓글 0
함께 읽은 게시물
주니어 개발자들이 읽으면 좋은 테크 아티클 모음📚
F-Lab 에서 주니어 개발자들이(사실 개발자라면 누구나) 보시면 좋을 아티클 모음을 공유해 주었네요!
검색엔진부터 비동기 처리, NoSQL 등 다양한 분야의 아티클들이 공유되어 있으니 관심있으신 분들은 보시면 좋겠습니다.
F-Lab 에서 공유해주신 아티클 주제를 나열해보면 다음과 같습니다.
📌 구글이 직접 말하는 검색엔진의 원리 (tali.kr)
📌 검색 엔진은 어떻게 작동하는가 (xo.dev)
📌 네이버의 검색엔진의 특징과 알고리즘 (tistory.com)
📌 [네이버 블로그]네이버 검색의 원리 : 네이버 블... 더 보기
🔹앞서 나가는 비결은 시작하는 것이다.
... 더 보기Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들
최
... 더 보기하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.
... 더 보기
