이벤트
https://ko.reactjs.org/docs/events.html
https://ko.reactjs.org/docs/handling-events.html
이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 Capture를 덧붙이세요. 예를 들어 onClick 대신 onClickCapture를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다.
합성 이벤트 -> 인터페이스는 같지만 직접 대응되지 않음
Bubble/Capture -> Capture>target>Bubble
return false -> e.preventDefault() 해줘야 함.
조건부 렌더링
https://ko.reactjs.org/docs/conditional-rendering.html
JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.
따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시하고 건너뜁니다.
falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해주세요. 아래 예시에서,<div>0</div>이 render 메서드에서 반환됩니다.
if ->if(condition){return A} else {return B}
&& -> condition && A, falsy 주의
삼항연산자-> condition? A:B
아예 안그리고 싶은 경우 => return null;
List
https://ko.reactjs.org/docs/lists-and-keys.html
리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다. 다음 섹션에서 key의 중요성에 대해서 더 설명하겠습니다. 이제 numbers.map() 안에서 리스트의 각 항목에 key를 할당하여 키 누락 문제를 해결하겠습니다.
map ->배열의 개별 요소를 순회
dafault key->안주면 react는 index를 쓴다(워닝 O)
고유성->형제사이에서만 고유하면 됨
key props->key는 props로 넘어가지 않음
Form
https://ko.reactjs.org/docs/forms.html
제어 컴포넌트 (Controlled Component)
HTML에서<input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
Controlled Component -> input의 value를 state로 관리
다중입력 -> event.target.name
uncontrolled Component -> form element 자체의 내부 상태 활용
defaultValue, ref -> 기본값/value확인
