[SeSACXCodingOn] 웹풀스택과정 12W_03 : 리액트 (2)

---

[🌱목차🌱]

 

1. Life Cycle
   1. 함수형 컴포넌트 
   2. 클래스형 컴포넌트
   3. 실습
2. hooks
   1. useMemo
   2. useCallback
   3. useReducer
   4. 커스텀 훅

+) 회고
 

---

1. Life Cycle

Life cycle은 실행부터 종료까지를 말하며 모든 리액트 컴포넌트에 존재합니다. Life Cycle의 용어를 알아보자면,

• Mount
  • 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현합니다. 
  • DOM이 생성되고 웹 브라우저 상에 나타남
• Update
  • props 나 state 가 바뀌었을 때 업데이트 
• Unmount
  • 컴포넌트가 화면에서 사라질 때 

 

[Life Cycle 이해하기]

01 - 1. 함수형컴포넌트

함수형 컴포넌트에서는 useEffect()를 사용하여 Mount, Update, Unmount시 특정 작업을 처리합니다. 
먼저 부모 컴포넌트와 자식 컴포넌트를 따로 생성해주고 
 

//LifeCycleFunc.js
import React, { useState } from 'react';
import LifeCycleFuncChild from './LifeCycleFuncChild';

export default function LifeCycleFunc() {
  const [number, setNumber] = useState(0); //1
  const changeNumber = () => {
    //2
    setNumber(number + 1);
  };
  return (
    <div>
      {/* 3 */}
      <button onClick={changeNumber}>Plus</button>
      {/* 4 */}
      <LifeCycleFuncChild number={number} />
    </div>
  );
}

1. 부모컴포넌트로 useState 훅을 사용하여 초기값이 0인 'number' 상태변수를 초기화합니다. 
2. 'changeNumber' 라는 함수를 정의하는데 이 함수는 호출될 때 setNumber 상태변수를 이용하여 'number'의 상태를 1 증가시킵니다. 
3. 컴포넌트는 "Plus"로 레이블된 버튼을 렌더링하고 버튼의 onClick 이벤트에 changeNumber 함수를 이벤트 핸들러로 전달합니다.
4. 또한 number 상태를 프롭으로 전달하여 'LifeCycleFuncChild' 컴포넌트를 렌더링합니다. 

//LifeCycleFuncChild.js
import React, { useEffect } from 'react';

export default function LifeCycleFuncChild({ number }) {
  useEffect(() => {
    console.log('컴포넌트 마운트 !!');
  }, []);

  useEffect(() => {
    console.log('컴포넌트 마운트 or 업데이트!!');
  });

  return (
    <div>
      <div>현재 Number 값은 {number}</div>
    </div>
  );
}

1. 자식 컴포넌트로 부모컴포넌트로부터 'number'라는 이름의 프롭을 받습니다. 이 프롭은 부모에서 전달된 'number'상태의 값을 나타냅니다. 
2. 컴포넌트 내부에는 두개의 'useEffect'훅이 있습니다. 
   1. 첫번째 useEffect => 의존성 배열이 비어있습니다. 그렇기 때문에 컴포넌트가 처음으로 마운트될 때 한번만 실행됩니다. 
   2. 두번째 useEffect => 의존성 배열이 없습니다. 그렇기 때문에 컴포넌트가 마운트되거나 업데이트될때마다 실행됩니다. 

=>Plus 버튼 클릭
-> number 상태 증가
->이 값은 자식 컴포넌트에 프롭으로 전달 
->자식 컴포넌트는 useEffect 훅을 사용하여 컴포넌트 라이프사이클을 보여줌 
 
data 값이 update될 때 동작하는 useEffect()훅을 코드로 만들어보자면 
 

import React, { useState } from 'react';
import LifeCycleFuncChild from './LifeCycleFuncChild';

