[React] ReactJS로 영화 웹 서비스 만들기_(6)

강의 내용 요약
#7.0 ~ #7.4

○ Practice - State, Effect, props

   1. setModified 함수

const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...toDos]);
    setToDo("");
  };

• setState 수정하는 함수를 사용할 때는 두가지 옵션이 있다.
• setToDo    : 단순히 값을 보낸다(string...)
  
• setToDos  : 함수를 보낸다
                   : toDos를 받아와서(currentArray) 새로운 toDo와 합쳐준다.

---

   2. toDos 화면에 보여주기

  → toDos의 생김새

   이 toDos를 어떻게 화면에 뿌려줄 수 있을까?

 

   ※ map() : array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할

      - map안에는 function을 넣을 수 있는데, 이 function은 array의 모든 item에 대해 실행된다.

      - 어떤 값을  return 하든 그 return 값이 새로운 array에 들어간다.

   아래 간단한 예제를 보면 이해가 될거다.

   - map은 함수의 첫번째 argument로 현재의 item을 가져올 수 있다.

     * 두번째 예제를 살펴보자

       첫번째 item = 'bye'

       두번째 item = 'hi'

       세번째 item = 'hello'

      → 함수에서 return item.toUpperCase() 했으니, 결과는 ['BYE', 'HI', 'HELLO']가 된다.

---

   3. toDos에 적용해보자!

<ul>
    {toDos.map((item) => (
      <li>{item}</li>
    ))}
</ul>

   이렇게 적용해서 실행해보자 warning이 뜬다.

   → react가 기본적으로 list에 있는 모든 item들을 인식하기 때문이다

   →  key는 unique해야함

<ul>
    {toDos.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
</ul>

   두번째 argument인 index를 key값으로 사용하면 된다.

   만약 toDos data 안에 고유한 id같은게 있으면 key={item.id} 이런식으로 해줘도 된다.

---

   4. API 호출하기

• fetch - then

const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year")
      .then((response) => response.json())
      .then((json) => {
        setMovies(json);
        setLoading(false);
      });
}, []);

 

• async - awiat

       → fetch - then 보다 더 선호되는 방법이다.

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

 

• async - await ( short version )

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