신비한 비

useEffect는 React Hooks API 중 하나로, 컴포넌트가 렌더링될 때마다 특정 동작을 수행하도록 설정할 수 있습니다. 이를 통해 컴포넌트의 라이프사이클 메서드를 대체할 수 있습니다.

useEffect는 컴포넌트가 처음 마운트될 때, 업데이트될 때, 혹은 언마운트될 때마다 실행할 수 있습니다. 이를 위해 useEffect 함수는 첫 번째 인자로 콜백 함수를 받습니다. 이 콜백 함수는 컴포넌트가 마운트될 때 한 번 실행되고, 이후 컴포넌트가 업데이트될 때마다 실행됩니다. 만약 컴포넌트가 언마운트될 때 정리(clean-up) 작업이 필요하다면, 이 콜백 함수에서 정리 작업을 수행할 수 있습니다.

useEffect 함수의 두 번째 인자로는 의존성 배열(dependency array)을 전달할 수 있습니다. 이 배열에 포함된 값이 변경될 때만 콜백 함수가 실행됩니다. 이를 통해 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다. 빈 배열([])을 전달하면 마운트될 때만 콜백 함수가 실행됩니다.

useEffect 함수는 콜백 함수의 반환값으로 정리(clean-up) 함수를 반환합니다. 이를 활용하여 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다. 만약 의존성 배열이 변경될 때마다 실행되는 부수 효과를 생성하는 경우, 정리 함수를 통해 부수 효과를 제거할 수 있습니다.

아래는 useEffect 함수를 사용한 예시 코드입니다.

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
    </div>
  );
}

위 코드에서는 useEffect 함수를 사용하여 컴포넌트의 타이틀을 업데이트합니다. 의존성 배열에 count 변수를 전달하므로써 count 변수가 변경될 때마다 타이틀이 업데이트됩니다. 이를 통해 컴포넌트의 렌더링이 발생할 때마다 타이틀이 업데이트되는 불필한 작업을 방지할 수 있습니다.

또 다른 예시로, useEffect 함수를 사용하여 데이터를 불러오는 작업을 수행할 수 있습니다. 이때 비동기적으로 데이터를 불러와야 하므로 async 함수를 콜백 함수로 사용할 수 없습니다. 대신 useEffect 함수 내에서 async/await 구문을 사용하여 비동기 작업을 수행할 수 있습니다.

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    }

    fetchPosts();
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

위 코드에서는 useEffect 함수를 사용하여 데이터를 불러옵니다. 의존성 배열에 빈 배열([])을 전달하므로써 컴포넌트가 마운트될 때 한 번만 데이터를 불러오고, 이후에는 업데이트되지 않습니다. fetchPosts 함수 내에서 fetch 함수를 사용하여 데이터를 불러오고, await 구문을 사용하여 비동기 작업을 수행합니다. 이후에 setPosts 함수를 사용하여 상태를 업데이트합니다.

useEffect 함수를 사용할 때는 다음과 같은 사항을 고려해야 합니다.

1. 의존성 배열을 잘 설정해야 합니다. 필요한 경우 의존성 배열을 사용하여 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다.

2. 부수 효과 함수에서는 불변성을 유지해야 합니다. 상태를 업데이트할 때는 이전 상태를 기반으로 새로운 상태를 생성하는 함수를 사용해야 합니다.

3. 부수 효과 함수에서는 비동기 작업을 수행할 수 있습니다. 이때 async/await 구문을 사용하여 비동기 작업을 수행합니다.

4. 부수 효과 함수에서는 정리 함수를 반환할 수 있습니다. 이를 통해 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다.

이상으로 useEffect 함수에 대한 설명을 마칩니다. useEffect 함수는 컴포넌트에서 부수 효과를 다루는 가장 일반적인 방법 중 하나이며, React Hooks API를 이해하는 데 필수적인 개념입니다.

내저장소 바로가기 luxury515

useState()는 React에서 가장 많이 사용되는 Hook 중 하나입니다. 이 Hook을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. useState()를 사용하면 상태값과 그 상태를 업데이트할 수 있는 함수가 반환됩니다. 이 함수를 호출하면 React는 컴포넌트를 다시 렌더링합니다.

사용 방법은 아래와 같습니다.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위 코드에서 useState(0)은 상태의 초기값을 0으로 설정한다는 것을 의미합니다. count는 현재 상태값을, setCount는 상태를 변경하는 함수를 나타냅니다. handleClick 함수에서는 setCount 함수를 호출하여 count 상태값을 1 증가시킵니다. 그리고 return 구문에서는 현재 상태값을 보여주는 p 태그와 클릭할 수 있는 button 태그를 렌더링합니다.

useState()를 사용하면 여러 개의 상태값도 관리할 수 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleAgeChange(event) {
    setAge(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="number" value={age} onChange={handleAgeChange} />
      <p>Your name is {name} and your age is {age}</p>
    </div>
  );
}

위 코드에서는 name과 age 두 개의 상태값을 관리합니다. handleNameChange 함수와 handleAgeChange 함수에서는 각각 setName 함수와 setAge 함수를 호출하여 상태값을 변경합니다. return 구문에서는 두 개의 input 태그로 상태값을 입력받고, 현재 상태값을 보여주는 p 태그를 렌더링합니다.

React 18에서는 useState()를 사용할 때 새로운 방식으로 state를 업데이트할 수 있습니다. 이전에는 setState 함수를 호출할 때 새로운 state를 전달하거나, 이전 state를 참조하기 위해 콜백 함수를 사용하는 것이 일반적이었습니다. 그러나 이제는 setState 함수를 호출할 때 이전 state를 받아서 업데이트하는 방법이 가능해졌습니다. 이를 사용하면 불필요한 렌더링을 방지하고, 동시성 모드에서도 안정적으로 동작하는 state 관리가 가능해집니다.

새로운 방식으로 state를 업데이트하는 방법은 아래와 같습니다.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위 코드에서 setCount 함수를 호출할 때, 새로운 state 대신 이전 state를 받아서 업데이트하는 함수를 전달합니다. 이전 state는 prevCount 매개변수로 전달되며, 함수의 반환값이 새로운 state가 됩니다.

이전 state를 받아서 업데이트하는 방식을 사용하면 state 업데이트가 이전 state에 의존하는 경우, 예를 들어 이전 state에 1을 더하는 경우 등에 유용합니다. 이 방식은 React가 이전 state와 새로운 state를 비교해서 불필요한 렌더링을 방지하기 때문에 성능 개선에도 도움이 됩니다.

useState()를 사용할 때 주의할 점은, 상태값을 변경할 때 항상 이전 state를 사용해야 한다는 것입니다. 상태값을 직접 변경하거나, 이전 state를 참조하지 않고 새로운 state만 전달하면, React가 state 변경을 감지하지 못해 불필요한 렌더링이 발생할 수 있습니다. 따라서, 이전 state를 참조하여 state를 업데이트하는 방식을 권장합니다.

내저장소 바로가기 luxury515