2021.08.02(Mon.) <간단한 useEffect의 규칙>

켑...최선을 다 했지만 너무 어려운걸요...흑흑

1. useEffect?

• 첫 번째 인자로 받은 함수가 두 번째 인자로 받은 Array안의 값이 바뀔 때마다 실행된다.
• 두 번째 인자에 빈 배열을 넣으면?
  
  • 처음 컴포넌트 생성 시에만 effect가 실행된다. 한번 외부의 API를 받아 오려고 할 때 사용할 수 있다.

import { useEffect, useState } from "react";

export default function App() {
	const [count, setCount] = useState(); // state로 count를 준다.

	const handleCountClick = () => { // 카운트를 1씩 버튼이 눌릴때 올린다.
		setCount(count + 1);
	};

	useEffect(() => {
		console.log("카운트가 1 올랐습니다.") // count값이 바뀔때 마다 console에 메시지가 찍힌다.
    }, [count]);
    
	return (
		<div className="App">
			<button onClick={handleCountClick}>카운터 : {count}</button>
    		</div>
	)
}

2. AJAX 요청을 통한 서버에서 데이터를 가져와 사용하기.

• 위에서 한 것처럼, fetch를 통해서 서버에서 데이터를 가져와 사용할 수 있다.
• AJAX는 JSON 형식으로 돌아온다는 것을 잊지 말자.

const [data, setData] = useState();

export default function App() {
  useEffect(() => {
      fetch('http://어떤 데이터를 주는 서버의 주소')
      .then(response => response.json())
      .then(data => {
          data(newData);
      }, [data])
  }
}

return (
  <div className='App'>
      <div>서버에서 받아온 내용 : {data}</div>
  </div>
)

3. AJAX 요청의 속도

• 분명 외부의 API에서 데이터를 받아 올 때, 전송속도가 느릴 수 도 있다. 그래서 로딩 화면과 같은 것을 구연해서 유저들이 조금 더 나은 경험을 할 수 있도록 해야 한다.

const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(true);

  return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}
  // 만약 로딩이 되지않은 상태인 false라면 LoadingIndicator를 보여주고 다 되면 완료 화면을 보여줌.
  
  useEffect(() => {
    setIsLoading(true);
    fetch('http://어떤 데이터를 주는 서버의 주소')
      .then(response => response.json())
      .then(data => {
          data(newData);
      }, [data])
  }

이것만 보고도 이해한다면 당신은 천재.
아니면 기본적인 사용의 형태를 템플릿처럼 외워도 일단 사용하는데 문제는 없다.
리액트는 1000번 보는 것보다 1번 해보는 게 낫다.
이렇게 내용도 없는 데이터를 주고받는 것부터 해보는 것이 이해에 도움이 훨씬 잘 될 것이다.
그래도 막막하다면, 다시 리액트 기초로 돌아가 큰 구조를 보는 것부터 연습하자!