Merge pull request #50 from KJ-StudyWithMe/진경

[10장][진경] 리액트 17과 18의 변경 사항 살펴보기

[05장] 리액트와 상태 관리 라이브러리/진경/상태관리와 상태 관리 라이브러리 .md

@@ -83,7 +83,7 @@
 
 - `예시 코드` 2개
   - atom 개념을 도입하면서 API가 간결하다.
-  - recoild의 atom에서는 각 상태값이 모두 별도의 키를 필요했는데, jotai는 이 부분을 추상화해 사용자가 키를 관리할 필요없다. => 객체의 참조를 통해 값을 관리한다.
+  - recoil의 atom에서는 각 상태값이 모두 별도의 키를 필요했는데, jotai는 이 부분을 추상화해 사용자가 키를 관리할 필요없다. => 객체의 참조를 통해 값을 관리한다.
   - recoil에서 처럼 selector 없이도 atom 값에서 또 다른 파생된 상태를 만들수 있다.
 
 #### Zustand
@@ -98,4 +98,4 @@
 #### 상태 관리 라이브러리 선택법
 
 - 라이브러리별로 특징을 잘 파악해서 상황에 맞는 라이브러리를 선택하자
-- 메인테이너가 많고 다운로드가 활발하며 이슈가 관리가 잘되고 있는 라이브러리를 선택한는 것이 좋다.
+- 메인테이너가 많고 다운로드가 활발하며 이슈가 관리가 잘되고 있는 라이브러리를 선택하는 것이 좋다.

[10장] 리액트 17과 18의 변경 사항 살펴보기/진경/10.1 리액트 17 버전 살펴보기.md

@@ -0,0 +1,30 @@
+### 리액트 17 버전 살펴보기
+
+#### 점진적인 업데이트가 17 버전부터 가능하게 되었다.
+
+- 하지만 이건 언제까지나 차선책이지 한꺼번에 업데이트 하는 것이 복잡성 감소 측면에서 좋다.
+
+#### 이벤트 위임 방식의 변경
+
+- 이벤트 위임
+  - 이벤트를 상위 컴포넌트에만 붙이는 것을 의미힌다.
+  - 이벤트 타입(click, change)당 하나의 핸들러를 루트에 부착한다.
+  - 17 이전에서는 이벤트 위임이 모두 document에서 이루어 졌는데, document가 아닌 리액트 컴포넌트 최상단 트리(루트)로 바뀌었다.
+    - 이는 이벤트 버블링으로 인한 혼선을 막을 수 있다.
+      <img src="./img/KakaoTalk_Photo_2024-05-17-19-33-31.jpeg"/>
+
+#### `import React from 'react'`가 더 이상 필요없다.
+
+- 이러한 import 구문 없이도 JSX를 JS로 변환할 수 있게 되었다.
+  - 이를 통해 번들링 크기도 약간 줄일 수 있고, 컴포넌트 작성을 더욱 간결하게 해준다.
+
+#### 그 밖의 주요 변경 사항
+
+- 이벤트 폴링이 제거 되었다.
+  - 이벤트 폴링 : SyntheticEvent 풀을 만들어서 이벤트가 발생할 때마다 가져오는 것을 의미한다.
+- useEffect 클린업 함수의 비동기 실행
+  - 클린업 함수는 리액트 16 버전까지는 동기적으로 처리됐다. 이로 인해 클린업 함수가 완료되기 전까지는 다른 작업들의 실행이 멈추므로 불필요한 성능 저하로 이어졌다.
+  - 17 부터는 화면이 완전히 업데이트된 이후(커밋 단계가 완료될 때까지)에 클린업 함수가 비동기적으로 실행된다. => 이로인해 시간적으로 빨라지는 성능적인 이점을 볼 수 있게 되었다.
+- 컴포넌트의 undefined 반환에 대한 일관적인 처리
+  - 17부터는 forwardRef나 memo에서 undefined를 반환하는 경우에도 에러를 발생시킨다.
+  - 18 부터는 undefined를 반환해도 에러가 발생하지 않는다.

