[React js] input type checkbox로 toggle 만들기

안녕하세요 . 고집 프로그래머 입니다.

 

최근에 재택을 시작하면서 유익한 React 정보를 자주 올리려고 합니다.

 

기존 <input type="checkbox" /> 형식으로 네모 체크박스 

이런 형태를 많이 보셨을 텐데요 , 

 

간혹가다 <input type="checkbox" />인데, 토글(toggle)형태로 표현되는 경우가 있습니다.

 

다른것이 문제되는 건 없는데, defualt value 설정때문에 저는 조금 어려웠습니다.

 

기존에 구글링 하면, 

<input type="checkbox" defualtValue={true} />

이런식으로 defualtValue로 표현했는데, type이 checkbox다보니 해당 기능은 잘 안먹히는 경우가 많았습니다.

그래서 저는 , 

const [checked, setChecked] = React.useState(true);

<input type="checkbox" checked={checked} onClick={()=>setChecked(!checked) /> 

이렇게 간단히 구현할 수 있었습니다. 

 

만약 API에서 불러오는 값을 defualt로 해주고 싶으시면, 

API로 불러오는 값을 setChecked(API_VALUE) 이런식으로 불러올때 넣어주거나 , 

<input type="checkbox" checked={API_VALUE} onClick={()=>setChecked(!API_VALUE) /> 

이런식으로 표현해 주어도 됩니다.

 

오늘은 간단히 input type이 checkbox이지만 토글일 때 작업하는 방법을 공유드렸습니다.

 

감사합니다.