[TIL] 0611 | React with Redux, Next.js, TypeScript

목차

• 요청에 useEffect 사용하기
• 다음 단계를 위한 프로젝트 준비하기
• POST 요청 보내기

✧ 요청에 useEffect 사용하기

• 대부분의 어플리케이션에서는 특정 컴포넌트가 로딩되자마자 데이터를 가져온다. 가령 사용자가 페이지를 방문하자마자 데이터를 가져오는 것처럼 말이다. 하지만 우리는 현재 버튼을 누르고 데이터를 fetch 해서 가져오고 있기 있기 때문에 데이터를 즉시 fetch 하기 위해서는 추가적인 작업이 필요하다.

useEffect 으로 즉시 데이터를 fetch 하는 것이 가능한 이유

• useEffect 훅으로 데이터를 즉시 가져오는 게 가능한 이유는 HTTP 요청 전송은 일종의 사이드 이펙트로 컴포넌트의 상태(state)를 바꿔버릴 수 있기 떄문이다. 그리고 이전에 우리가 배웠던 것처럼 이런 사이드 이펙트는 useEffect을 사용한다. 함수로 집어넣는 것 역시 상관 없다. 함수 일부분으로 호출하지만 않는다면 말이다. 만약 그렇게 한다면, 함수 호출이 되는 순간 상태(state)의 갱신이 발생하고, 컴포넌트 함수가 재렌더링-재평가 되면서 무한으로 호출되는 무한루프가 발생되기 때문이다. 그리고 이를 피하기 위해서 우리는 useEffect를 사용할 수 있다.

• useEffect는 컴포넌트가 렌더링되는 주기 안에서 사용되어야 하는 코드가 있을 때 유용하다. 컴포넌트가 재렌더링될 경우는 조금 다르지만 말이다. 따라서 여기에 useEffect를 추가하고 화살표 함수를 사용하거나 function 예약어를 이용한 정규 함수를 통해 effect 함수를 정의한다.

useEffect(() => {
  fetchMoviesHandler();
});

• 이 useEffect 함수 안에서 우리가 그동안 데이터를 fetch 해오는 데 사용했던 fetchMoviesHandler 트리거 함수를 호출한다.

의존성 배열로 무한 루프를 방지하기

• 이제 fetchMoviesHandler 함수는 버튼을 클릭하면 호출되지만 동시에 컴포넌트 재평가가 발생할 때에도 호출하게 된다. 이 때문에 우리가 앞서 거론했던 무한 루프 이슈가 발생할 수 있으므로 컴포넌트 재평가가 발생할 때마다 호출하지 않도록 추가해줘야 할 것이 있다.

useEffect(() => {
  fetchMoviesHandler();
}, []);

• useEffect 의 의존성 배열을 추가한다는 것은 언제 effect 함수가 다시 실행되는 지를 정의한다는 뜻이다. 즉, 우리가 추가한 의존성 배열의 목록이 갱신 되거나 변할 때마다 effect 함수가 재실행되도록 정의하는 것이다. 현재는, 의존성 배열에 아무 것도 들어있지 않다. 이 상태로 저장한다면 컴포넌트가 최초로 로딩될 때를 제외하고는 절대 재실행되지 않을 것이다. 따라서, 어플리케이션을 새로고침하면 데이터를 즉시 fetch 해오는 것을 확인할 수 있다.

effect 함수에서 사용하는 모든 의존성은 의존성 배열에 추가해야 한다

• 사실 이런 식의 실행은 썩 깔끔한 방식은 아니다. 다만 우리가 여기서 배울 수 있는 건 effect 함수 내에서 사용하는 모든 의존성을 이 의존성 배열에 표시해두는 게 가장 좋다는 것이다. 그리고 여기에서는 fetchMoviesHandler가 바로 그 대상이다. 이것은 effect에 대한 의존성이기 때문이다.

useEffect(() => {
  fetchMoviesHandler();
}, [fetchMoviesHandler]);

• useEffect 의 두 번째 인자인 의존성 배열에 fetchMoviesHandler를 포인터하자. 이 fetchMoviesHandler 함수가 변경되면 effect는 재실행 될 것이고, 만약 외부 상태(state)를 이용한다면 이 fetchMoviesHandler 함수도 바뀔 수 있으니 말이다.

