20240102 TIL Radio DefaultChecked Checked

목표

• 라디오 타입 default 값

새로 알게 된것/ 오늘의 코드

라디오 타입을 디폴트로 체크되어있게 하는 것은 두가지 방법이 있는데 

checked와 defaultChecked가 있다.  그 둘의 차이는 체크 유지에 있는데 

//디폴트 체크 변경 불가능
<input  type="radio" checked={true}/>
// 디폴트 체크 변경 가능
<input type="radio" defaultChecked={true}/>

checked는 디폴트 값이 체크된 채로 변경되지 않고

defaultChecked는 디폴트 값이 체크되어있지만 체크를 변경할 수 있다. 

 

나는 수정칸에 써야했기 때문에 defaultChecked를 썼고 만약 결과 확인용으로 써야한다면 checked를 쓸 거 같다.

	 <St.InputWrap>
                {toiletNumberArr.map((item: string, i) => {
                  return (
                    <St.RadioSelect key={i}>
                      <input
                        type="radio"
                        name={editToiletNumber}
                        value={item}
                        onChange={(e) => setEditToiletNumber(e.target.value)}
                        defaultChecked={item == dateDiary?.toiletNumber}
                      />
                      {item}
                    </St.RadioSelect>
                  );
                })}
              </St.InputWrap>

radio 타입을 map을 돌려서 사용한 경우  defaultChecked={일치한 경우}만 될 수 있게 했다.

 

목표 달성여부

 

내일 목표

• 발표!!!!