클라이언트 Ajax 요청 (Lifting stateup, useEffect)

Lifting stateup(끌어올리기)

리엑트는 컴포넌트 단위로 구현이 되는데 하위 컴포넌트에서 상위컴포넌트의 변수를 props를 이용해 전달 받아사용할 수는 있지만, 그 변수를 변경할 수는 없다. 그러나 변경할 수 있는 방법이 한가지 존재하는데, 바로 변수를 변경하는 함수를 props로 넘겨받아 사용하는 것이다. 여기서 사용하는 것이 state의 setstate이다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent setValue={handleChangeValue} />
    </div>
  );
}

function ChildComponent(props) {
  const handleClick = () => {
    props.setValue();
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

  return <button onClick={handleClick}>값 변경</button>;
}

보면은 value를 바꾸는 함수를 부모 컴포넌트에서 만든 뒤에 그 함수를 자식 컴포넌트에 넘겨주어 자식 컴포넌트의 버튼을 누르면 value의 상태를 변경해주고 있다.

useEffect

useEffect는 어떤 컴포넌트의 렌더링이 변경될 때 실행되는 함수이다. 이를 사용하는 방법은 대표적으로 3가지가 있는데,
1. 인자로 특정 함수만을 전달 useEffect(함수)
2. 첫 번째 인자로 특정 함수를 전달하고, 두 번째 인자로 빈 배열을 전달 useEffet(함수, [])
3. 첫 번째 인자로 특정 함수를 전달하고, 두 번째 인자로 배열 안에 종속성 변수를 넣어 전달 useEffect(함수,[종속성1, 종속성2,...])

첫 번째의 경우 컴포넌트가 렌더링 될 가장 처음에, prps가 업데이트 될 때와 상태가 업데이트 될 때 함수가 실행된다.
두 번째의 경우 컴포넌트가 처음 렌더링 될 때에만 함수가 실행된다.
세 번째의 경우 종속성 변수의 값이 변화 될 때에 함수가 실행된다. state가 변경 될 때마다 실행을 원하는 함수가 있을 때 사용하면 좋다.