클라이언트 ajax 요청

너어어어무 ! 헷갈렸던 클라이언트 ajax 부분이다... 이해가 갈듯말듯 했던 거 같다 .. !오늘은 클라이언트 ajax 요청에 대해 실습해보기 전 React 데이터 흐름과 state 끌어올리기 Effect Hook에 대해 공부하고 작성해보자 ! 

React 데이터 흐름 

React 개발 방식 

페이지 단위가 아닌 컴포넌트 단위로 시작 
즉 상향식으로 앱을 개발함 

장점 : 테스트가 쉽고 확장성 용이 

데이터의 흐름 

단방향 데이터 흐름 
(데이터는 위에서 아래로 흐름 : 부모 -> 자식 )
즉 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성처럼 전달 가능 

state(상태) : 이벤트에 따라 얼마든지 변할 수 있는 것
부모로부터 props를 통해 전달되거나 , 시간이 지나도 변치 않거나 , 컴포넌트 안의 state 나 props 를 가지고 계산이 가능하다면 state 가 아님 
state 는 최소화하는것이 애플리케이션의 복잡도를 줄일 수 있음 

state 위치 정하기
특정 컴포넌트에서만 유의미 -> 특정컴포넌트에 상태 두기
하나의 상태 기반으로 두 컴포넌트 영향 -> 공동 소유 컴포넌트(공통의 부모)를 찾아 그곳에 상태 두기 

 

역방향 데이터 흐름 추가 
부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변함 -> 역뱡향 데이터 흐름을 추가해야함 
ex) 하위 컴포넌트에서의 클릭 이벤트가 부모의 상태를 변경시킴 

State 끌어올리기를 통해 해결
상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결 ! 
 

리액트의 특징이라고 할 수 있는 데이터의 단방향흐름에서 나는 부모에서 자식 컴포넌트로 props 를 전달한다고만 생각해 자식 컴포넌트는 부모 컴포넌트에 의해 통제된다고 생각했었는데 부모의 상태변경이 자식에 의해 실행될수도 있음을 알게 되었다. 이는 자식의 props 로 부모의 상태를 변경시키는 함수를 전달해주어 자식 컴포넌트에서 실행할 수 있다. 말로는 이해하기 어려우니 예시로 다시한번 이해해 볼것이다. 

---

State 끌어올리기 

방법 : 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고,
이 함수를 하위 컴포넌트가 실행한다

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

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

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}  />
    </div>
  );
}
function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {

    handleButtonClick()
  }

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

위의 예제에서 살펴보면 부모 컴포넌트의 handleChangeValue 함수는 부모 컴포넌트의 상태인 value 를 변경시킨다. 
이 함수를 자식 컴포넌트의 props로 전달해주면 자식컴포넌트에서 부모 컴포넌트의 상태를 변경해줄 수 있다. 
<ChildComponent handleButtonClick={handleChangeValue} /> 으로 작성하였는데 함수 이름은 적절하게 정의하면 되고 부모 컴포넌트 내의 함수가 아닌 지정해준 함수 이름을 props로 전달해준다. 그 후 자식컴포넌트 안에서 함수를 실행해주면 된다. 
props 는 객체형태로 전달되므로 {} 로 감싸서 보내준다. 

---

Effect Hook

 

Side Effect (부수 효과)
함수 내에 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side effect 가 발생했다고 말함
React 에서는 컴포넌트내에서 fetch 를 사용해 API 정보를 가져오거나 , 이벤트를 활용해 DOM을 직접 조작할 때 , LocalStorage  , 타이머와 같은 React 와 상관없는 API를 사용하는 경우 발생함

Pure Function (순수 함수)
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미함
입력으로 전달된 값을 수정하지 않음
네트워크 요청은 순수함수가 될 수 없음 
따라서 순수함수는 전달인자가 주어질 경우 항상 똑같은 값이 리턴됨을 보장하기 때문에
예측 가능한 함수이기도 함 

useEffect
useEffect(함수,[종속성배열1,종속성배열 2 ... ])
위와 같이 React에서 발생하는 side effect 를 사용하기 위해 useEffect 의 첫번째 인자로 side effect 가 발생하는 함수를 실행한다. 두번째 인자로는 조건을 받는 배열임. (조건이라 하면 어떤 값의 변경이 일어날 때를 의미함)  해당 배열엔 어떤 값의 목록이 들어감 
종속성 배열값이 변할 때 첫 번째 인자의 함수가 실행됨. 

만약
종속성 배열 목록에 빈 배열 [] 로 둘경우
ex )useEffect(함수, [])
컴포넌트가 처음 생성될 때만 effect 함수 실행 

종속성 배열 목록에 아무것도 넣지 않는 경우 (기본형태)
ex)useEffect(함수)
컴포넌트가 처음 생성되거나 , props,state가 업데이트 될 때 effect 함수 실행

---

언제 실행 ? 
컴포넌트가 생성 후 처음 화면에 렌더링
컴포넌트에 새로운 props가 전달되며 렌더링 
컴포넌트에 상태가 바뀌며 렌더링 

매번 새롭게 컴포넌트가 렌더링 될때 Effect Hook 이 실행됨 

Hook을 쓸 때 주의점
최상위에서만 Hook을 호출 
React 함수 내에서 Hook을 호출 

 

useEffect 를 사용한 fetch ajax 요청예시

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

filter 값이 변할 때 마다 useEffect 내의 함수가 실행 됨 .