export default function LifeCycleFunc() {
  const [number, setNumber] = useState(0);
  const [visible, setVisible] = useState(true);
  const changeNumber = () => {
    setNumber(number + 1);
  };
  const changeVisible = () => {
    setVisible(!visible);
  };
  return (
    <div>
      <button onClick={changeNumber}>Plus</button>
      <button onClick={changeVisible}>On/Off</button>

      {visible && <LifeCycleFuncChild number={number} />}
    </div>
  );
}

1. 먼저 부모 컴포넌트에서 changeVisible 함수를 작성하여 버튼 클릭시 visible 상태를 반전시킵니다. 
2. visible이 true 일때만 LifeCycleFuncChild 컴포넌트를 렌더링하며, 그렇지 않을 경우 렌더링하지 않습니다. 

import React, { useEffect, useState } from 'react';

export default function LifeCycleFuncChild({ number }) {
  const [input, setInput] = useState('');
  useEffect(() => {
    console.log('컴포넌트 마운트 !!');
  }, []);

  useEffect(() => {
    console.log('컴포넌트 마운트 or 업데이트!!');
  });

  useEffect(() => {
    console.log(
      '컴포넌트 마운트 or input 상태가 변경됨에 따라 컴포넌트 업데이트'
    );
  }, [input]);

  return (
    <div>
      <div>현재 Number 값은 {number}</div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
    </div>
  );
}

1.  input이라는 상태변수와 setInput함수를 useState 훅을 사용하여 초기화합니다. 
2. 마지막 useEffect 훅은 input 상태를 의존성으로 가지고 있어, input 상태가 변경될때마다 실행됩니다. 

 

01 - 2.클래스형컴포넌트 (참고용^^)

클래스형 컴포넌트에서 Lifecycle 에따라 호출되는 메서드는 다음과 같습니다. 

1. 마운트(Mount)
   1. constructor
   2. render
   3. getDerivedStateFromProps
   4. componentDidMount
2. 업데이트(Update)
   1. getDerivedStateFromProps
   2. shouldComponentUpdate
   3. componsntDidUpdate
3. 언마운트(unmount)
   1. componentWillUnmount

//LifeCycleClass.js
import React, { Component } from 'react';
import LifeCycleClassChild from './LifeCycleClassChild';

export default class LifeCycleClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      visible: true,
    };
  }

  changeNumberState = () => this.setState({ number: this.state.number + 1 });
  changeVisibleState = () => this.setState({ visible: !this.state.visible });

  render() {
    return (
      <>
        <button onClick={this.changeNumberState}>PLUS</button>
        <button onClick={this.changeVisibleState}>ON/OFF</button>
        {this.state.visible && (
          <LifeCycleClassChild number={this.state.number} />
        )}
      </>
    );
  }
}

1. constructor 메서드를 사용하여 초기 상태를 결정해줍니다. -> number, visible 두 상태변수를 초기화합니다. 
2. 현재 number의 상태값을 자식 컴포넌트에 number 프롭으로 전달합니다. 

//LifeCycleClassChild.js
import React, { Component } from 'react';

export default class LifeCycleClassChild extends Component {
  componentDidMount() {
    console.log('컴포넌트 마운트!!');
  }
  componentDidUpdate() {
    console.log('컴포넌트 업데이트!');
  }
  componentWillUnmount() {
    console.log('컴포넌트 언마운트!!');
  }
  render() {
    return <div>현재 Number 값은 {this.props.number}입니다.</div>;
  }
}

1. componentDidMount 메서드는 컴포넌트가 마운트될 때 한번만 실행됩니다. 
2. componentDidUpdate 메서드는 컴포넌트가 업데이트될 때마다 실행됩니다. 
3. componentWillUnmount 메서드는 컴포넌트가 언마운트될 때 실행됩니다. 

---

[실습]

import React from 'react';
import PostItem from './PostItem';

export default function PostList() {
  return (
    <>
      <h1 style={{ textAlign: 'center', background: 'blue', color: 'white' }}>
        PostList
      </h1>
      <PostItem />
    </>
  );
}

