react-tutorial icon indicating copy to clipboard operation
react-tutorial copied to clipboard

2. CSS Module · GitBook

Open utterances-bot opened this issue 4 years ago • 4 comments

2. CSS Module · GitBook

https://react.vlpt.us/styling/02-css-module.html

utterances-bot avatar May 30 '20 16:05 utterances-bot

import React from "react";

function CheckBox({ children, checked, ...rest }) {
  console.log(rest);
  return (
    <div>
      <label>
        <input type="checkbox" {...rest} />
        <div>{checked ? "O" : "X"}</div>
        <span>{children}</span>
      </label>
    </div>
  );
}

export default CheckBox;

input태그에 checked props 안넣어줘도 정상작동 하고, rest 찍어봐도 안에 onClick밖에 없는거 확인했는데, 왜 input태그에 checked props를 안넣어줘도 정상작동 하나요?

(정상작동: 클릭시 텍스트 전환 잘 됨)

input태그의 e.target.checked 가 기본적으로 내장이 되어있는건가요?

kau96kim avatar May 30 '20 16:05 kau96kim

@kau96kim 네 기본적으로 input 태그에서 type을 checkbox라고 지정하면 checked 라는 속성이 들어 있습니당

haileychoi15 avatar Sep 19 '20 05:09 haileychoi15

checked속성값은 지정한 이유는 기본 셋팅값을 위해서 입니다. App컴포넌트에서 const [check, setCheck] = useState(false);

kim-deokho avatar Apr 26 '23 05:04 kim-deokho

const [check, setCheck] = useState(false); const [check, setCheck] = useState(true); 했을때 차이라고 생각하심 될꺼 같습니다.

kim-deokho avatar Apr 26 '23 05:04 kim-deokho