함수를 의존성 배열에 추가헀을 때 무한 루프가 발생한다

• fetchMoviesHandler는 함수이고, 객체이기 때문에 컴포너트가 재렌더링 될 때마다 이 fetchMoviesHandler 함수 역시 바뀌게 된다. 그렇다면 의존성 배열에 이 fetchMoviesHandler 함수를 추가하게 되면 무한 루프가 발생될 것이다. 무한 루프를 방지하기 위해서 의존성 배열에 이 fetchMoviesHandler 함수를 추가했는데, 또 다시 무한 루프가 발생하다니 매우 의아할 것이다. 하지만 여기서 우리는 새로운 해결책을 통해 무한 루프를 방지할 수 있게 된다.

useCallback을 통한 무한 루프 방지하기

async function fetchMoviesHandler() {
  ...

}

• 무한 루프에 대한 해결책 중 하나는 함수를 의존성 배열에서 제거하는 것이다. 사실 의존성 배열에서 제거되어도, 원하는 결과는 나오기 때문이다. 하지만 함수가 외부 상태를 사용하거나 한다면, 의도치 않은 버그가 발생할 가능성이 높다. 때문에 이에 대한 가장 좋은 해결책은 useCallback 훅을 사용해서 우리의 함수 fetchMoviesHandler를 감싸는 것이다.

const fetchMoviesHandler = useCallback(() => {
  ...
});

• 이를 위해서 fetchMoviesHandler 함수는 useCallback의 결과를 저장하는 상수가 되어야 하기 때문에 상수 형태로 변경하고, 화살표 함수를 통해 이를 감싸준다. 그리고 useCallback의 두 번째 인자인 의존성 배열도 추가해준다.

const fetchMoviesHandler = useCallback(() => {
  ...
}, []);

• 해당 함수에서 사용하는 모든 의존성을 의존성 배열의 목록 안에 포인터 해줘야하지만 fetchMoviesHandler 함수는 외부 의존성이 없기 때문에 빈 상태로 표기한다. fetchMoviesHandler 함수 내부에서 사용하는 fetch API 는 글로벌 브라우저 API 이고 이는 의존성이 아니며, 또한 setMovies, setError, setIsLoding 같은 상태(state) 업데이트 함수는 리액트에서 절대 변경이 일어나지 않을 것이라 보장하고 있기 때문에 의존성으로 추가할 필요가 없기 때문이다.

const fetchMoviesHandler = useCallback(async () => {
  ...
}, []);

• 이외에 이전에 async/await를 사용해서 비동기적으로 작업해왔던 것을 그대로 해주기 위해 async 예약어를 익명 함수 앞에 추가해준다.

• 이제 저장하고 새로고침을 해보면 무한 루프도 방지하면서 즉각적으로 데이터를 fetch 해옴과 동시에, 버튼을 통해서 수동으로 새로고침을 할 수도 있게 되었다.

✧ 다음 단계를 위한 프로젝트 준비하기

• 지금까지는 설정해둔 URL 에 fetch 요청(default는 'GET')을 보내고, 데이터를 받아왔다. 하지만 실제 환경에서는 많은 어플리케이션에서 데이터 fetch 만으로 끝나지 않으며 서버로 데이터를 보내는 작업도 필요할 때가 많다. 예를 들어, 새로운 사용자를 만들 때라던가 말이다. 따라서 App 컴포넌트 내부에서 새로운 컴포넌트 AddMovie를 추가했다.

<AddMovie onAddMovie={addMovieHandler} />

• 이 AddMovie 컴포넌트에는 movies를 콘솔 로그에 남기는 addMovieHandler 함수도 포인터 했다.

function addMovieHandler(movie) {
  console.log(movie);
}

• AddMovie 컴포넌트를 보면, 사용자 입력 양식을 렌더링하고 사용자 입력을 받고 있는 걸 알수 있다.

function AddMovie(props) {
  const titleRef = useRef('');
  const openingTextRef = useRef('');
  const releaseDateRef = useRef('');

  function submitHandler(event) {
    event.preventDefault();
    // could add validation here...
    const movie = {
      title: titleRef.current.value,
      openingText: openingTextRef.current.value,
      releaseDate: releaseDateRef.current.value,
    };

    props.onAddMovie(movie);
  }

  ...
}

