useState와 useEffect의 차이점

변수 말고 State에 Data를 저장해서 써야하는 이유는?

1. 리액트의 렌더링
리액트 컴포넌트의 렌더링은 상태의 변경에 반응하여 동작합니다. 상태가 변경되면 리액트는 해당 컴포넌트를 리렌더링 하여 업데이트 된 상태를 반영합니다. 변수의 변경은 리액트에게 상태 변화를 알라지 않으므로 UI가 업데이트 되지 않을 수 있습니다.

2.컴포넌트 간의 데이터 공유
상태(State)는 컴포넌트 간의 데이터를 공유하는데 사용됩니다. 변수는 해당 컴포넌트 내에서만 유효하며, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 어렵습니다. 하지만 상태를 사용하면 상위 컴포넌트의 상태를 하위 컴포넌트로 props를 통해 전달할 수 있습니다.

3.리액트의 단방향의 데이터 흐름
상태(State)는 React의 단방향의 데이터 흐름을 따르며, 컴포넌트 내부에서만 변경됩니다. 이는 예측 가능한 데이터 흐름을 유지하고, 데이터의 변화를 추적하기 쉽게합니다.

4.자동 업데이트
상태(State)의 변경은 React의 의해 감지되고, 해당 컴포넌트의 자동으로 업데이트 합니다. 이에 반해 변수의 변경은 리액트에게 상태 변화를 알리지 않기 때문에 UI를 업데이트하기 위해서는 추가적인 로직이 필요합니다.

5.컴포넌트 생명주기 관리
상태(State)는 컴포넌트의 생명주기에 따라 관리됩니다.
React 컴포넌트가 마운트(Mounting) 즉 화면에서 나타날때, 언마운트(Unmounting) 즉 화면에서 사라질 때, 그리고 업데이트 될 때 상태를 적절하게 초기화하고 정리하여 메모리 누수를 방지하고 애플리케이션의 효율성을 유지하는데 도움이 됩니다. 이를 통해 컴포넌트의 상태 변화와 렌더링 사이의 관계를 효과적으로 관리할 수 있습니다.

useState와 useEffect의 차이점은?

useState

• useState 는 함수형 컴포넌트에서 상태를 관리하는데 사용됩니다.
• 상태 값과 해당 값을 업데이트 하는 함수를 반환합니다.
• 예를 들어 const [count, setCount] = useState(0);는 count 라는 상태와 setCount 라는 해당상태를 업데이트 하는 함수를 정의합니다.

useEffect

• useEffect는 컴포넌트의 렌더링과 관련 없는 작업을 수행할 때 사용됩니다. 주로 부수효과(sideEffect)를 다루거나 외부 데이터에 접근하고 상태를 업데이트 할 때 사용됩니다.

• 컴포넌트가 렌더링 된 후에 실행되며, 기본적으로 렌더링마다 실행됩니다.

• useEffect의 콜백 함수는 첫번째 매개변수로 전달된 함수가 컴포넌트가 마운트되거나 업데이트 될 때 실행되는데, 두 번째 매개변수로 의존배열을 제공하여 특정상태나 props의 변경에만 실행되도록 조건을 설정할 수 있습니다.

useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

위 예제에서 useState를 사용하여 count라는 상태와 setCount라는 해당 상태를 업데이트하는 함수를 정의했습니다. 버튼을 클릭할때마다 setCount함수를 사용하여 count상태를 업데이트 하고 변경된 상태에 따라 UI가 다시 렌더링 됩니다.

useEffect

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때와 데이터 상태가 변경될 때마다 실행됩니다.
    // 외부 데이터를 불러와서 상태를 업데이트하는 비동기 작업을 수행합니다.
    fetchData();
  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 설정합니다.

  async function fetchData() {
    try {
      // 외부 API 등에서 데이터를 가져온다고 가정합니다.
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result); // 데이터를 받아와 상태를 업데이트합니다.
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  return (
    <div>
      <h2>Fetched Data:</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher

위의 예제에서 useEffect 를 사용하여 컴포넌트가 마운트 될 때 외부 데이터를 가져오는 비동기작업을 수행하고, 데이터를 상태에 업데이트 합니다. 빈 배열을 useEffect의 두번째 매개변수로 전달하여 컴포넌트가 마운트 될 때 한번만 실행되도록 설정했습니다.

이렇게 useState는 상태를 관리하고 업데이트하는데 사용되며, useEffect는 부수효과를 다루고 컴포넌트 렌더링과는 별개의 작업을 처리하는 데 사용됩니다.

➤ 요약

useState

• 상태관리 : useSate 는 컴포넌트 내에서 상태를 생성하고 관리하는 데 사용됩니다.
• 초기값 설정 : 컴포넌트의 상태를 초기화할 때 사용되며, 해당 상태를 업데이트하는 함수를 반환합니다.
• 렌더링과 관련된 데이터 관리 : 컴포넌트가 렌더링될 때마다 상태를 재설정하지 않으며, 렌더링 시점에 상태 값은 초기 값 또는 이전 상태 값에 의존합니다.
• 동기적인 상태 업데이트 : useState를 사용하여 생성된 상태 값을 업데이트 할 때, 동기적으로 해당 상태 값을 변경합니다.

useEffect

• 부수효과처리 : useEffect는 컴포넌트의 렌더링과는 별개로 부수 효과(side effects)를 다루는데 사용됩니다.
• 컴포넌트 생명주기와 관련된 작업 : 컴포넌트가 마운트되거나 업데이트 될 때, 렌더링 이후에 실행되는 작업을 정의하는데 사용됩니다.
• 비동기적인 행동 : 외부데이터 로딩, 구독 설정, 타이머 설정 등과 같은 비동기 작업을 수행할 수 있습니다.
• 의존성 배열 : 두번째 매개변수로 의존성 배열(dependency array)을 제공하여 의존성이 변경될 때만 useEffect의 콜백 함수가 실행되도록 설정할 수 있습니다.