[김호준] : 3주차 PR

pages/3week/hojoon/_meta.json

@@ -1,4 +1,5 @@
 {
   "about": "About",
-  "study": "Study"
+  "study": "Study",
+  "hooks": "Hooks"
 }

pages/3week/hojoon/about.mdx

@@ -1 +1,31 @@
 ## 이야기해보기 파일
+
+> useEffect에서 무한 루프를 피하기 위해서 useCallback감싸서 넣었던 코드가 있었는데 useEffect외부에 있던 관련 함수를 내부로 가져오면서
+> useCallback도 삭제할 수 있었고 내부에서 사용할 부수 효과라면 내부에서 만들어서 정의해서 사용하는 편이 훨씬 도움이 된다. 라는 것을 배웠다.
+
+## useEffect에서 비동기 함수 작성할 때
+
+- 비동기 함수가 useEffect 내부에 존재하게 되면 클린업 함수에서 이전 비동기 함수에 대한 처리를 추가하는 것이 좋다.
+
+```js
+let ignore = false;
+return () => {
+  ignore = true;
+};
+```
+
+> 그런데 매번 이러한 로직을 따로 작성해줘야고 하나의 컴포넌트에서 여러개의 버튼이 있고 모달과 같은 컴포넌트를 띄울 때 그리고 데이터는 서버에서 불러와야 할 때 이런식의
+> 로직은 전혀 도움이 되지 않는다.
+> 이러한 문제들을 해결하기 위해 나온것이 react-query, swr과 같은 data fetch 라이브러리라고 한다.
+
+## 공식문서에서 찾아본 다른 hooks
+
+- useInsertionEffect
+  > CSS-in-JS 전용 라이브러리를 위한 훅
+- useTransition
+  > useTransition은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다.
+- useId
+
+  > 고유한 id를 만들때 사용한다.(문자열)
+
+- useSyncExternalStore

pages/3week/hojoon/hooks.mdx

@@ -0,0 +1,17 @@
+## useState
+
+- 함수를 호출한 결과가 아니라 함수 자체를 전달하면 React는 초기화 중에만 함수를 호출한다.
+
+```js
+function TodoList() {
+  const [todos, seTodos] = useState(createInitialTodos());
+}
+
+function TodoList() {
+  const [todos, seTodos] = useState(createInitialTodos);
+}
+```
+
+## useEffect
+
+- Effect로 인해 브라우저가 화면을 그리는 것을 차단해야 하는 경우, useEffect를 useLayoutEffect로 바꾸세요. 브라우저 페인팅 전에 Effect를 실행하는 것이 중요한 경우에만

pages/3week/hojoon/study.mdx

@@ -1 +1,60 @@
-## 정리하기 파일
+## useState
+
+- 매번 실행되는 함수형 컴포넌트에서 state의 값을 유지하고 사용하기 위해서 리액트는 클로저를 활용하고 있다.
+- 실제 리액트 코드에서는 useReducer를 이용해 구현되어 있다.
+- 게으른 초기화
+  - 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용
+  - localStorage, sessionStorage
+
+## useEffect
+
+- 알려진 것처럼 생명주기 메서드를 대체하기 위한 훅도 아니다.
+- 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다.
+- 관찰하는 것이 아니라 state나 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수라고 볼 수 있다. -> 함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행하기 때문이다.
+
+### CleanUp
+
+- 언마운트라기 보다는 이전의 값을 기준으로 실행되는, 이전 상태를 청소해 주는 개념으로 보는 것이 옳다.
+
+#### 기명함수 사용하기
+
+- 관리해야 할 useEffect의 수가 많아지면 파악하기 어려워지기 때문이다.
+
+## useMemo
+
+## useCallback
+
+## useRef
+
+- 그 값이 변하더라도 렌더링을 발생시키지 않는다.
+- 컴포넌트가 렌더링될 때만 생성되며, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다.
+- 내부는 렌더링에 영향을 미치면 안되기 때문에 useMemo로 구현되어 있다.
+
+## useContext
+
+- 부모 컴포넌트가 렌더링되면 하위 컴포넌트는 모두 리렌더링된다
+- 단순히 상태를 주입할 뿐 그 이상의 기능도, 그 이하의 기능도 하지 않는다.
+- 렌더링 최적화에 아무런 도움이 되지 않는다.
+
+## useReducer
+
+- 좀더 복잡한 형태의 state를 사용할 때
+- 결국 클로저를 활용해 값을 가둬서 state를 관리한다는 사실에는 변함이 없다.
+
+## useImperativeHandle
+
+1. ref를 받고자하는 컴포넌트에서 forwardRef로 감싸고 두 번째 인수로 ref를 전달받는다.
+2. useImperativeHandle을 사용해서 ref에 대한 추가 동작을 정의, 두 번째 인수로 useEffect의 deps와 같은 의존성 값을 넘겨준다.
+
+## useLayoutEffect
+
+1. 리액트다 DOM을 업데이트
+2. useLayoutEffect를 실행
+3. 브라우저에 변경 사항을 반영
+4. useEffect를 실행
+
+## useDebugValue
+
+## 고차 컴포넌트 vs 커스텀 훅
+
+- 렌더링 결과물에 영향을 줄 때는 고차 컴포넌트, 공통 로직을 격리할 때는 커스텀 훅을 사용하는 방향이 좋아 보인다.

theme.config.jsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 export default {
   logo: <strong>Modern React DeepDive Book Study</strong>,
   project: {
-    link: "https://github.com/shuding/nextra",
+    link: "https://github.com/HOJOON07/react-deepdive-study",
   },
   sidebar: {
     // 시이드바 설정 config