import React, { useState, useEffect } from 'react';

export default function PostItem() {
  const [posts, setPosts] = useState();
  useEffect(() => {
    setTimeout(() => {
      setPosts(fakePosts);
    }, 2000);
  }, []);
  const fakePosts = [
    {
      id: 1,
      title:
        'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
      body: 'quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto',
    },
    {
      id: 2,
      title: 'qui est esse',
      body: 'est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla',
    },
    {
      id: 3,
      title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
      body: 'et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut',
    },
    {
      id: 4,
      title: 'eum et est occaecati',
      body: 'ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit',
    },
    {
      id: 5,
      title: 'nesciunt quas odio',
      body: 'repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quisest aut tenetur dolor neque',
    },
    {
      id: 6,
      title: 'dolorem eum magni eos aperiam quia',
      body: 'ut aspernatur corporis harum nihil quis provident sequi mollitia nobis aliquid molestiae perspiciatis et ea nemo ab reprehenderit accusantium quas voluptate dolores velit et doloremque molestiae',
    },
    {
      id: 7,
      title: 'magnam facilis autem',
      body: 'dolore placeat quibusdam ea quo vitae magni quis enim qui quis quo nemo aut saepe quidem repellat excepturi ut quia sunt ut sequi eos ea sed quas',
    },
    {
      id: 8,
      title: 'dolorem dolore est ipsam',
      body: 'dignissimos aperiam dolorem qui eum facilis quibusdam animi sint suscipit qui sint possimus cum quaerat magni maiores excepturi ipsam ut commodi dolor voluptatum modi aut vitae',
    },
    {
      id: 9,
      title: 'nesciunt iure omnis dolorem tempora et accusantium',
      body: 'consectetur animi nesciunt iure dolore enim quia ad veniam autem ut quam aut nobis et est aut quod aut provident voluptas autem voluptas',
    },
    {
      id: 10,
      title: 'optio molestias id quia eum',
      body: 'quo et expedita modi cum officia vel magni doloribus qui repudiandae vero nisi sit quos veniam quod sed accusamus veritatis error',
    },
  ];
  return (
    <div>
      <div>
        {posts ? (
          posts.map((post) => (
            <div
              style={{ textAlign: 'center', background: 'skyblue' }}
              key={post.id}
            >
              <div>
                No.{post.id}-{post.title}
              </div>
              <br />
              <div>{post.body}</div>
              <hr />
            </div>
          ))
        ) : (
          <div style={{ textAlign: 'center' }}> Loading...</div>
        )}
      </div>
    </div>
  );
}

1. useEffect 훅을 사용하여 컴포넌트가 마운트될때 2초후에 fakePosts 라는 가상의 포스트데이터를 setPosts 함수를 통해 설정

 
[실습2. 이전 실습에서 로컬의 데이터를 호출한 것을 jsonplaceholder 사이트로 요청 보내서 가져오기 (= axios 패키지 사용하기)]
npm install axios로 설치후 코드를 수정해주겠습니다. 
 

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function PostItem() {
  const [posts, setPosts] = useState();
  useEffect(() => {
    setTimeout(() => {
      getPost();
    }, 2000);
  }, []);
  const getPost = async () => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
    setPosts(res.data);
  };
  return (
    <div>
      <div>
        {posts ? (
          posts.map((post) => (
            <div
              style={{ textAlign: 'center', background: 'skyblue' }}
              key={post.id}
            >
              <div>
                No.{post.id}-{post.title}
              </div>
              <br />
              <div>{post.body}</div>
              <hr />
            </div>
          ))
        ) : (
          <div style={{ textAlign: 'center' }}> Loading...</div>
        )}
      </div>
    </div>
  );
}

 

---

02. Hooks

• React 의 새로운 기능 
• 클래스 컴포넌트에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 가능하도록 돕는 기능 
  • 클래스형 컴포넌트에서 사용할 수 있는 기능을 함수형 컴포넌트에서도 사용할 수 있도록 "낚아채는 기능"