• 우리는 AddMovie에서 렌더링하는 폼을 통해서 영화를 직접 추가할 수 있도록 한 것이다.

• 우리가 사용 중인 URL("https://swapi.dev/api/films/") 은 영화 정보 데이터 수신('GET')을 위한 더미 API 이다. 외부에서 들어오는 데이터를 받지 못하는 것이다. 그렇기에 지금 우리가 AddMovie 컴포넌트 폼을 이용해서 새로운 데이터를 저장하고자 하는 'POST' 요청은 아직 불가능한 상태다. 그렇기에 우리가 'POST' 요청을 통해 데이터를 저장하기 위해서 또 다른 더미 API를 사용해야만 한다. 바로 구글이 제공하는 데이터 저장 서비스인 Firebase 이다.

Firebase 로 백엔드 데이터베이스 구축하기

• Firebase 는 구글에서 제공하는 서비스로, 코드 작성 없이도 사용 가능한 백엔드 서비스이다. Firebase 자체가 데이터 베이스라고 생각할 수도 있지만 그렇지 않다. 데이터 베이스에 딸린 '백엔드' 인 것이다. 즉, 우리가 요청을 주고 받을 수 있는 완전한 REST API 를 제공하는 '풀 백엔드 어플리케이션' 이라고 볼 수 있다.

• Firebase 의 서비스의 좋은 점은 무료로 사용이 가능하다는 것에 있다. 더미 백엔드를 이용해서 서버 기반 코드 없이 무료로 실습이 가능하다는 것이다. 그리고 우리는 이 서비스를 이용해서 데이터를 가져오고 저장할 수 있게 되었다.

Firebase 사용하기

• 먼저 구글 계정으로 로그인하고, Firebase 콘솔로 이동한다.

• 새로운 프로젝트의 이름을 정하고 추가 한 뒤,

• 구글 통계는 필요하지 않으므로 비활성화 하고, 프로젝트를 생성한다.

• 몇 분 후에, Firebase 의 새로운 프로젝트가 만들어진다.

Firebase 는 구글에서 제공하는 서비스이고, 전체 서비스를 구성하고 있는 제품과 서비스가 매우 다양하다. 하지만 우리는 지금 복잡한 어플리케이션을 만들지 않기 때문에 그 중 일부분만을 사용할 것이다.

• 프로젝트가 만들어지면, Firebase의 콘솔로 돌아와, Realtime Database(실시간 데이터베이스)탭으로 이동한다. 다시 한번 말하지만, Firebase 는 데이터베이스가 아니며, 제공하는 기능 중 일부가 데이터 베이스일 뿐이다. 그리고 Firebase 가 제공하는 데이터 베이스 서비스는 2개가 있는데, 여기서 Firestore Database(이전엔 Cloude Firestore) 가 기능상 조금 더 강력하지만, 간단한 어플리케이션을 위한 더미 백엔드만 필요하기 때문에 Realtime Database 면 충분하기에 Realtime Database 를 사용해보고자 한다.

• 이제 Realtime Database 탭 페이지로 들어와서 새로운 데이터베이스를 생성하고, 데이터 베이스 설정에서 반드시 '테스트 모드'를 선택한다. 그렇지 않으면 요청 전송이 불가능하기 때문이다.

• 이제 간단한 데이터베이스가 만들어졌다. 그리고 이 데이터 베이스와 통신할 API URL 역시 제공된다.

데이터베이스에서 제공하는 URL은 Firebase REST API에 대한 URL 이다.

• 이 말인 즉슨, 프론트엔드 어플리케이션은 데이터 베이스와 직접 통신이 불가능하고, 또 가능하더라도 그렇게 해서는 안된다. (앞서 여러 번 거론한 문제이다.) 아무튼 이 URL은 Firebase REST API에 대한 URL 이며, 이 API 는 들어오는 요청을 받고 백그라운드의 데이터베이스와 통신 할 뿐이다. 우리가 보기엔 데이터 베이스와 직접 소통하는 것처럼 보이지만 실제로는 그렇지 않다는 뜻이다.

