원티드 프리온보딩 FE 4월 사전과제 제출 전 정리

이번에 알게되어 참가하려고 공부해본다.

다만.. 아직 리액트를 배운지 며칠 되지 않아서 Hooks 이라든가 라이프사이클? 이런걸 모르기에 시작하기 전에 힘내서 공부해둘 예정이다.

 

React 라이프 사이클

클래스형 컴포넌트에서 사용했던 것으로 요즘 주로 사용되는 함수형 컴포넌트에선 지원하지 않는다고 알고 있다.

대신 Hook 이라는 기술을 사용한다는데, 그럼에도 불구하고 알아둬야 하는 이유는 클래스형 컴포넌트를 함수형 컴포넌트로 리팩토링 해야 하는 일이 생길 수 있기 때문이라고 본다.

 

라이프 사이클은 컴포넌트가 생성되고 업데이트 되고 파괴될 때 일어나는 일련의 단계이자 생명 주기이다. 크게 3가지로 나눠지며 라이프 사이클 메서드를 통하여 제어할 수 있다.

 

1. 생성 Mounting

컴포넌트가 DOM 상에 삽입될 때 발생하는 단계

API 요청 등의 초기 데이터를 가져오는 작업을 주로 수행한다.

 

• constructor() : 가장 먼저 실행되며 초기 상태를 설정하거나 이벤트 핸들러를 등록하는 등의 작업을 수행
• static getDerivedStateFromProps() : props 로부터 state 를 가져오는 메서드로 컴포넌트가 생성되고 렌더링 되기 전에 1번 호출되며, 이후 props가 변경될 때마다 호출된다.
• render() : UI를 렌더링
• componentDidMount() : 컴포넌트가 DOM에 추가되고, 렌더링이 완료되고 나서 호출되는 메서드. 외부 데이터를 가져오거나 다른 라이브러리와 연동하는 등의 작업을 수행

2. 업데이트 Updating

컴포넌트의 props나 state 가 변경되어 재렌더링될 때 발생하는 단계

상태 값이 변경되었을 때만 리렌더링 하도록 제한을 하는 등 컴포넌트의 성능 최적화를 위한 작업을 수행한다.

 

• static getDerivedStateFromProps() : props 로부터 state를 가져오는 메서드로 컴포넌트가 업데이트 될때도 호출된다.
• shouldComponentUpdate() : 컴포넌트를 리렌더링할지말지 여부를 결정하는 메서드로 성능 최적화를 위해서 작업해주면 좋다. 함수형 컴포넌트의 userMemo 와 유사하다.
• render() : UI 를 렌더링
• getSnapshotBeforeUpdate() : 렌더링 후 DOM을 조작하기 직전에 호출되는 메서드. 스크롤 위치나 뷰포트 크기 등의 값을 지정할 수 있다.
• componentDidUpdate() : 마지막으로 컴포넌트가 업데이트된 이후 호출되는 메서드로 외부 데이터를 다시 가져오거나 getSnapmshotBeforeUpdate 에 저장된 값을 쓰거나 다른 라이브러리와 연동하는 등의 작업을 수행한다.

 

3. 삭제 Unmounting

컴포넌트가 DOM에서 제거될 때 발생하는 단계

 

• componentWillUnmount() : 컴포넌트가 DOM에 제거되기 전에 호출되는 메서드이다. 이벤트 핸들러를 해제하거나 주로 DOM에 직접 등록했었던 이벤트를 제거하고 외부 라이브러리를 사용한게 있을 때, 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해준다.

 

 

 

React17? React18?

React17	React18
기존 코드와의 호환성 개선 - 리액트 요소를 렌더링할 때 리액트 요소를 감싸는 DOM 요소의 형태를 지정해야 했으나 이러한 요구 사항이 제거되었음	렌더링 성능 개선 - Concurrent Mode 도입, 애플리케이션의 렌더링 프로세스를 효율적으로 처리하여 렌더링 속도를 향상시킴
더 작은 번들 크기를 가지고 있음	SSR을 지원하는 server component
엄격한 모드를 도입 - 앱에서 발생한 문제를 쉽게 식별하고 해결할 수 있도록 돕는 기능	기존 클래스 컴포넌트와 함수 컴포넌트를 대체하는 새로운 방식의 컴포넌트 작성법으로 Hooks 함수의 추가

그중 React18 업데이트된 기능 중 가장 큰 변화는 동시성이라는 개념의 추가라고 한다.

 

1. Automatic Batching 자동배치

컴포넌트 업데이트 시 배칭(최적화를 위해 업데이트 사항들을 한번에 모아서 실행하는 기능)을 자동으로 처리하는 기능

원래 리액트는 하나의 콜백이나 이벤트 리스너같은 것들을 state에 묶어서 수동 배칭 처리해주었으나,

state 에 대해 따지지 않고 리렌더링을 발생시킬만한 모든 변경을 묶어서 처리할 수 있게되었다.

 

2. Concurrent Rendering Improvemnts 동시 렌더링 개선

기존의 리액트 애플리케이션은 렌더링 프로세스가 시작되면 해당 프로세스가 완료될 때까지 다른 작업을 할 수 없어 애플리케이션이 사용자와 상호작용할 때 지연과 느림으로 불편함을 유발할 수 있다.

