리액트 개념 공부

❓ useEffect

React의 useEffect 훅은 함수형 컴포넌트에서 부수 효과(side effects)를 수행할 수 있게 해주는 훅입니다. 클래스 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할을 합니다. useEffect는 데이터 fetching, 구독(subscriptions), 수동으로 DOM을 조작하는 작업 등을 수행할 때 사용됩니다.

useEffect는 두 개의 인자를 받습니다:

1. Effect를 수행하는 함수: 이 함수는 컴포넌트 렌더링 이후에 실행됩니다. 만약 이 함수에서 뒷정리(cleanup) 함수를 반환한다면, 컴포넌트가 언마운트되거나 업데이트되기 전에 해당 뒷정리 함수가 실행됩니다.
2. 의존성 배열(Dependencies array): 이 배열은 useEffect가 실행되어야 하는 조건을 정의합니다. 배열 안의 값들이 변경될 때마다 effect는 재실행됩니다. 만약 빈 배열([])을 전달하면, effect는 컴포넌트가 마운트될 때 단 한 번만 실행되고, 언마운트될 때 뒷정리 함수가 실행됩니다.

간단한 예제로 useEffect의 사용법을 살펴보겠습니다:

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

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

  // 컴포넌트가 마운트되거나 count 값이 변경될 때마다 실행됩니다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    
    // 컴포넌트가 언마운트되거나 count가 변경되기 전에 실행될 뒷정리 함수입니다.
    return () => {
      document.title = 'React App';
    };
  }, [count]); // count가 변경될 때마다 effect를 재실행합니다.

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

이 컴포넌트에서 useEffect는 count 상태 변수가 변경될 때마다 문서의 제목을 업데이트합니다. 또한, 컴포넌트가 언마운트되거나 count가 업데이트되기 전에 문서 제목을 원래대로 복구하는 뒷정리 작업을 수행합니다.

useEffect를 사용할 때 주의해야 할 점은 의존성 배열을 올바르게 관리하는 것입니다. 배열에 없는 어떤 값에 의존하는 경우, effect는 해당 값이 변경될 때 재실행되지 않습니다. 반면에 의존성 배열이 지정되지 않으면 컴포넌트가 렌더링될 때마다 effect가 실행되므로, 불필요한 렌더링으로 인한 성능 저하를 초래할 수 있습니다.

 

---

❓ 동기와 비동기

1. 동기(Synchronous): 동기 방식은 작업이 순차적으로 실행됩니다. 한 작업이 완료된 후에 다음 작업이 실행되는 방식입니다. 즉, 작업의 순서가 보장되지만, 한 작업이 시간이 오래 걸리면 그 후의 작업들은 대기 상태가 됩니다.
2. 비동기(Asynchronous): 비동기 방식은 작업이 동시에 실행될 수 있습니다. 특정 작업이 완료되지 않아도 다음 작업이 실행될 수 있습니다. 이 방식은 효율적인 작업 처리가 가능하지만, 작업의 순서가 보장되지 않습니다.

리액트에서는 주로 비동기 방식을 사용합니다. 예를 들어, API 요청과 같은 네트워크 작업을 수행할 때 비동기 방식을 사용합니다. 이런 작업은 시간이 오래 걸릴 수 있기 때문에, 비동기 방식을 사용하여 애플리케이션의 다른 부분이 멈추지 않도록 합니다.

리액트에서 비동기 처리를 위해 Promise나 async/await 같은 자바스크립트의 비동기 기능을 사용할 수 있습니다. 또한, useState와 useEffect와 같은 훅을 사용하여 비동기 데이터를 처리하고 상태를 관리할 수 있습니다.

---

❓ Promise

Promise는 JavaScript에서 비동기 처리를 편리하게 할 수 있도록 도와주는 객체입니다. 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JavaScript의 처리 방식을 말합니다.

Promise는 '대기', '이행', '거부'의 3가지 상태를 가집니다.

1. 대기( Pending ): 비동기 처리 로직이 아직 완료되지 않은 상태
2. 이행( Fulfilled ): 비동기 처리가 완료되어 Promise가 결과 값을 반환해준 상태
3. 거부( Rejected ): 비동기 처리가 실패하거나 오류가 발생한 상태

Promise는 비동기 작업이 마무리되면 그 결과를 값으로 반환하거나 에러를 발생시킵니다. 이후 .then이나 .catch 메서드를 사용하여 그 결과를 처리할 수 있습니다.

예를 들어, 서버에 데이터를 요청하는 API 함수에서는 요청을 보내고 서버의 응답을 기다리는 작업이 필요합니다. 이때 Promise를 사용하면, 서버의 응답을 기다리는 동안 다른 코드를 실행할 수 있으며, 응답이 오면 그 때 결과를 처리할 수 있습니다. 이처럼 Promise는 비동기 작업을 쉽게 처리할 수 있도록 도와줍니다.

---

❓ 파라미터

전달하고자 하는 데이터에 따라 URL 경로(path)에 파라미터를 넣는 방식과 쿼리 스트링(query string)을 사용하는 방식이 있습니다.

1. URL 경로(path) 파라미터: api.get(/users/validation/${id})에서 ${id}는 URL 경로의 일부입니다. 이 방식은 일반적으로 RESTful API 설계에서 자주 사용되며, 특정 리소스를 식별하는 데 사용됩니다. 예를 들어, 특정 사용자의 정보를 요청하거나 해당 사용자에 특정 작업을 수행하려는 경우에 사용합니다.
2. 쿼리 스트링(query string) 파라미터: api.get(/users/signout?id=${id})에서 id=${id}는 URL의 쿼리 스트링 부분입니다. 이 방식은 주로 선택적 또는 추가적인 정보를 서버로 전달하는 데 사용됩니다. 예를 들어, 특정 페이지의 결과를 요청하거나, 필터링 또는 정렬 옵션을 지정하는 경우에 사용합니다.

따라서, 두 방식의 주요 차이점은 사용되는 문맥과 목적입니다. URL 경로 파라미터는 특정 리소스를 식별하고, 쿼리 스트링 파라미터는 추가적인 정보를 제공하는 데 사용됩니다. 둘 중 어떤 방식을 사용할지는 API의 설계와 요구사항에 따라 달라집니다.

---

❓ await

await 키워드의 유무는 비동기 함수가 완료되기를 기다리는 동기적 동작(await 사용)과 비동기 함수가 즉시 Promise를 반환하고 다음 코드로 넘어가는 비동기적 동작(await 미사용) 사이의 차이를 만듭니다.