Firebase API의 URL 로 대체하기

• 이제 우리는 Firebase API가 제공하는 URL을 통해서 Firebase 백엔드, 즉 우리의 데이터 베이스로 데이터를 보낼 수 있게 되었다.

const response = await fetch("https://react-http2-xxxxxxx.firebaseio.com/");

• 기존의 영화 데이터를 받아오던 URL을 삭제하고, 우리가 제공받은 URL 주소를 가져온다.

const response = await fetch(
  "https://react-http2-xxxxxxx.firebaseio.com/movies.json"
);

• 그리고 해당 주소 뒤에 movies.json 이라는 세그먼트를 추가한다. 이 movies 라는 이름은 우리가 임의로 정할 수 있다. 그리고 이렇게 하면 데이터베이스에 우리가 지정한 이름 movies로 노드가 새롭게 만들어지게 된다. 이것은 동적 REST API 로 서로 다른 세그먼트를 사용하여 데이터 베이스의 서로 다른 노드들에 데이터를 저장할 수 있게 설정해주는 것이다. 그러니 이름은 우리가 데이터를 무엇으로 관리할 것인지에 따라 이름을 직관적으로 정해서 설정해준다.

.json 확장자를 추가해야 하는 이유

• movies에 확장자 .json을 추가하는 이유가 궁금할 것이다. 이는 Firebase의 요구 사항으로, 요청을 전달하려는 URL 끝에 .json을 반드시 추가해야 한다. 만약 이 확장자를 추가하지 않는다면, 요청은 실패하게 되기 때문이다.

✧ POST 요청 보내기

• 이제 남은 건 POST 요청을 전송하고 내가 폼에 입력한 데이터를 Firebase 에 저장하는 것이다.

function addMovieHandler(movie) {
  console.log(movie);
}

• 우리가 이전에 설정해두었던 addMovieHandler 함수를 보자. 버튼을 클릭하면 addMovieHandler가 movie 라는 매개변수를 받아 콘솔에 출력하는 로직이다.

function submitHandler(event) {
  event.preventDefault();

  // could add validation here...

  const movie = {
    title: titleRef.current.value,
    openingText: openingTextRef.current.value,
    releaseDate: releaseDateRef.current.value,
  };

  props.onAddMovie(movie);
}

• AddMovie 컴포넌트에서 props 로 전달받은 onAddMovie(addMovieHandler)에 매개변수로 넘겨주는 moive 의 형태는 어떤가? 위의 코드에서 알 수 있듯이 moive 라는 이름의 객체 안에는 title과 openingText 그리고 releaseDate를 담겨있다. (id는 firebase에서 자동적으로 추가된다.) 그러니, 이 addMovieHandler 에서는 ferch API를 이용해서 또 다른 HTTP 요청을 전송해야 한다. 이전에도 거론한 이야기지만 fetch 라고 해도 사실상 데이터를 가져오는 역할만 하는 것이 아니다. 데이터를 전송하는 데에도 fetch 를 사용할 수 있기 때문이다.

function addMovieHandler(movie) {
  console.log(movie);
}

• 다시, addMovieHandler로 돌아와서, 데이터를 firebase에 요청해서 전송하는 로직을 추가하도록 하자. 우리의 목적은 요청 전송이다. 데이터를 가져오는 URL 에 반대로 요청을 보내는 것이다. 그렇지 않으면 저장 된 데이터를 가져올 수 없을 것이다.

fetch 로 POST 요청 보내기

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json");

  console.log(movie);
}

• 먼저 fetch() 를 불러와서 firebase 로부터 제공받은 기존의 URL을 추가한다. 하지만 fetch API 는 기본적으로 'GET' 이 default 이기 떄문에 'POST' 메소드를 사용하기 위해서는 fetch API 의 두 번째 인자를 추가해야 한다.

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {});

  console.log(movie);
}

fetch API 의 두 번째 인자 - method

• fetch API 두 번째 인자를 지용해서 외부로 전송하는 요청을 지정할 수 있게 되는데, 보통은 method 키 같은 것을 지정한다. fetch API의 기본 값은 'GET' 이지만 우리가 원하는 것은 'POST' 이므로, 여기에 'POST'를 추가한다.

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
  });

  console.log(movie);
}