Concurrent Mode 는 리액트의 새로운 렌더링 모드로서 리액트의 렌더링 프로세스를 비동기적으로 처리할 수 있도록 하여 애플리케이션의 성능을 향상시키는 방법을 제공한다.

suspense 컴포넌트가 추가되어 기존 동기적이었던 업데이트 방식을 개선하여 React 업데이트들을 컴포넌트 단위로 분할하고 병렬적으로(비동기적) 처리할 수 있게 되어 앱의 응답속도나 사용성이 개선되었다고 한다.

 

3. Server Components

서버 컴포넌트는 기존 클라이언트 컴포넌트와 달리 브라우저에서 실행되지 않고 서버에서 렌더링시킬 수 있다.

 

개선된 성능과 빠른 로딩 속도와 더불어 서버 리소스에 바로 접근하기 때문에, data prefetching, prerendering, 검색엔진 최적화 등 SSR이 가진 장점들이 가능해진다.

https://tech.kakaopay.com/post/react-server-components/

React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그

 

4. Transition

비교적 긴급하지 않은 UI 업데이트를 transition 이라고 한다. 우선 순위가 낮은 업데이트를 transition으로 표시하여 리액트는 렌더링을 더 쉽게 최적화하고 업데이트 우선순위를 매길 수 있는 기능이 추가되었다.

 

몇가지 Hooks 함수들

기존 클래스 컴포넌트와 함수 컴포넌트를 대체할 수 있으며, 컴포넌트를 더욱 직관적으로 간결하게 작성할 수 있다. 기존 코드를 리팩토링하는데에 도움이 되며 코드의 가독성과 재사용성을 높여준다.

1. useState

컴포넌트의 상태를 관리

2. useEffect

라이프 사이클 이벤트를 다룬다

3. useContext

컴포넌트 상위 계층에서 전달된 데이터를 사용

4. useReducer

복잡한 상태를 관리하는데 사용

5. useCallback, useMemo

성능 최적화를 위해 사용

 

 

React18 에서 추가된 Hooks 함수

1. useId

하이드레이션(hydration)이란, 클라이언트 측에서 리액트 애플리케이션을 렌더링할 때 서버에서 보내는 HTML 과 동일한 컴포넌트 트리를 생성하기 위해 사용하는 기술로, 서버 측에서 생성된 HTML과 클라이언트 측에서 생서되는 자바스크립트를 이용하여 초기 상태를 동기화하는 과정이다.

미스매치(missmatch)란, 하이드레이션 시에 서버 측에서 생성된 HTML에서 사용한 ID 와 클라이언트 측에서 생성하는 ID가 다를 경우, 상태의 불일치로 인하여 예기치 않은 동작이 발생할 때를 의미한다.

 

해당 훅은 하이드레이션에도 미스매치를 피할 수 있는 유니크한 id값을 생성해주며, 리액트의 서버 컴포넌트를 지원하기 위해 나왔다고 함

미스매치 상황을 방지하기 위하여 서버와 클라이언트 간 일관된 id를 생성해주는 훅으로 하이드레이션 과정에서 예기치 않은 오류가 발생하는 것을 방지할 수 있다고 한다.

 

2. useTransition

트랜지션을 수동 배치할 수 있게 만든 훅

일부 상태 업데이트를 긴급하지 않은 것으로 간주하여 관리가 가능해진다.

 

리액트의 상태값 변화는 기본적으로 전부 긴급 업데이트지만 업데이트가 급하지 않은 일부 상태가 업데이트 되는 것을 막아서 렌더링을 최적화할 수 있는 훅이다.

const [startTransition, isPending] = useTransition({ timeoutMs: n });

startTransition : 어떤 상태변화를 지연하고 싶은지 지정할 수 있는 함수

isPending : 진행 여부를 나타내는 값, 트랜지션이 진행 중인지 알 수 있음

timeoutMs : 최대 n초 간 이전화면을 유지하는 딜레이타임

 

3. useDeferredValue

DOM 트리에서 급하지 않은 부분의 리렌더링을 지연시키기 위한 훅으로 useState보다 useDebounce 에 가까운 사용법을 지녔다고 한다.

useTransition 은 비동기 작업이 끝날 때까지 이전 화면을 유지하거나 로딩을 시각적으로 보여줄 수 있지만,

useDeferredValue 는 비동기 작업의 결과를 표시하기 전에 일정 시간동안 이전 ui의 상태를 유지함으로써 부드러운 전환이 가능하게 해준다.

const deferredSearchQuery = useDeferredValue(searchQuery, { timeoutMs: n });

 

4. useSyncExternalStore

외부 스토어에 대한 업데이트를 강제로 동기화시켜주는 동시성을 위한 useEffect 훅

 

동시성 업데이트로 렌더링이 렌더링을 일시중지할 수 있게 되면서 문제가 발생하는데, 컴포넌트의 업데이트를 일시중지한 시점에도 여전히 외부 스토어에서 렌더링에 사용되는 데이터와 이와 관련된 변경사항을 가져와 버릴 수 있게 되어버린다. 그것을 막고 값을 단일화해주는 훅이다.

 

5. useInsertionEffect

Css in Js 라이브러리를 사용할 경우 렌더링 도중에 스타일을 바꿔줄 때 발생하는 성능 문제를 해결할 수 있는 훅으로,

DOM이 변경되고나서 레이아웃을 변경하기 전에 실행되므로 useLayoutEffect 와 유사하다.