React 데이터 관리 및 라우팅

UseState

값을 바꾸거나 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구

const [state,setState] = useState(초기값);

현재 데이터를 fetching이 되지 않을 때 로딩을 구현하는 중인데 useState를 사용한다.

//setLoading을 통해 상태를 변경할 수 있고 loading에 저장된 값을 받는다.
const [loading,setLoading] = useState(true);

//setLoading에 변화를 주면 loading에 저장

setLoading(false); // loading => false

UseEffect

• 데이터를 가져왔을 때 한번만 실행하고 싶을 때 사용중이다.(조건을 넣어서 클릭 시, 입력 시 등 다양한 방법이 있는데 fetching을 통해 사용했다.)
• 한번만 렌더링이 된다.
• 다양한 Hook들이 있지만 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

useEffect의 기본형태는 useEffect(function,deps) 의 형태이다.
deps는 배열의 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열을 넣는다.

const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("CALL THE API....");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );

위와 같은 코드이면 시작할 때 한번 렌더링을 작동한다.

Fetch, async/await, json, useEffect

기본적으로 fetch는 원래 js 내장 객체이다(API 호출하는 역할)
우리가 알던 fetch의 형태는 아래와 같이 fetch,then 등을 이용해 데이터를 가져온다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

   useEffect(() => {
     fetch(
       `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
     )
     .then((response) => response.json())
     .then((json) => {
         setMovies(json.Movies.movies);
      setLoading(false);
      });
   }, []);

useEffect를 통해 데이터를 한번만 불러오고 fetch를 통해 데이터 API의 주소를 가져온다. URL로 GET요청을 보낸다.
fetch는 프로미스를 반환한다. 프로미스는 네트워크 요청이 완료되면 완료 또는 실패 상태로 이행해준다
then() 메서드를 사용하여 요청이 성공했을 때와 실패했을 때에 처리할 수 있다.

1. then() 은 서버의 응답을 json 형식으로 파싱을 해준다.
2. then() 은 파싱된 json 데이터에서 영화 목록을 추출하고 그것을 setMovies 를 사용해서 react 상태에 저장한다.

이렇게 데이터를 전송하는 방법도 있지만 fetch함수를 사용하는 대신에 async/await 구문을 사용해서 네트워크 요청을 처리할 수도 있다.

  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

async함수 내에서 await 키워드를 사용하면 해당 프로미스가 이행할 때까지 코드 실행을 일시 중지하고, 프로미스가 이행되면 결과값을 반환한다. 이렇게 하면 코드가 더 읽기 쉽고 직관적이며 콜백 함수의 사용을 피할 수 있다고 한다.

PropTypes

PropTypes를 사용하면 컴포넌트에 전달되는 props의 타입을 검증할 수 있다. 우리가 실수로 잘못된 타입의 props를 전달하는 것을 방지할 수 있다. (신뢰성,안정성을 높여준다.)

Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

위는 현재 모두 문자열이야하고 genres는 문자열의 배열임을 명시하고 있다.
이렇게 하는 과정들은 각 props의 타입이 무엇이어야 하는지를 명확하게 문서화할 수 있다.

React-router-dom

npm install react-router-dom