[Hooks 사용 규칙]

• 최상위 단계에서만 호출 가능 
  • 최상위 컴포넌트 X 
  • 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 되는 것! 
• Hook은 오로지 React 함수형 컴포넌트 안에서만 호출 가능함.
• 커스텀 훅 이름은 "use"로 시작(권장사항)

[Hooks 종류]

• useState(): 상태 관리를 위한 가장 기본적인 훅
• useRef(): 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등) 
• useEffect(): 컴포넌트 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅 
• useMemo(): 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅 
• useCallback(): 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
• useReducer(): 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅 

 

02-1. useMemo()

useMemo()훅 적용전 예시를 보겠습니다.

import React, { useState } from 'react';

export default function UseMemo() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');
  //[before]
  const calc = () => {
    console.log('열심히 계산 중...');
    for (let i = 0; i < 100000; i++) {}
    return count ** 2;
  };
  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount(() => count + 1)}>Plus</button>
      <p>count :{count} </p>
      <p>calc :{calc()} </p>
    </div>
  );
}

1. useState를 사용하여 count 와 input 두 개의 상태를 관리합니다. 
2. calc 함수는 버튼을 클릭할 때마다 실행되는 함수로 함수 내부에서는 '열심히 계산중...'이라는 메시지를 콘솔에 출력 후 무의미한 계산을 100,000번 반복하고 count 상태의 제곱 값을 반환합니다. 

 
=> 이 예제는 UseMemo를 사용하지 않았기 때문에, calc() 함수는 매 렌더링 마다 호출됩니다. 따라서 버튼을 클릭할 때마다 '열심히 계산중...' 이 출력되고, 무의미한 계산이 수행됩니다. 
=> useMemo를 사용하면 계산 결과를 캐싱하여 성능을 최적화할 수 있습니다. 예를 들어 'count'상태가 변경되지 않는 한, calc()함수의 결과는 캐싱되어 재계산되지 않습니다. 
 

import React, { useState, useMemo } from 'react';

export default function UseMemo() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');
  //[before]
  // const calc = () => {
  //   console.log('열심히 계산 중...');
  //   for (let i = 0; i < 100000; i++) {}
  //   return count ** 2;
  // };

  //[after]
  const calc = useMemo(() => {
    for (let i = 0; i < 100000; i++) {}
    return count ** 2;
  }, [count]);
  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount(() => count + 1)}>Plus</button>
      <p>count :{count} </p>
      {/* [before] */}
      {/* <p>calc :{calc()} </p> */}
      {/* [after] */}
      <p>calc :{calc} </p>
    </div>
  );
}

1. useMemo 훅을 사용하여 계산결과를 캐싱후 렌더링 시에 불필요한 재계산을 방지합니다. 
2. useMemo를 사용하여 calc함수를 캐싱합니다. 
3. useMemo 훅을 사용하여 calc함수를 정의하고 두번째 매개변수로 [count]를 전달합니다. 이 뜻은 count 상태가 변경될 때만 calc함수를 재계산하도록 해줍니다. 다시 말해 count 상태가 변경되지 않는한 calc 함수는 이전에 계산된 값을 반환합니다. 
4. 주의할점은 렌더링부분에서 p태그는 calc 함수를 직접 호출하지않고 {calc}로 표시합니다. 이렇게 표시하면 calc함수가 아니라 캐시된 결과값이 표시됩니다. 
5. useMemo를 사용하면 calc함수 자체가 결과값을 가지고 있으므로 함수 호출 연산이 필요하지 않기 때문입니다. 

 
=> useMemo를 사용하여 count 상태에 의존하는 계산 결과를 캐싱함으로써, 'count'가 변경되지 않는 한 계산이 다시 수행되지 않습니다. 

02-2.useCallback()

