[React] 클라이언트 Ajax 요청-2

Chapter2. State 끌어올리기 (Lifiting State Up)
1.Side effect가 어떤 의미인지 알 수 있다.
2.React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
3.Side effect의 예를 들 수 있다.
4.Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
5.Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
6.컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

1.생각하지 않았던 또는 생각을 했더라도 인자로 투입되지 않은 값들에 영향을 주는 상황을 말한다. 

2.side effect와 그 외의 뿌려주는 함수 등을 각각 다른 컴포넌트로 만들어 분리해줘서 서로 영향을 받지 않게 만들 수 있다.

3.Side effect는 a와 b값을 이용해 결과를 확인하고자 하는데 결과에는 a또는 b가 아닌 c가 함께 들어가거나 결과를 받는 도중 c에 영향을 주는 등의 예상치 못한(예상을 했더라도) 일을 side effect라고 한다.
리액트에서는 주로  컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작, LocalStorage 또는 타이머와 같은 React와 상관없는 API들로 side effect가 발생하는데 이를 다루기 위한 Hook인 Effect Hook을 제공한다.

4.가능하다.

5.dependency array는 함수 다음에 추가할 수 있는 배열로 추가되지 않으면 effect hook이 렌더링마다 시행되며 빈 배열([])을 넣어줄 경우 처음 1회만 시행되고 특정 dependency배열을 넣어줄 경우 초기 1회와 배열 내부의 값이 변경될 때 마다 시행된다.

6.컴포넌트 내에서 로딩화면등이 필요할 경우 {isLoading ? <LoadingIndicator/> : 표기할 내용}와 같은 형식으로 컴포넌트들을 불러올 수 있으며 isLoading은 useState를 생성한 후 관리해줘야 한다. 주로 사용하는 방식은 isLoading값을 true로 준 후 특정 로딩이 필요한 상황이 될 경우 아래와 같이 처리할 수 있다.
아래 예시는 특정 주소값에서 filter값을 받아오며 filter state가 변경될 경우 시행된다.
useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

 

그렇게 쉽지는 않았지만 생각했던 것 보다는 크게 어렵지 않았던 것 같다.

기본적으로 제공하는 정보를 확실하게 읽어도 부족한데 이번에는 살짝 흘려 읽어서 더 힘들었던게 아닌가 생각된다.

주문자의 의도를 정확하게 파악하자