[10장] 리액트 17과 18의 변경 사항 살펴보기/진경/10.2 리액트 18 버전 살펴보기.md

@@ -0,0 +1,77 @@
+### 리액트 18 버전 살펴보기
+
+가장 큰 변경점은 동시성 지원이다.
+
+#### 새로운 훅들이 추가되었다.
+
+- useId
+
+  - 컴포넌트별로 유니크한 값을 생성하는 새로운 훅이다.
+  - useId를 사용하면 클라이언트와 서버에서 불일치를 피하면서 컴포넌트 내부의 고유한 값을 생성할 수 있게 됐다.
+
+- useTransition
+
+  - UI 변경을 가로막지 않고 상태를 업데이트할 수 있는 리액트 훅이다.
+  - 상태 업데이트를 급하지 않은 것으로 간주해 무거운 렌더링 작업을 조금 미룰 수 있으며, 사용자에게 조금 더 나은 사용자 경험을 제공할 수 있다.
+  - `const [isPending, startTransition] = useTransition()`
+  - 동시성을 다룰 수 있게 해준다.
+
+- useDeferredValue
+
+  - 리액트 컴포넌트 트리에서 리렌더링이 급하지 않은 부분을 지연할 수 있게 도와주는 훅이다.
+  - 디바운스와 다른 점은 지연 시간 없이 첫번째 렌더링이 완료된 이후에 이 `useDeferredValue`로 지연된 렌더링을 수행한다는 점이다.
+
+- useSyncExternalStore
+
+  - 렌더링 중간에 발생하는 값 업데이트를 적절하게 처리하지 못해 생기는 테어링 현상을 막을 수 있다.
+  - 싱태 관리 라이브러리를 위한 훅이다.
+
+- useInsertionEffect
+  - CSS-in-js 라이브러리를 위한 훅이다.
+  - useLayoutEffect는 모든 DOM의 변경 작업이 다 끝난 이후에 실행되는 반면 useInsertionEffect는 이러한 DOM 변경 작업 이전에 실행된다.
+  - 가급적 참고만하고 사용하지 않는게 좋다.
+
+#### react-dom/client
+
+- createRoot
+
+  - 기존의 react-dom에 있던 render 메서드를 대체할 새로운 메서드이다.
+  - react 18 기능을 사용하고 싶다면 createRoot와 render를 함께 사용해야 한다.
+
+  ```
+  import ReactDOM from 'react-dom'
+  import App from 'App'
+
+  const container = document.getElementById('root')
+
+  const root = ReactDOM.createRoot(container)
+  root.render(<App />)
+  ```
+
+- hydrateRoot
+
+  - 서버 사이드 렌더링 애플리케이션에서 하이드레이션을 하기 위한 새로운 메서드이다. React DOM 서버 API와 함께 사용된다.
+
+  ```
+  const container = document.getElementById('root')
+
+  const root = ReactDOM.hydrateRoot(container, <APP />)
+  ```
+
+#### react-dom/server
+
+컴포넌트를 생성하는 API에 변경이 있다.
+
+- renderToPipeableStream
+  - 리액트 컴포넌트를 HTML로 렌더링하는 메서드다.
+  - 이름에서 알 수 있듯 스트림을 지원하는 메서드로, HTML을 점진적으로 렌더링하고 클라이언트에서는 중간에 script를 삽입하는 등의 작업을 할 수 있다.
+
+#### 자동 배치
+
+여러 상태 업데이트를 하나의 리렌더링으로 묶어서 성능을 향상시키는 방법을 의미한다.
+
+#### 더욱 엄격해진 엄격 모드
+
+#### Suspense 기능 강화
+
+#### 인터넷 익스플로러 지원 중단에 따른 추가 폴리필 필요 요망