• 이렇게, Firebase 서비스에 'POST' 요청을 보내면 Firebase는 데이터 베이스에 리소스를 만들 것이다. 'POST' 요청을 보냈을 때 정확히 어떤 일이 발생하는지에 대해서는 우리가 사용하는 백엔드에 달려있게 된다. 'POST' 요청을 보내면 리소스가 생성된다는 게 일반적으로는 그런 의미로 통하지만 어떤 법칙 같은 것은 아니다. 다만 모두 API 에 달린 문제인 것이다.

fetch API 의 두 번째 인자 - body

• Firebase 에서는 'POST' 요청을 보내게 되면 리소스를 만들어 둔다. 이제 저장해야 하는 리소스를 만들어야 한다는 이야기다. 이를 위해서 fetch API 의 두 번째 인자에 body 라는 옵션을 추가한다.

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: movie,
  });

  console.log(movie);
}

• body 에는 우리가 추가하고자 하는 것을 적는다. 이번에는 movie 라는 매개 변수(객체)를 받아 body 에 넘겨줄 것이기 때문에 그 매개변수를 값으로 지정한다.

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
  });

  console.log(movie);
}

• 하지만, body는 자바스크립트 객체가 아닌 JSON 데이터를 필요로 한다. JSON은 데이터 형태로 프론트엔드와 백엔드 간의 데이터 교환에 사용되는 유형이기 때문이다. 이제 매개변수로 넘겨 받은 자바스크립트 객체 movie 를 JSON으로 변환하려면 자바스크립트에 있는 내장 메소드인 JSON.stringify()를 사용해야 한다. JSON.stringify()를 사용하면 자바스크립트 객체나 배열을 JSON 형태로 변환해주기 때문이다.

fetch API 의 두 번째 인자 - headers

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
    headers: {},
  });

  console.log(movie);
}

• 마지막으로 조금 더 명확하게 하기 위해서 headers 키를 추가한다. headers 키를 추가할 때는 값으로 객체를 지정해야 한다.

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(movie);
}

• headers의 객체 값 안에 "Content-Type" 을 키로 지정하고, 값으로는 "application/json" 을 넣어준다. Firebase 에는 headers가 반드시 필요한 것은 아니다. headers 키가 설정되어 있지 않더라도 요청은 정상저긍로 처리해주기 때문이다. 하지만 요청을 받는 또 다른 대다수의 API는 이러한 headers 를 필요로 하기 때문에 추가해주었다. 요청을 받는 API에서는 이 headers를 통해서 어떤 컨텐츠가 전달되는지를 알 수 있을 것이다.

async/await로 fetch API로 전송되는 데이터를 비동기적으로 처리하기

• fetch API는 비동기 작업이며 프로미스를 돌려받을 것이기 때문에 앞서 영화 데이터를 받아왔을 때와 마찬가지로 async/await를 추가해줘야 한다.

