📌목표

useState를 활용하여 radio tab을 구현하고자 한다.
phone-tab이 기본적으로 체크되있게 설정하기위해
상태변수 isPhoneChecked을 생성하고 기본상태를 true로 설정
이때, 탭전환시 선택한라디오의 (value)가 phone-tab이 맞다면 해당 컨텐츠내용이 업데이트되게 상태변수함수에 넣어서 업데이트시켜주기!

구현모습 미리보기

탭 기본 선택 useState 생성

• 휴대폰 tab이 기본적으로 선택되어있게 하기위해 상태값을 true로 설정해두고 상태값을 적용한다.
• 탭은2개로 이루어져있기 때문에 서로 상태반전이 된다.
  연산자 !를 이용하여 이메일tab은 checked={!isPhoneSelected} fasle의 값으로 선택되지 않게 설정해둔다.

   const [isPhoneSelected, setIsPhoneSelected] = useState(true);
   
    <label className="flex">
             <input
                  type="radio"
                  name="option"
                  id="radio-phone"
                  value="phone"
                  checked={isPhoneSelected}
                   ></input>
              <p>휴대폰 번호</p>
     </label>

해당탭 컨텐츠 넣기

• 각 탭들이 선택되었을때 들어갈컨텐츠 넣기

{isPhoneSelected && (
<div className="phone-content">
</div>
)}
//휴대폰 컨텐츠 

{!isPhoneSelected && (
<div className="email-content">
</div>
//이메일 컨텐츠
)}

탭변경 핸들러 작성

💡 event.target.value 언제 쓰이는가?

onchange 핸들러 함수에서 e.target.value 사용하면 입력한 값, 선택한값을 가져 올 수 있다.

event.target.value : 매개변수로 event를 지정하여 내가 선택한 tab의 value값을 가져온다.

• 선택한 탭의 값이 휴대폰 탭이 맞는지 확인하여 맞다면 seletedValue에 true가 할당된다.
• 상태변수 setIsPhoneSeleted를 호출하여 상태변수의 값을 업데이트 한다.
• 휴대폰탭이선택되었느지에 따라 isPhoneSeleted의 변수값이 변경되어 tab-content의 내용도 바뀌게 된다.

    const handleRadioChange = (event) => {
        const selectedValue = event.target.value === 'phone';
        setIsPhoneSelected(selectedValue);
    }

### ✔️최종코드