[DAY10] 클라이언트 Ajax 요청

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

React의 단방향 데이터 흐름, State 끌어올리기(Lifting State Up), Side Effect와 순수 함수의 개념, Effect Hook(useEffect)의 사용법과 조건부 실행, 그리고 컴포넌트 내에서의 AJAX 요청 처리 방법에 대해 정리한다.

 

데이터 흐름	단방향·하향식(위에서 아래)으로 흐름. 데이터는 부모 → 자식 방향으로만 전달됨.
State 끌어올리기	하위 컴포넌트의 이벤트가 부모의 state를 변경해야 할 때 사용함. 상태 변경 함수(handler)를 props로 하위 컴포넌트에 전달함.
Side Effect / 순수 함수	Side Effect는 함수 외부에 영향을 끼치는 구현을 의미함. 순수 함수는 입력값만이 결과에 영향을 주는 함수임.
Effect Hook	useEffect(함수, [의존성])으로 Side Effect를 실행함. 두 번째 인자 배열로 실행 조건을 제어할 수 있고, 빈 배열이면 최초 한 번만 실행됨.
AJAX 요청	필터링은 컴포넌트 내부(전체 데이터 수신 후 filter)와 외부(서버에 검색어 포함 요청) 두 가지 방법으로 구현할 수 있음. AJAX 응답이 느릴 경우 로딩 화면을 구현해야 함.

 

⭐데이터 흐름

---

• React의 데이터 흐름은 단방향(One-way)이며 하향식(Top-down)이다. 즉, 데이터는 항상 위(부모)에서 아래(자식) 방향으로만 전달된다.
• 이 구조 덕분에 데이터의 출처가 명확해지고, 상태 변화를 추적하기 쉬워져 디버깅이 용이하다.

⭐State 끌어올리기(Lifting State Up)

---

1. State 끌어올리기란?

• State 끌어올리기(Lifting State Up): 하위 컴포넌트에서 발생한 이벤트가 부모의 state를 변경해야 하는 상황에서 사용하는 패턴으로, 역방향 데이터 흐름을 구현하는 방법이다.

2. 사용 방법

• 상태를 변경시키는 함수(handler)를 props로 하위 컴포넌트에 전달한다.
• 하위 컴포넌트는 이벤트 발생 시 전달받은 handler를 호출하여 부모의 state를 간접적으로 변경한다.

구분	설명
사용 상황	하위 컴포넌트의 클릭 이벤트 등이 부모의 state를 변경해야 하는 경우
구현 방법	부모의 상태 변경 함수(handler)를 props로 하위 컴포넌트에 전달함
데이터 흐름	이벤트는 하위 → 상위로, 실제 state 변경은 상위 컴포넌트에서 이루어짐

⭐Side Effect(부수 효과)

---

• Side Effect(부수 효과): 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다.
• 순수 함수(Pure Function): 오직 함수의 입력(인자)만이 함수의 결과에 영향을 주는 함수이다. 동일한 입력에는 항상 동일한 출력을 반환한다.

구분	설명
Side Effect 예시	API 호출, DOM 직접 조작, 타이머 설정, 콘솔 출력 등 함수 외부에 영향을 주는 모든 동작
순수 함수 특징	동일한 입력에 항상 동일한 결과를 반환함. 외부 상태를 읽거나 변경하지 않음.

⭐Effect Hook

---

1. useEffect란?

• useEffect(함수): 첫 번째 인자로 함수를 받으며, 해당 함수 내에서 Side Effect를 실행한다.
• 아래 세 가지 경우에 컴포넌트가 렌더링되면 Effect Hook이 실행된다.

순서	실행 조건
1	컴포넌트 생성 후 처음으로 화면에 렌더링(표시)될 때
2	컴포넌트에 새로운 props가 전달되어 렌더링될 때
3	컴포넌트의 state가 변경되어 렌더링될 때

2. Hook 사용 시 주의할 점

• 최상위에서만 Hook을 호출한다. 반복문, 조건문, 중첩 함수 안에서 Hook을 호출하면 안 된다.
• React 함수 내에서만 Hook을 호출한다. 일반 JavaScript 함수에서는 Hook을 호출할 수 없다.

3. Effect Hook 조건부 실행

• useEffect의 두 번째 인자로 배열(의존성 배열)을 전달하면 실행 조건을 제어할 수 있다.
• 배열 안의 값이 변경될 때만 Effect 함수가 실행된다.

사용 형태	실행 시점
useEffect(함수)	렌더링될 때마다 실행됨
useEffect(함수, [종속성1, 종속성2])	배열 안의 값이 변경될 때만 실행됨
useEffect(함수, [])	컴포넌트가 처음 렌더링될 때 단 한 번만 실행됨

import { useEffect, useState } from "react";

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

  // 렌더링될 때마다 실행
  useEffect(() => {
    console.log("렌더링될 때마다 실행");
  });

  // 처음 한 번만 실행
  useEffect(() => {
    console.log("최초 렌더링 시 한 번만 실행");
  }, []);

  // count가 변경될 때만 실행
  useEffect(() => {
    console.log("count가 변경될 때 실행:", count);
  }, [count]);
}

 

⭐컴포넌트 내에서의 AJAX 요청

---

1. 목록 내 필터링 구현 방법

방법	설명	특징
컴포넌트 내부에서 필터링	전체 목록 데이터를 서버에서 받아온 뒤, 클라이언트에서 검색어로 filter하는 방법	초기 데이터 로딩 후 추가 요청 없이 빠르게 필터링 가능함. 단, 데이터 양이 많을 경우 비효율적일 수 있음
컴포넌트 외부에서 필터링	서버에 검색어를 포함하여 API 요청을 보내고, 필터링된 결과만 받아오는 방법	서버에 매번 요청하므로 최신 데이터를 받을 수 있음. 단, 네트워크 요청이 빈번해질 수 있음

2. AJAX 요청이 느릴 경우

• AJAX 요청의 응답이 느릴 경우 사용자는 빈 화면을 보게 되므로, 로딩 화면(Loading UI)을 구현하여 사용자 경험을 개선해야 한다.
• isLoading과 같은 state를 활용하여 요청 중에는 로딩 화면을, 응답이 완료되면 실제 데이터를 렌더링하는 방식으로 구현한다.

⭐후기

---

• State 끌어올리기 패턴을 통해 React의 단방향 데이터 흐름 안에서도 하위 컴포넌트가 부모의 state를 간접적으로 변경할 수 있다는 것을 이해했다. 컴포넌트 간의 상태 공유가 필요한 상황에서 적극적으로 활용해야겠다.
• useEffect의 의존성 배열을 어떻게 구성하느냐에 따라 실행 시점이 달라진다는 점이 인상적이었다. 빈 배열([])을 넣으면 최초 한 번만 실행된다는 것을 꼭 기억해야겠다. 불필요한 의존성을 추가하면 무한 렌더링이 발생할 수 있으므로 주의가 필요하다.

⭐참고자료

---

1) React 공식 문서, "Sharing State Between Components (Lifting State Up)", https://react.dev/learn/sharing-state-between-components

2) React 공식 문서, "Synchronizing with Effects", https://react.dev/learn/synchronizing-with-effects

3) React 공식 문서, "Rules of Hooks", https://react.dev/reference/rules/rules-of-hooks

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.