[컴포넌트] Custom 라디오 버튼 컴포넌트

Hyuk·2023년 1월 25일
0

컴포넌트

목록 보기
2/10

1. css로 custom한 Radio Button 컴포넌트

🚫 문제 - 디자인이 되어있는 Radio Button 컴포넌트 제작

👉 code는 open sandBox를 확인하면 볼수있습니다.

💡 문제해결

일반 컴포넌트로 진행하다가 formik으로 데이터를 처리할 예정이었기 떄문에 formik을 통해서
컴포넌트를 만들었습니다.
Field는 자동으로 입력을 Formik에 연결을 하기때문에 Provider의 formik데이터를 관리해줍니다.
html에서는 기본적으로 input요소가 되기에 FormikProvider와 Field를 통해서 컴포넌트를 제작했습니다.
추가적으로 formik value를 객체 안에 값으로 진행하고싶었는데 알고보니
Radio에서 name값만 object로 변경해주면 됐습니다.

🧐 추가적으로 알고싶은 점(혼잣말..)

FormikProvider와 Field를 안쓰고 input으로 진행을 하게 되면 전체 렌더링이 되지않고 value만 변하게 된다.
하지만 새로 고침 시에 초기값을 통해서 checked가 되어있는 상태가 필요하기때문에 input으로 진행을 못했지만
input으로 진행하되 초기값을 통해서 checked가 되어있는 상태가 가능하다면 그 방법을 알아보고싶다.
만약에 처음 radio 버튼이 아무것도 안눌린 상태로 진행이 된다면 FormikProvider와 Field를 안쓰고 진행을
하면 된다.
profile
frontEnd Developer

0개의 댓글