diff --git "a/[05\354\236\245] \353\246\254\354\225\241\355\212\270\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254/\354\247\204\352\262\275/\354\203\201\355\203\234\352\264\200\353\246\254\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 .md" "b/[05\354\236\245] \353\246\254\354\225\241\355\212\270\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254/\354\247\204\352\262\275/\354\203\201\355\203\234\352\264\200\353\246\254\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 .md"
index 34ef9b5..44df2c4 100644
--- "a/[05\354\236\245] \353\246\254\354\225\241\355\212\270\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254/\354\247\204\352\262\275/\354\203\201\355\203\234\352\264\200\353\246\254\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 .md"
+++ "b/[05\354\236\245] \353\246\254\354\225\241\355\212\270\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254/\354\247\204\352\262\275/\354\203\201\355\203\234\352\264\200\353\246\254\354\231\200 \354\203\201\355\203\234 \352\264\200\353\246\254 \353\235\274\354\235\264\353\270\214\353\237\254\353\246\254 .md"
@@ -83,7 +83,7 @@
- `예시 코드` 2개
- atom 개념을 도입하면서 API가 간결하다.
- - recoild의 atom에서는 각 상태값이 모두 별도의 키를 필요했는데, jotai는 이 부분을 추상화해 사용자가 키를 관리할 필요없다. => 객체의 참조를 통해 값을 관리한다.
+ - recoil의 atom에서는 각 상태값이 모두 별도의 키를 필요했는데, jotai는 이 부분을 추상화해 사용자가 키를 관리할 필요없다. => 객체의 참조를 통해 값을 관리한다.
- recoil에서 처럼 selector 없이도 atom 값에서 또 다른 파생된 상태를 만들수 있다.
#### Zustand
@@ -98,4 +98,4 @@
#### 상태 관리 라이브러리 선택법
- 라이브러리별로 특징을 잘 파악해서 상황에 맞는 라이브러리를 선택하자
-- 메인테이너가 많고 다운로드가 활발하며 이슈가 관리가 잘되고 있는 라이브러리를 선택한는 것이 좋다.
+- 메인테이너가 많고 다운로드가 활발하며 이슈가 관리가 잘되고 있는 라이브러리를 선택하는 것이 좋다.
diff --git "a/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.1 \353\246\254\354\225\241\355\212\270 17 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.md" "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.1 \353\246\254\354\225\241\355\212\270 17 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.md"
new file mode 100644
index 0000000..f063a26
--- /dev/null
+++ "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.1 \353\246\254\354\225\241\355\212\270 17 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.md"
@@ -0,0 +1,30 @@
+### 리액트 17 버전 살펴보기
+
+#### 점진적인 업데이트가 17 버전부터 가능하게 되었다.
+
+- 하지만 이건 언제까지나 차선책이지 한꺼번에 업데이트 하는 것이 복잡성 감소 측면에서 좋다.
+
+#### 이벤트 위임 방식의 변경
+
+- 이벤트 위임
+ - 이벤트를 상위 컴포넌트에만 붙이는 것을 의미힌다.
+ - 이벤트 타입(click, change)당 하나의 핸들러를 루트에 부착한다.
+ - 17 이전에서는 이벤트 위임이 모두 document에서 이루어 졌는데, document가 아닌 리액트 컴포넌트 최상단 트리(루트)로 바뀌었다.
+ - 이는 이벤트 버블링으로 인한 혼선을 막을 수 있다.
+ 
+
+#### `import React from 'react'`가 더 이상 필요없다.
+
+- 이러한 import 구문 없이도 JSX를 JS로 변환할 수 있게 되었다.
+ - 이를 통해 번들링 크기도 약간 줄일 수 있고, 컴포넌트 작성을 더욱 간결하게 해준다.
+
+#### 그 밖의 주요 변경 사항
+
+- 이벤트 폴링이 제거 되었다.
+ - 이벤트 폴링 : SyntheticEvent 풀을 만들어서 이벤트가 발생할 때마다 가져오는 것을 의미한다.
+- useEffect 클린업 함수의 비동기 실행
+ - 클린업 함수는 리액트 16 버전까지는 동기적으로 처리됐다. 이로 인해 클린업 함수가 완료되기 전까지는 다른 작업들의 실행이 멈추므로 불필요한 성능 저하로 이어졌다.
+ - 17 부터는 화면이 완전히 업데이트된 이후(커밋 단계가 완료될 때까지)에 클린업 함수가 비동기적으로 실행된다. => 이로인해 시간적으로 빨라지는 성능적인 이점을 볼 수 있게 되었다.
+- 컴포넌트의 undefined 반환에 대한 일관적인 처리
+ - 17부터는 forwardRef나 memo에서 undefined를 반환하는 경우에도 에러를 발생시킨다.
+ - 18 부터는 undefined를 반환해도 에러가 발생하지 않는다.
diff --git "a/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.2 \353\246\254\354\225\241\355\212\270 18 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.md" "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.2 \353\246\254\354\225\241\355\212\270 18 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.md"
new file mode 100644
index 0000000..e1c60bc
--- /dev/null
+++ "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/10.2 \353\246\254\354\225\241\355\212\270 18 \353\262\204\354\240\204 \354\202\264\355\216\264\353\263\264\352\270\260.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()
+ ```
+
+- hydrateRoot
+
+ - 서버 사이드 렌더링 애플리케이션에서 하이드레이션을 하기 위한 새로운 메서드이다. React DOM 서버 API와 함께 사용된다.
+
+ ```
+ const container = document.getElementById('root')
+
+ const root = ReactDOM.hydrateRoot(container, )
+ ```
+
+#### react-dom/server
+
+컴포넌트를 생성하는 API에 변경이 있다.
+
+- renderToPipeableStream
+ - 리액트 컴포넌트를 HTML로 렌더링하는 메서드다.
+ - 이름에서 알 수 있듯 스트림을 지원하는 메서드로, HTML을 점진적으로 렌더링하고 클라이언트에서는 중간에 script를 삽입하는 등의 작업을 할 수 있다.
+
+#### 자동 배치
+
+여러 상태 업데이트를 하나의 리렌더링으로 묶어서 성능을 향상시키는 방법을 의미한다.
+
+#### 더욱 엄격해진 엄격 모드
+
+#### Suspense 기능 강화
+
+#### 인터넷 익스플로러 지원 중단에 따른 추가 폴리필 필요 요망
diff --git "a/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/img/KakaoTalk_Photo_2024-05-17-19-33-31.jpeg" "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/img/KakaoTalk_Photo_2024-05-17-19-33-31.jpeg"
new file mode 100644
index 0000000..6707d84
Binary files /dev/null and "b/[10\354\236\245] \353\246\254\354\225\241\355\212\270 17\352\263\274 18\354\235\230 \353\263\200\352\262\275 \354\202\254\355\225\255 \354\202\264\355\216\264\353\263\264\352\270\260/\354\247\204\352\262\275/img/KakaoTalk_Photo_2024-05-17-19-33-31.jpeg" differ