functionBee-chapter3

.github/pull_request_template.md

@@ -1,5 +1,20 @@
-**Participant**
+## 리뷰 요청 사항
+[어떤 부분에 대해 코드 리뷰를 요청하고 싶은지 명확하게 작성해주세요.]
 
+## 리뷰 내용
+[코드 리뷰를 받고자 하는 코드에 대한 설명을 작성해주세요. 어떤 기능을 구현하려고 하는지, 어떤 문제를 해결하려는지 등을 포함시켜주세요.]
+
+## 주요 변경 사항
+[주요하게 변경한 부분이나 수정한 내용을 간략히 설명해주세요.]
+
+## 특별히 확인해야 할 부분
+[리뷰어에게 특별히 확인해야 할 부분이 있다면 작성해주세요. 예를 들어, 성능 개선, 보안 이슈, 코드 스타일 등을 확인해야 할 수 있습니다.]
+
+## 참고 사항
+[리뷰어에게 알려주고 싶은 추가적인 정보나 참고 사항이 있다면 작성해주세요.]
+
+
+## 참여
 - [ ] @functionBee
 - [ ] @HYEOK999
 - [ ] @hyjoong

chapter03/info.md

@@ -4,25 +4,24 @@
 
 <br>
 
-- [03장: 리액트 훅 깊게 살펴보기](#03장-리액트-훅-깊게-살펴보기)
-  - [3.1 리액트 훅 깊게 살펴보기](#31-리액트-훅-깊게-살펴보기)
-    - [3.1.1 useState](#311-usestate)
-    - [3.1.2 useEffect](#312-useeffect)
-    - [3.1.3 useMemo](#313-usememo)
-    - [3.1.4 useCallback](#314-usecallback)
-    - [3.1.5 useRef](#315-useref)
-    - [3.1.6 useContext](#316-usecontext)
-    - [3.1.7 useReducer](#317-usereducer)
-    - [3.1.8 useImperativeHandle](#318-useimperativehandle)
-    - [3.1.9 useLayoutEffect](#319-uselayouteffect)
-    - [3.1.10 useDebugValue](#3110-usedebugvalue)
-    - [3.1.11 훅의 규칙](#3111-훅의-규칙)
-    - [3.1.12 정리](#3112-정리)
-  - [3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#32-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까)
-    - [3.2.1 사용자 정의 훅](#321-사용자-정의-훅)
-    - [3.2.2 고차 컴포넌트](#322-고차-컴포넌트)
-    - [3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#323-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까)
-    - [3.2.4 정리](#324-정리)
+- [3.1 리액트의 모든 훅 파헤치기](#31-리액트의-모든-훅-파헤치기)
+  - [3.1.1 useState](#311-usestate)
+  - [3.1.2 useEffect](#312-useeffect)
+  - [3.1.3 useMemo](#313-usememo)
+  - [3.1.4 useCallback](#314-usecallback)
+  - [3.1.5 useRef](#315-useref)
+  - [3.1.6 useContext](#316-usecontext)
+  - [3.1.7 useReducer](#317-usereducer)
+  - [3.1.8 useImperativeHandle](#318-useimperativehandle)
+  - [3.1.9 useLayoutEffect](#319-uselayouteffect)
+  - [3.1.10 useDebugValue](#3110-usedebugvalue)
+  - [3.1.11 훅의 규칙](#3111-훅의-규칙)
+  - [3.1.12 정리](#3112-정리)
+- [3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#32-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까)
+  - [3.2.1 사용자 정의 훅](#321-사용자-정의-훅)
+  - [3.2.2 고차 컴포넌트](#322-고차-컴포넌트)
+  - [3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?](#323-사용자-정의-훅과-고차-컴포넌트-중-무엇을-써야-할까)
+  - [3.2.4 정리](#324-정리)
 
 <br>
 
@@ -62,4 +61,4 @@
 
 ### 3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?
 
-### 3.2.4 정리
+### 3.2.4 정리

examples/chapter03/useEffect-1.jsx

@@ -0,0 +1,8 @@
+// useEffect의 일반적인 형태
+function Component() {
+    // ...
+    useEffect(() => {
+        // do sth
+    }, [props, state])
+    // ...
+}

examples/chapter03/useEffect-10.tsx

@@ -0,0 +1,9 @@
+function Component({
+    log
+}: {
+    log: string
+}){
+    useEffect(() => {
+        logging(log)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+}

examples/chapter03/useEffect-11.jsx

@@ -0,0 +1,3 @@
+useEffect(() => {
+    logging(user.id)
+}, [user.id])

examples/chapter03/useEffect-12.jsx

@@ -0,0 +1,5 @@
+useEffect(() => {
+    function logActiveUser() {
+        logging(user.id)
+    }
+}, [user.id])

examples/chapter03/useEffect-2.jsx

@@ -0,0 +1,18 @@
+/**
+ * 
+ * @returns 버튼 클릭시 counter가 1씩 중가
+ */
+function Component() {
+    const [counter, setCounter] = useState(0);
+
+    function handleClick() {
+        setCounter((prev) => prev + 1);
+    }
+
+    return (
+        <>
+            <h1>{counter}</h1>
+            <button onClick={handleClick}>+</button>
+        </>
+    )
+}

examples/chapter03/useEffect-3.jsx

@@ -0,0 +1,10 @@
+function Component() {
+    const counter = 1;;
+    // ...
+    return (
+        <>
+            <h1>{counter}</h1>
+            <button onClick={handleClick}>+</button>
+        </>
+    )
+}

examples/chapter03/useEffect-4.jsx

@@ -0,0 +1,14 @@
+function Component() {
+    const counter = 1;;
+
+    useEffect(() => {
+        console.log(counter)
+    })
+
+    return (
+        <>
+            <h1>{counter}</h1>
+            <button onClick={handleClick}>+</button>
+        </>
+    )
+}

examples/chapter03/useEffect-5.jsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+export default function App() {
+    const [counter, setCounter] = useState(0);
+
+    function handleClick() {
+        setCounter((prev) => prev + 1)
+    }
+
+    useEffect(() => {
+        function addMouseEvent() {
+            console.log(counter);
+        }
+
+        window.addEventListener('click', addMouseEvent)
+
+        // clean-up
+        return () => {
+            console.log('clean-up 함수 실행', counter);
+            window.removeEventListener('click', addMouseEvent)
+        }
+    }, [counter])
+
+    return (
+        <>
+            <h1>{counter}</h1>
+            <button onClick={handleClick}>+</button>
+        </>
+    )
+
+}
+
+/**
+ * @return clean-up 함수를 사용하여 이벤트 리스너를 제거
+ * clean-up 함수 실행: 0
+ * 1
+ * clean-up 함수 실행: 1
+ * 2
+ */

examples/chapter03/useEffect-6.jsx

@@ -0,0 +1,30 @@
+// 최초 실행
+useEffect(() => {
+    function addMouseEvent() {
+        console.log(1);
+    }
+
+    window.addEventListener('click', addMouseEvent)
+
+    // clean-up 함수
+    return () => {
+        console.log('clean-up 함수 실행', 1);
+        window.removeEventListener('click', addMouseEvent)
+    }
+}, [counter])
+
+// 이후 실행
+useEffect(() => {
+    function addMouseEvent() {
+        console.log(2);
+    }
+
+    window.addEventListener('click', addMouseEvent)
+
+    // clean-up 함수
+    return () => {
+        console.log('clean-up 함수 실행', 2);
+        window.removeEventListener('click', addMouseEvent)
+    }
+}, [counter])
+

examples/chapter03/useEffect-7.jsx

@@ -0,0 +1,11 @@
+// 1
+function Component() {
+    console.log('렌더링 됨');
+}
+
+// 2
+function Component() {
+    useEffect(() => {
+        console.log('렌더링 됨');
+    })
+}

examples/chapter03/useEffect-8.jsx

@@ -0,0 +1,33 @@
+const MyReact = (function () {
+    const global = {}
+    let index = 0
+
+    function useEffect(callback, dependencies) {
+        const hooks = global.hooks
+
+        // 이전 훅 정보가 있는지 확인한다.
+        let previousDependencies = hooks[index]
+
+        // 변경되었는지 확인
+        // 이전 값이 있다면 이전 값을 얕은 비교로 비교해 변경이 일어났는지 확인한다.
+        // 이전 값이 없다면 최초 실행이므로 변경이 일어난 것으로 간주해 실행을 유도한다.
+        let isDependenciesChanged = previousDependencies ? dependencies.some(
+            (value, index) => !Object.is(value, previousDependencies[idx])
+        ) : true
+
+        // 변경이 일어났다면 첫번째 인수인 콜백 함수를 실행
+        if (isDependenciesChanged) {
+            callback()
+        }
+
+        // 현재 의존성을 훅에 다시 저장
+        hooks[index] = dependencies
+
+        // 다음 훅이 일어날 때를 대비하기 위해 index를 추가
+        index++
+    }
+
+    return {
+        useEffect
+    }
+})()

examples/chapter03/useEffect-9.jsx

@@ -0,0 +1,3 @@
+useEffect(() => {
+    console.log(props);
+}, []) // eslint-disable-line react-hooks/exhaustive-deps