//useCallback
// - 매번 함수를 생성하지 않고, 함수를 기억해두었다가 필요할 때마다 함수를 재사용
import React, { useState } from 'react';

export default function UseCallbackEx() {
  const [text, setText] = useState('');
  //[before]
  // text 상태가 업데이트 되면 - 컴포넌트 리렌더링 = 코드를 다시 읽음
  // = onChangeText 함수도 다시 생성 (js func는 object type이라 주소값이 변경)
  // => 불필요한 작업!
  const onChangeText = (e) => {
    setText(e.target.value);
  };
  return (
    <div>
      <h1>UseCallbackEx</h1>
      <input type="text" onChange={onChangeText} />
      <div>작성한 값:{text || '없음'}</div>
    </div>
  );
}

1. 이 코드에서 onChangeText 함수가 매 렌더링 마다 새로 생성됩니다. JS 함수는 객체이므로 각 함수는 고유한 주소를 갖는데, text 상태가 업데이트될 때마다 함수가 새로 생성되고, 함수가 변경되면 컴포넌트가 리렌더링됩니다. 
2. 이렇게 매 렌더링마다 함수가 재생성되는것은 불필요한 작업이므로 성능 저하를 초래할 수 있습니다. 

=> useCallback 훅을 사용하면 함수를 메모이제이션하고 필요할 때마다 이전에 생성한 함수를 재사용할 수 있으므로 성능을 최적화할 수 있습니다.

//useCallback
// - 매번 함수를 생성하지 않고, 함수를 기억해두었다가 필요할 때마다 함수를 재사용
import React, { useCallback, useState } from 'react';

export default function UseCallbackEx() {
  const [text, setText] = useState('');
  //[before]
  // text 상태가 업데이트 되면 - 컴포넌트 리렌더링 = 코드를 다시 읽음
  // = onChangeText 함수도 다시 생성 (js func는 object type이라 주소값이 변경)
  // => 불필요한 작업!
  //   const onChangeText = (e) => {
  //     setText(e.target.value);
  //   }

  //[after]
  //컴포넌트가 리렌더링 되어도, 의존성 배열에 있는 값이 바뀌지 않는 한 기존 함수를 계속 사용
  const onChangeText = useCallback((e) => {
    setText(e.target.value);
  }, []);
  return (
    <div>
      <h1>UseCallbackEx</h1>
      <input type="text" onChange={onChangeText} />
      <div>작성한 값:{text || '없음'}</div>
    </div>
  );
}

1. 위 예제는 UseCallback 을 사용하여 onChangeText 함수를 메모이제이션합니다. 
2. onChangeText 함수의 두번째 매개변수로 빈 배열('[]')을 전달하였으므로 함수 내부에서 사용하는 의존성이 없음을 의미하며, 따라서 onChangeText 함수는 컴포넌트가 처음 렌더링될 때 한번만 생성되고 메모이제이션됩니다. 
3. 의존성 배열에 값이 있을 경우, 그 값이 변경될 때마다 함수가 재생성됩니다. 

import React, { useState } from 'react';
import axios from 'axios';

export default function UseCallbackEx2({ postId }) {
  //props 바로 구조분해
  const [post, setPost] = useState({});

  //[before]
  const getPost = async () => {
    console.log('data fetching ...');
    const res = await axios.get(
      `https://jsonplaceholder.typicode.com/posts/${postId}`
    );
    setPost(res.data);
  };

  

  //useEffect 의존성 배열에 '함수'
  //컴포넌트가 리렌더링 -> 함수 재생성(주소값 변경) -> getPost 재호출
  useEffect(() => {
    getPost();
  }, []);
  // 주소값이 바뀔 때마다 계속 함수 호출됨
  return (
    <div>
      <h1>UseCallback Ex2</h1>
      {post.id ? post.title : '로딩중 ...'}
    </div>
  );
}

