2023.08.29(화) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week2 Day 2 보고

• TO-DO LIST

- 49강 사이드 이펙트 처리 - 1 - useEffect ~ 54강 사이드 이펙트 처리 - 6 - forwardRefs

​

• 배운 내용 요약 정리

사이드 이펙트

리액트의 역할

UI 렌더링 - 사용자 Input에 반응 - 리렌더링

기본적인 리액트의 사이클을 벗어나는 동작이 발생한다면?

네이버 검색창 자동완성

​

검색 창 자동완성 기능

ㄱ 입력 - onChange 이벤트 리스너 & 핸들러 - 리렌더링

​

사이드 이펙트

1. 키워드 값이 바뀔 때
2. 서버에서 키워드로 자동완성 된 데이터를 받아왔을 때

​

useEffect

Every time your component renders, React will update the screen and then run the code inside useEffect.

In other words, useEffect "delays" a piece of code from running until that render is reflected on the screen.

​

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

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

useEffect 훅을 통해 사이드 이펙트를 컴포넌트 안에서 핸들링 할 수 있다.

​

- 유효성 검사

입력을 받는 Input 값이 우리가 의도한 규칙에 맞게 들어오는지 검사

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

Password: 영문대소문자, 숫자, 특수문자가 모두 들어간 8~12자리

Email: xxx@xxx.xx 등 유효한 이메일 양식에 맞게

​

- debounce

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

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

​

useEffect의 cleanUp 함수

유효성 검사는 Input 값이 우리가 의도한 규칙에 맞게 들어오는지 검사

Debounce는 동일한 이벤트가 반복해서 실행되는 경우

일정 시간 지연 시킨 후 처리

​

useState의 한계

복잡한 상태를 다루려면 여러 개의 snapshot을 관리해야 함

그 과정에서 상태 변화가 꼬일 수도 있음

​

- useReducer

useReducer is a React Hook that lets you add a reducer to your component.

const [state, dispatch] = useReducer(reducer, initialArg, init?)

하나의 복잡한 상태를 여러 타입으로 dispatch하기에 적합한 훅

​

state, props의 한계

컴포넌트가 트리 구조로 중첩되어 깊고 넓게 뻗어나가면서,

각기 다른 컴포넌트에 영향을 주어야 할 일들이 발생

​

리액트에서는 Context API를 제공하는데, 전역 상태 관리를 할 수 있다.

​

Context에 상태와 로직을 모두 관리하면 컴포넌트에서는 뷰만 신경쓸 수 있다.

​

- Context의 한계

1. 잦은 변화가 일어나는 상태를 다루기에는 적합하지 않다.
2. 모든 컴포넌트 간 통신을 다 Context에서 다루려고 하면 안 된다. 성능이 떨어지고 무거워짐.

​

- forwardRef

- useImperativeHandle

is a React Hook that lets you customize the handle exposed as a ref.

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고