이벤트
합성 이벤트 -> 인터페이스는 같지만 직접 대응되지 않음
Bubble/Capture -> Capture>target>Bubble
return false -> e.preventDefault()해줘야 함
조건부 랜더링
if -> if(condition){return A} else{return B}
&& -> condition && A, fallsy 주의
삼항연산자 ->condition ?A:B
아예 안그리고 싶은 경우 ->return null;
List
map -> 배열의 개별 요소를 순회
default key ->안주면 react는 index를 쓴다
고유성 -> 형제 사이에서만 고유하면 됨
key props ->key는 props로 넘어가지 않음
form
controlled component ->input의 value를 state로 관리
다중입력 -> event.target.name
Uncoontrolled Component ->form element 자체의 내부 상태 활용
defaultValue,ref->기본값/value 확인
Hooks
Hooks 등장 ->class 단점 보완/재사용성 강화
Hooks 사용 규칙 -> 최상위/함수형 컴포넌트/custom Hook
class의 state -> 훅을 먼저 배웠기에 고민 할 필요X
Hooks 2
useEffect ->데이터 fetch / 구독 / Dom 수정
clean up ->구독과 구독해지를 한 공간에서
dependency array -> 필요한 변경시에만 effect 실행
Hooks 3
Custom Hook -> 컴포넌트들에 반복되는 Hooks 듣기
다양한 Hooks -> 필요한 타이밍에 참고해서 사용
Composition 1
Composition -> 컴포넌트에 컴포넌트 담기
담는 방법 -> Children / Custom
Composition 2
typeof -> type check
확장성 -> 다양한 상황을 품을 수 있도록
HOC
HOC -> 함수를 담아서 함수를 리턴
Memoization
React.memo -> HOC / Props 비교하여 메모
Profiler -> 리액트 성능 분석 도구
callback -> useCallback
value -> useMemo
