input의 checked속성

react에서 state를 공부하던중 하기와 같이 input의 속성의 checked라는게 존재하여 이것이 무엇인지 이해가 가지않아 검색해보았다..

   <input type="checkbox" checked={isChecked} onChange={handleChecked} />

<input> 태그의 checked 속성은 페이지가 로드될 때 미리 선택될 <input> 요소를 명시합니다. checked 속성은 페이지가 로드된 후에도 자바스크립트를 사용하여 설정할 수 있습니다. checked 속성은 불리언(boolean) 속성입니다.

구글선생님의 친절한 설명은 상기와 같다.. 페이지가 로드될때 미리 선택될 input요소를 명시하는 속성이라고 한다. checked의 속성은 true/false인 불리언이 옮.

React 이벤트처리(이벤트 핸들링)

• DOM이벤트 처리 방식과 유사하지만 몇가지 문법적인 차이가 있음

1. React에서 이벤트는 소문자only가 아닌 카멜케이스를 사용.
2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러)를 전달

하기의 방식

<button onClick={handleEvent}>Event</button>

자주 사용되는 이벤트 처리 예시

onChange

input, textarea , select와 같은 Form엘리먼트는 사용자의 입력값을 제어하려고 사용됨.
React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포너트의 state로 관리하고 업데이트함.

onChange이벤트가 발생하면 event.target.value를 통해 객체에 담겨있는 input의 값을 읽어올 수 있음.
onChagne는 input이나 해당 엘리먼트의 텍스트가 바뀔때마다 이벤트가 발생됨.

Select

Select태그는 사용자가 drop down목록을 열어 그중 한가지 옵션을 선택하면 선택된 옵션이 state변수에 갱신됨.

onClick

사용자가 클릭이라는 행동을 하였을때 발생하는 이벤트.
버튼이나 a태그를 통한 링크 이동을 하게 될 경우 사용.

---

삼항연산자
React에서는 조건문 if를 사용할수 없기 때문에 삼항연사자로 비교해야한다.
삼항 연산자는 비교한 결과값이 true일 경우는 :의 왼쪽을 비교한 결과값이 false일경우는
:의 오른쪽을 선택하면된다.

let a = true
a ? false : true // 결과값 false
a ? true : false // 결과값 true

let b = false
b ? false : true // 결과값 true
b ? true : false // 결과값 false