컴포넌트 상태 다루기
- DOM: 논리 트리
컴포넌트: 엘리먼트의 집합
엘리먼트: 요소
컴포넌트 → 엘리먼트의 집합
useState → 상태값을 관리해주는 훅
컴포넌트 사이드이펙트 다루기
- 사이트 이펙트 = 부작용
의도하지 않은 효과 vs 부수 효과
사이드 이펙트 → 부수 효과
useState → lazy initialize
useEffect → dependency array
커스텀 훅 만들기
- 찍어내기/ 반복 => 함수화
useState/ useEffect를 반복 => 커스텀 훅
반복 → 함수로
훅들이 반복 → custom Hook으로
Hook Flow 이해하기 1
hook flow → hook들의 호출 타이밍
useState → setState시 prev이 주입된다
Hook Flow 이해하기 2
useEffect → render가 끝난 뒤
update시 → useEffect clean up/ useEffect
dependency array → 전달받은 값의 변화 있는 경우에만
리액트 Element에 스타일 입히기
className → 문자열
style → 객체, 카멜케이스, className보다 먼저
Ref로 DOM 다루기
Vanilla JS → document.get~/ document.query~
React → useRef/ ref
Form 다루기 1
- 기본 form
label
input
submin
onSubmit → event.preventDefault()
event.target.elements → console.dir(element)
Form 다루기 2
- validation
value
validation → onChange
controlled → input의 value를 직접 관리
Error 다루기
Error Boundary → Catch Error해서 보여주기
Fallback → Error가 났을때 보여줄 컴포넌트
Key와 리랜더링 알아보기 1
key → Value를 특정하는 이름
Key와 리랜더링 알아보기 2
재사용 → key를 제대로 줘야 재사용 가능
제대로 준다 → 중복없고, 바뀌지않는
상태 끌어올리기
형제 컴포넌트의 상태 궁금 → 필요하면 부모로 lifting up
Props drilling → 과도한 lifting은 drilling을 야기
데이터 Fetch 해보기
Fetch api → 네트워크 통신 도구
상황별 핸들링 → 로딩/ 데이터/ 에러
