2023.08.25(금) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week1 Day 5 보고

• TO-DO LIST

- 42강 이벤트 버블링과 캡처링 ~ 44강 데이터 정렬 수강하기

​

• 배운 내용 요약 정리

state

사용자가 화면에서 변화를 느끼는 것들

​

Event handler

사용자가 어떤 행동을 취하는 것들

​

1. 드롭다운 클릭 - Event handler
2. 옵션들이 나타남 - state
3. 하나의 옵션을 클릭함 - Event handler
4. 옵션들이 사라짐 - state
5. 클릭한 옵션이 박스에 표시됨 - state

​

비슷한 것 묶기

state - isOpen

옵션이 열림 : true

옵션이 사라짐 : false

​

state - selectedOption

옵션이 선택됨: Object

옵션이 선택되지 않음: null

​

Event handler - handleSelect

옵션을 클릭함

Event handler - handleClick

드롭다운을 클릭함

​

복잡한 구현을 위한 첫 번째 순서는 동작을 하나씩 적어보는 것이다.

구현해야 하는 동작들을 state와 event handler로 나눈다.

비슷한 것들끼리 묶고 타입을 정의해본 뒤 구현을 시작한다.

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고