useState

useState 를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.

useState 사용 방법

useState는 useState() 함수를 사용하여 상태를 생성합니다. 이 함수는 배열을 반환하며, 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다. 이 함수는 인자로 새로운 상태 값을 받습니다.

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

위의 코드는 count라는 상태 값을 생성하고, setCount 함수를 반환합니다. count의 초기값은 0입니다.

useState 의 특징

• useState는 배열을 반환하며, 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.
• set 함수는 콜백을 인자로 받는데, 콜백은 이전 상태 값을 인자로 받습니다. 이전 상태 값을 참조하여 새로운 상태 값을 계산할 수 있습니다.
• useState는 이전 상태 값을 보존하기 때문에, 복잡한 상태를 관리하기가 쉽습니다.

useEffect

useEffect는 함수형 컴포넌트에서 Side Effect를 수행하기 위해 사용됩니다. 컴포넌트가 렌더링된 후에 특정 작업을 수행하도록 설정할 수 있습니다

useEffect(() => {
  // 실행할 작업
}, [의존성 배열]);

useEffect 함수의 첫 번째 인자로는 실행할 작업을 입력합니다. 두 번째 인자로는 의존성 배열을 입력합니다. 의존성 배열에는 useEffect가 실행될 조건을 명시합니다. 의존성 배열이 변경되면, useEffect 함수의 첫 번째 인자로 입력된 작업이 실행됩니다.

Side Effect

Side Effect란 컴포넌트 외부에 영향을 주는 작업을 의미합니다. 이러한 작업은 컴포넌트의 상태 변화와는 별개로 발생하는 것으로 API 호출, DOM 조작, 타이머 설정 등이 일련의 예에 속합니다. 이러한 작업은 컴포넌트의 렌더링 결과물에 직접적인 영향을 주지 않지만, 컴포넌트 외부에 영향을 미치기 때문에 Side Effect로 분류됩니다.

useEffect의 특징

• 의존성 배열을 사용하여, useEffect가 실행될 조건을 명시할 수 있습니다.

• 의존성 배열이 비어있는 경우 [] , 컴포넌트가 최초로 렌더링될 때에만 useEffect 함수의 첫 번째 인자로 입력된 작업이 실행됩니다.

• 의존성 배열이 없이 useEffect 내부에서 상태값을 변경하는 경우 무한 루프에 빠질 수 있습니다.

• useEffect 함수의 첫 번째 인자로 입력된 작업은 비동기 함수를 포함할 수 있습니다.

useState와 useEffect의 함께 사용 예시

useState와 useEffect를 함께 사용하면, 컴포넌트에서 상태를 변경하고, 변경된 상태에 따라 Side Effect를 수행할 수 있습니다. 예를 들어, 버튼을 클릭하면 상태가 변경되고, 변경된 상태에 따라 API를 호출하는 경우가 있습니다.

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

useEffect(() => {
  // count 값이 변경될 때마다 실행됩니다.
  fetch(`https://api.example.com/data?count=${count}`)
    .then(response => response.json())
    .then(data => {
      // API 응답 데이터를 처리합니다.
    });
}, [count]);

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