1. 위에 코드에서 getPost 함수는 외부 API로부터 게시물 데이터를 가져오는 비동기 함수입니다. axios를 사용하여 특정 postId에 해당하는 게시물 데이터를 가져온 뒤, setPost함수를 사용하여 post 의 상태를 업데이트 합니다. 
2. useEffect 훅을 사용하여 컴포넌트가 렌더링될 때 getPost 함수를 호출시켜 데이터를 가져옵니다. 
3. getPost 함수의 주소값이 변경될 때만 useEffect가 실행되도록 설정하므로 getPost 함수의 주소가 변경되지 않는한, useEffect 내부의 함수는 재생성되지 않습니다. 

 

import React, { useState, useCallback, useEffect } from 'react';
import axios from 'axios';

export default function UseCallbackEx2({ postId }) {
  //props 바로 구조분해
  const [post, setPost] = useState({});

  //[before]
  //   const getPost = async () => {
  //     console.log('data fetching ...');
  //     const res = await axios.get(
  //       `https://jsonplaceholder.typicode.com/posts/${postId}`
  //     );
  //     setPost(res.data);
  //   };

  //[after]
  const getPost = useCallback(async () => {
    console.log('data fetching ...');
    const res = await axios.get(
      `https://jsonplaceholder.typicode.com/posts/${postId}`
    );
    setPost(res.data);
  }, [postId]);

  //useEffect 의존성 배열에 '함수'
  //컴포넌트가 리렌더링 -> 함수 재생성(주소값 변경) -> getPost 재호출
  useEffect(() => {
    getPost();
  }, [getPost]);
  // 주소값이 바뀔 때마다 계속 함수 호출됨
  return (
    <div>
      <h1>UseCallback Ex2</h1>
      {post.id ? post.title : '로딩중 ...'}
    </div>
  );
}

1. 위의 코드는 useCallback을 사용하여 함수를 메모이제이션하고, useEffect 의 의존성배열에 getPost를 사용하여 함수가 주소값이 변경될 때만 호출되도록 변경한 컴포넌트입니다. 
2. useCallback을 사용하여 getPost 함수를 메모이제이션하는데 두번째 매개변수로 [postId]를 전달합니다. 이것은 함수 내부에서 사용하는 postId 변수가 변경될 때만 getPost 함수가 재생성되도록합니다. 변수가 변경되지 않는다면 처음 렌더링될 때 한 번만 생성되고 메모이제이션 됩니다. 

02-3.useReducer()

import React, { useReducer } from 'react';

const initState = { value: 0 }; //초기 상태 값

const reducer = (prevState, action) => {
  //action:{type:xxx}
  switch (action.type) {
    case 'INCREMENT':
      return { value: prevState.value + 1 };
    case 'DECREMENT':
      return { value: prevState.value - 1 };
    case 'RESET':
      return initState;
    default:
      return { value: prevState.value };
  }
};