async function addMovieHandler(movie) {
  const response = await fetch(
    "https://react-http2-xxxxxxx.firebaseio.com/movies.json",
    {
      method: "POST",
      body: JSON.stringify(movie),
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  const data = await response.json();
  console.log(data);
}

• fetch 하는 로직을 response 라는 상수로 await을 붙여 가져온 뒤 await 로 response.json()을 통해 JSON 형식으로 변환한 데이터를 data 상수에 할당한다. 그리고 마지막으로 데이터를 콘솔 로그에서 확인할 수 있도록 콘솔 로그도 추가해준다.

물론 이 모든 과정에서 이전에 학습했던 것처럼 요청(response)에 대한 오류 처리도 추가할 수 있을 것이다.

• 새로 고침 후 영화 제목과 텍스트, 날짜를 적당히 적어서 "Add Movie" 버튼을 눌러보자. 우리가 콘솔에서 data를 출력했던 것이 그대로 추가된 것을 확인할 수 있다. 그리고 Firebase 백엔드로 돌아와 실시간 데이터 베이스 항목을 확인해보면 movies 라는 새로운 노드가 추가된 것을 알 수 있다. 우리가 이전에 URL 뒤에 movies.json을 적어서 전송 했기 때문이다. 그리고 이 moives 라는 노드 안에는 방금 Firebase가 자동 생성한 암호화 된 ID가 있고, 이 안을 보면 우리가 폼에 입력한 데이터가 저장된 것을 알 수 있다. 그리고 개발자 도구의 콘솔에서는 Firebase 로부터 받은 response 객체가 출력되어 있고, name 필드에 Firebase가 자동 생성된 ID 를 적어서 응답했다.

Firebase의 실시간 데이터에 저장된 데이터 가져오기

• 지금까지 'POST' 요청을 전달하는 방식에 대해서 학습했다. 이제 우리는 "Fetch Movies" 버튼을 누르면 실시간 데이터에 저장해둔 영화 데이터를 다시 가져와야 한다.

• 영화 목록이 렌더링 되던 위치에서 출력되고 있는 오류 메세지를 보면, 앞서 만들어두었던 로직이 더이상 작동하지 않는 걸 알 수 있다.

Cannot read properties of undefined (reading 'map')

const fetchMoviesHandler = useCallback(async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http2-xxxxxxx.firebaseio.com/movies.json"
    );
    if (!response.ok) {
      throw new Error("Something went wrong!");
    }

    const data = await response.json();

    console.log(data);

    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });
    setMovies(transformedMovies);
  } catch (error) {
    setError(error.message);
  }
  setIsLoading(false);
}, []);

• movies 데이터를 "GET" 해오던 로직 fetchMoviesHandler 함수로 돌아가보자. 그 전에 우리가 사용한 실습용 영화 데이터에서는 results 필드가 있을 것으로 예상했지만, 지금 우리가 사용하는 데이터에서는 해당 필드가 존재하지 않는다. 이 부분의 수정이 필요할 것 같다.

const data = await response.json();
console.log(data);

• data를 fetch 해오는 부분에 콘솔 로그를 추가해서 새로고침을 해보면,

• data 가 객체로 넘어왔고, 이 객체 안에 암호화된 ID 키가 있으며, 실제로 저장된 영화 데이터는 중첩된 객체로 나타나고 있음을 알 수 있다. 즉, 배열로 가져오지 않고 객체로 받아오고 있는 것이다. (id가 key 이며, 실제 데이터는 중첩 객체이다.) 이제 이것 data 를 다시 변환한 값을 setMovies에 담아서 상태(state)를 갱신해줄 것이다.

중첩 객체 데이터를 배열로 변환하기

const loadedMovies = [];

• 더이상 map은 필요하지 않으므로, 빈 배열을 하나 만든 뒤에

const loadedMovies = [];

for (const key in data) {
}

• for 루프와 key in을 이용해서 객체 안의 모든 key를 확인한다.

const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({});
}

• 그리고 loadedMovies 배열에 push()를 이용해서 객체를 푸쉬하는데,

const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({
    id: key,
  });
}

• id는 기본의 key 값으로 설정하고

• 우리가 전달받은 객체의 key 값들을 모두 확인해서

const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({
    id: key,
    title: data[key].title,
    openingText: data[key].openingText,
    releaseDate: data[key].releaseDate,
  });
}

• title과 openingText, releaseDate의 값으로 넣어준다. 이렇게하면 response 로 받은 중첩 객체를 타고 들어가게 된다. 이것이 자바스크립트의 속성에 대한 '동적 접근 방법' 이다. 이제 loadedMovies는 내부에 객체가 있는 배열이 되며, 각 객체는 우리가 원하는 구조를 그대로 가지고 있다. 따라서 기존의 map으로 데이터를 넣어두었던 transformedMovies를 삭제하고,

setMovies(loadedMovies);

• setMovies의 상태 업데이트 값으로 loadedMovies 를 포인터 해준다.

• 저장 후 새로고침을 하면, 우리가 저장한 데이터가 MoviesList에 정상적으로 로드 된 것을 확인할 수 있다. 두 번째 영화를 또 다른 텍스트를 통해 추가해보고, 다시 "Fetch Movies" 버튼을 누르면

• 두 번째로 추가한 영화 역시 정상적으로 로드 되는 걸 알 수 있다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 ⌜React 완벽 가이드⌟ 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기