12.1 Rendering the Movies

getMovies = async () => {
  const movies = await axios.get("https://yts.mx/api/v2/list_movies.json");
  console.log(movies.data.data.movies);
 }

// shortcut
getMovies = async () => {
  const {data: { data :{movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json");
  console.log(movies);
 }

구조분해할당

코드에서 const { data: { data: { movies } } }의 구조분해 할당 (destructuring) 방식에 대해 이해하는 것이 중요합니다. 이 방식은 중첩된 객체의 속성 값을 쉽게 추출하기 위한 간결한 문법입니다. 이제 질문하신 부분을 하나씩 설명드리겠습니다.

1. 구조분해 할당 (Destructuring Assignment)

구조분해 할당을 사용하면 객체 속성에서 필요한 값만을 쉽게 추출할 수 있습니다. axios.get() 요청으로 받아오는 응답은 대개 중첩된 객체 형태로 되어 있습니다. 그 중 필요한 값을 추출하려는 의도에서 구조분해 할당을 사용한 것입니다.

예시: 기본 구조분해 할당

const obj = {
  data: {
    data: {
      movies: ['movie1', 'movie2', 'movie3']
    }
  }
};

const { data: { data: { movies } } } = obj;
console.log(movies);  // ['movie1', 'movie2', 'movie3']

위 코드는 obj 객체의 중첩된 movies 배열을 추출하기 위한 구조입니다. 이 방법을 사용하면 중첩된 경로 obj.data.data.movies를 간단하게 movies로 할당할 수 있습니다.

2. 이 구조분해 할당의 의미

const { data: { data: { movies } } } = await axios.get("https://yts.mx/api/v2/list_movies.json");

여기서 중요한 점은, 구조분해 할당을 통해 중첩된 속성에서 값을 바로 추출하는 것인데요:

• axios.get()은 API로부터 데이터를 받아오는데, 일반적으로 그 응답은 객체로 구성되어 있습니다. 이 경우, 응답 구조는 대략 이렇게 생겼을 겁니다:

{
  data: { // 첫 번째 "data"
    data: { // 두 번째 "data"
      movies: [...] // 우리가 원하는 "movies"
    }
  }
}

이 중, 우리는 movies 배열만 필요하기 때문에, 중간의 data.data 경로를 직접 사용할 필요 없이 movies만을 추출할 수 있습니다.

구조분해 할당을 사용하지 않은 방식:

const response = await axios.get("https://yts.mx/api/v2/list_movies.json");
const movies = response.data.data.movies;
console.log(movies);

위 코드는 구조분해 할당을 사용하지 않고 response에서 movies를 직접 추출한 방식입니다. 이와 동일한 결과를 얻기 위해 구조분해 할당을 사용하면 코드를 더 간결하게 만들 수 있습니다.

3. 왜 movies가 바로 추출되는가?

구조분해 할당을 사용하면 객체 속성에 바로 접근할 수 있기 때문에, 한 번만 movies를 사용할 수 있습니다. 구조분해 할당이 객체 내부의 구조에 맞춰서 동작하기 때문에, 중복된 movies 선언은 필요하지 않습니다.

const { data: { data: { movies } } } = await axios.get(...);

이 코드는 axios.get()으로부터 받은 응답에서 data라는 객체 안의 두 번째 data 객체에서 movies 속성을 바로 추출합니다. 즉, 이 과정에서 중복된 movies 선언은 불필요합니다.

결론:

• 구조분해 할당을 사용하면 중첩된 객체에서 값을 더 간단하게 추출할 수 있습니다.
• movies를 두 번 쓸 필요는 없습니다. movies는 중첩된 data 객체에서 바로 추출됩니다.
• 이렇게 추출된 movies를 통해, API로부터 받아온 영화 리스트를 바로 사용할 수 있게 되는 것이죠!

부가설명

예시 1: 중첩된 객체에서 값을 추출하기

중첩된 데이터를 다룰 때, 구조분해 할당을 사용하지 않으면 이렇게 해야 하죠:

const response = {
  data: {
    user: {
      name: 'Alice',
      age: 25
    }
  }
};

const name = response.data.user.name;
console.log(name);  // 'Alice'

여기서 response 객체의 data 안에 또 다른 user 객체가 있고, 그 user 객체 안의 name을 가져오는 과정이 있죠. 이때 구조분해 할당을 사용하면 이렇게 더 간단해집니다:

const { data: { user: { name } } } = response;
console.log(name);  // 'Alice'

구조분해 할당을 사용하면 response.data.user.name 전체 경로를 사용할 필요 없이 바로 name을 추출할 수 있는 거죠.

예시 2: axios 응답에서 구조분해 할당

axios.get()을 통해 API 응답을 받을 때도 비슷한 상황이 발생합니다. API 응답의 구조가 아래처럼 있다고 가정해볼게요:

{
  data: {
    movies: [
      { title: "Movie 1" },
      { title: "Movie 2" },
      { title: "Movie 3" }
    ]
  }
}

일반적으로 이렇게 데이터를 꺼내면:

const response = await axios.get("https://yts.mx/api/v2/list_movies.json");
const movies = response.data.movies;
console.log(movies);

구조분해 할당을 사용하면:

const { data: { movies } } = await axios.get("https://yts.mx/api/v2/list_movies.json");
console.log(movies);

이처럼 중첩된 data.movies를 바로 추출할 수 있어서 코드를 더 간결하게 만들 수 있습니다.

---

한 번 더 정리:

1. 구조분해 할당은 중첩된 객체에서 필요한 값만 쉽게 꺼내는 방법입니다.
2. axios.get()의 응답 객체처럼 중첩된 데이터 구조에서 값을 추출할 때 특히 유용합니다.
3. 어렵다면 먼저 단순한 객체에서 구조분해 할당을 연습해보세요. 복잡한 응답에서 적용해보면 이해가 더 쉬워집니다.

---