export default function UseReducer() {
  //reducer : state를 업데이트하는 함수
  //dispatch : 액션 state가 어떻게 변경되어야 하는지에 대한 힌트)을 발생시키는 함수
  //state: 현재 상태
  const [state, dispatch] = useReducer(reducer, initState);

  //dispatch -> 액션을 발생시키는 함수
  const increment = () => dispatch({ type: 'INCREMENT' });
  const decrement = () => dispatch({ type: 'DECREMENT' });
  const reset = () => dispatch({ type: 'RESET' });
  return (
    <div>
      <h1>UseReducer_EX</h1>
      <h2>{state.value}</h2>
      <button onClick={increment}>Plus</button>
      <button onClick={decrement}>Minus</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

이 코드는 useReducer 훅을 사용하여 상태 관리를 하는 예제입니다. 
useReducer훅은 상태와 관련된 로직을 분리하고 액션을 통해 상태를 변경하는 방식입니다. 

1. 우선, 첫번째로 초기상태 ('initState')를 정의합니다. 
   1. initState 객체는 초기 상태 값을 가집니다. 이 예제는 value라는 속성을 가진 객체로 초기값은 0입니다. 
2. 두번째로 리듀서 함수를 정의합니다. 
   1. 리듀서 함수(Reducer)는 현재 상태(prevState)와 액션 객체를 받아서 새로운 상태를 반환하는 함수입니다. 
   2. 액션 객체의 type 속성에 따라 다양한 동작을 수행합니다.  
3. useReducer 함수를 호출하여 현재 상태(state)와 상태를 변경할수 있는 dispatch 함수를 반환합니다.

02-4. 커스텀 훅 만들기

//useToggle.js
import { useState } from 'react';

export default function useToggle(initValue = false) {
  //value : 토글의 상태
  //setValue : 토글 상태를 변화 시키는 setter
  const [value, setValue] = useState(initValue);

  //토글 상태를 전환 (-> 스위칭)
  const toggleValue = () => {
    setValue(!value);
  };
  return [value, toggleValue];
}

import React from 'react';
import useToggle from '../hooks/useToggle';

export default function Faq() {
  const [isFaqOpen, setIsFaqOpen] = useToggle();

  return (
    <div>
      <h1>custom hook (useToggle) EX</h1>
      <div onClick={setIsFaqOpen} style={{ cursor: 'pointer' }}>
        탕!!!
      </div>
      {isFaqOpen && <div>휙 피했지롱.</div>}
    </div>
  );
}

위 예제는 커스텀 훅을 사용하여 간단한 토글 동작을 구현했습니다. 

1. Faq 컴포넌트 -> 이 컴포넌트는 토글 기능을 구현하고 사용합니다. useToggle 커스텀 훅을 사용하여 isFaqOpen 상태와 setIsFapOpen 토글 함수를 생성합니다. 
2. isFaqOpen 상태가 true 인 경우에만 <div>요소가 렌더링되도록 설정했습니다. 

 
useToggle 커스텀 훅 

1. useToggle 함수는 초기값(initValue)을 매개변수로 받으며, 기본값은 false 입니다. 
2. 내부적으로 useState 훅을 사용하여 'value'와 'setValue'상태를 생성합니다. 
3. useToggle 함수는 [value,toggleValue]형태의 배열을 반환합니다. 토글 상태와 토글 함수를 순서대로 가지고 있습니다. 

정리 : 클릭 이벤트가 발생하면 setIsFaqOpen 함수 호출 -> useToggle 훅에 toggleValue 함수 실행 ->value의 상태 변화 ->isFaqOpen 상태 변화 -> 조건부에 따라 div 태그 보이기/ 안보이기 순서로 진행되는 듯 싶다. 
 

---

+회고)

useReducer 훅에서 왜 {state}가 아니고 {state.value}를 쓸까 궁금했었는데 useReducer를 통해서 반환된 상태 객체인 'state'가 객체 형태인 {value: 0}와 같이 구성되어 있기 때문이라고 한다. 만약 초기상태가 객체가 아닌 숫자, 문자열이라면 {state}로 사용해도 되는군.. 했는데 일반적으로 useReducer를 사용하면 객체 형태의 상태를 다룬다고 한다. 또 커스텀 훅 만드는 과정에서 배열구조분해를 안하면 어떻게 가져와야할까 했는데 

const toggleState = useToggle();
const isFaqOpen = toggleState[0];
const setIsFaqOpen = toggleState[1];

이런식으로 매우 지저분하다.. 그냥 배열구조분해 해주자 ^^ 구조분해 해주는게 가독성이 더 좋고 변수의 역할이 명확히 보인다. 저번 프로젝트 하면서 구조분해를 어떤건 하고 어떤건 안하고 이래놔서 할거면 다 하고 확실하게 해야겠다. 내가 구조분해를 해놓으면 다른 팀원이 못알아볼까봐 안해놓긴했는데 이렇게 변수명을 잘 정해놓으면 구조분해를 했을 때 명확히 보이고 코드도 간결해져서 가독성이 더 좋아지는것 같다.