[React] 클라이언트 Ajax 요청

키워드 : 단방향 데이터 흐름, state 끌어올리기, Effect Hook, Side effect, Pure function ...

---

Effect Hook

 

들어가기에 앞서...

Effect Hook를 공부하기에 앞서, React의 주요 특징을 알아야 한다. 바로,

"단방향 데이터 흐름(one-way data flow)"으로, 

즉, 리액트에서는 데이터의 흐름이 하향식 단방향으로 이루어진다.

 

(참고- 리액트는 컴포넌트를 우선 만들고, 이를 바탕으로 페이지를 만드는 상향식 제작으로 이루어져야 한다.)

 

 

하지만 하위 컴포넌트에서 이벤트 핸들러가 부모의 state를  바꾸어야하는 경우가 생기는데,

이 때 사용하는 개념이 바로, "state 끌어올리기(Lifting state up)"이다.

 

 

state 끌어올리기(Lifting state up)

• 부모 컴포넌트에서 state를 변경시켜주는 함수를 자식 컴포넌트로 전달하여, 자식 컴포넌트에서 이 함수를 실행시키는 방식.

 

 

Side effect(부수 효과)

• 함수 내에서 처리된 일이 함수 외부에까지 영향을 미치는 현상.
• 리액트에서는 fetch로 API를 가져오거나 이벤트로 DOM을 직접 조작할 경우, 부수 효과가 일어나게 된다.

 

Pure function(순수 함수)

• 함수에 입력된 대로 결과가 예측가능하게 도출되는 함수.
• 따라서 순수 함수는 side effect가 없다고 할 수 있다.
• 이 때 입력으로 전달된 값은 수정되지 않는다. 

 

 

useEffect

• 컴포넌트 내에서 부수 효과를 일으키게 해주는 Hook.
• 다음 두 가지의 인자를 지닌다 :
  1. 첫 번째 인자 : 함수
     • 함수 실행 조건
       1. 컴포넌트 생성 후 처음 화면에 렌더링 될 때
       2. 컴포넌트에 새로운 props가 전달되면서 리렌더링될 때
       3. 컴포넌트에 상태(state)가 바뀌면서 리렌더링될 때
  2. 두 번째 인자 : 종속성 배열(dependency array)
     • 배열에는 조건을 담아야 한다(표현식이 아님).
     • 종속성 배열의 값이 변경될 때, 함수가 실행되는 것이므로,  배열의 값은 함수 실행 조건이다. 
     • 빈 배열 ( [] ) 입력 시, 컴포넌트가 처음 생성될 때에만 함수가 작동한다.
• 형식 예시

  useEffect(() => {
    setIsLoading(true);
    getFlight(condition).then((filtered) => {
      setFlightList(filtered);
      setIsLoading(false);
    });
  }, [condition]);