2024. 06. 17 (월) 8주차 - Daily Coding - Day01

 

 

 

50강

사이드 이펙트 Part 1.

사이드 이펙트는 일반적인 UI 렌더링 사이클과 다르게 동작한다

useEffect 훅을 통해 사이트 이펙트를 컴포넌트 안에서 핸들링이 가능하다

 

사이드 이펙트 Part 2.

- useEffect로 유효성 검사

- cleanUp 함수

 

유효성 검사 (Back / Front 모두 중요한 요소)

- 사용자가 input 창에서 어떤 값을 입력했을 때 의도한 규칙에 맞게 들어오는지 여부를 검사하는 것.

 

ex)

id : 영문소무자와 숫자로 이루어진 10자 이내

PW : 영문 대소문자, 숫자, 특수문자 등

Email : xxx@xxx.xx등 유효한 이메일이 맞는지

 

debounce

동일한 이벤트가 반복해서 실행되는 경우 일정 시간 지연 시킨 후 처리한다

일정 시간 안에 동일 이벤트가 다시 발생하면 마지막 발생 시점부터 일정 시간을 지연한다

 

비슷한 이벤트가 지속적으로 발생 시 일정 시간 뒤에 처리하는 거라 이해하면 됨.

 

ex)

검색서비스, 지도서비스

 

useEffect의 cleanUp 함수

useEffect(() => { ... return () => { ...}}, [...]};

 

 

51강

 

사이드 이펙트 Part 3.

- useReducer

 

useState의 한계, 복잡한 상태를 다루려면 여러 개의 snapshot을 관리해야하며 그 과정에서 상태 변화가 꼬일 수 있다

 

 

 

*validateEmailHandler가 실행될 때 아직 enteredEmail이 값이 업데이트 안 되었을 수도 있다.

 

 

useReducer 공식 문서

https://react.dev/reference/react/useReducer

useReducer – React

 

실습

https://github.com/dev-owen/react-fundamental/tree/practice/4-6

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

 

 

🧐회고

아니 슈퍼코딩... 미쳤네... 갑자기 강의 실습이 이렇게 어려워진다고?

무슨 말인지 진짜 1도 이해안되고 실습하는데 그냥 따라 베끼기 정신없다 하....

이게 비전공자인 사람을 위한 강의라고?... ㅋ...ㅋㅋㅋ...