📎 목차

📃 학습 목표

1. React를 이용하여 이벤트 처리하기.
2. React를 이용하여 상태관리 하기.
3. 컴포넌트부터 이벤트처리까지 React스럽게 구현해보기.

🔍 핵심 키워드

• 컴포넌트는 어떻게 설계해야 할까?

Step1. UI 컴포넌트 계층구조로 나누기

Step2. 정적인 버전으로 일단 만들어보기

Step3. UI 상태를 나타내는 가장 간결하면서도 완전한 형태?

Step4. 어느 컴포넌트가 state를 소유해야하는지 결정하기

1. state 기반 무언가를 렌더링 하는 컴포넌트 알아내기
2. 최소 공통 조상 찾기 - searchbar & table 의 공통 조상 → filterable

Step5. 역방향의 데이터 흐름을 추가하기 - 사용자 입력에 따라서

• 상태를 만들고 사용하는 방법

• 이벤트 핸들러

• 자주 사용되는 이벤트 타입

  • onClick : 마우스/키보드가 클릭된 경우
  • onChange : 내용이 변경된경우
  • onSubmit : form의 데이터가 전송되는 경우
  • onFocus : 요소가 포커스 된 경우
  • onBlur : 요소의 포커스가 사라진 경우

🖥️ 실습 리스트