C-log

이번 포스팅에서는 router에서 url Paramerts를 전달하는 것에 관해서 포스팅 해볼 것이다. 우선 코드를 살펴보자. SubApp.js ... return ( ( //movie 컴포넌트를 사용 ))} ... Movie.js ... {title} ... movie/:id로 router를 설정하고 해당 id는 Movie.js에서 props로 id값을 받게 설정을 한다. 해당 id값을 받아오는 곳은 Home.js로 부터 받아온다. 이를 통해서 movie API로 연결된 해당 영화의 고유 id값을 Movie.js의 Link를 통해서 Detail 컴포넌트로 전달한다. 그렇게 전달받은 id값은 Detail 내부 컴포넌트에서 다시 fetch를 통해서 정보를 추출한다. Detail 내부 컴포넌트는 아래와 같다..

이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. import { BrowserRouter, Routes, Route } from "react-router-dom" import Home from "./routes/Home"; import Detail from "./routes/Detail"; export default function SubApp() { return ( ) } 강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 ..

이번 시간에는 영화 웹사이트를 만드는 연습을 해볼 것이다. 지금까지 배운 것들의 반복이기에 복습 연습을 한다고 생각하고 포스팅을 보면 좋을 것 같다. 먼저 API를 연결 해야한다. 해당 API는 yts라는 영화 정보 사이트에서 받아 올 수 있다. 아래 코드를 살펴보자. import { useEffect, useState } from "react"; export default function SubApp() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating..

이번 포스팅에선 이전 포스팅에 이어서 ToDo List를 마무리 해볼 것이다. 우리가 input태그에 작성한 값들이 useState 배열에 값을 저장하게 했다. 이 배열 값들을 우리는 브라우저 UI로 나올 수 있게 코드를 작성할 것이다. 이전에도 우리가 해보았듯 배열 값을 jsx에 효율 적으로 반복시키기 위해선 map함수를 사용 해야한다. 아래 코드를 살펴보자. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target..

이번 포스팅은 우리가 지금까지 배운 것들을 가지고 간단한 ToDo List를 만들어 볼 것이다. 지금까지 배운 것을 잘만 따라 왔다면 어려움 없이 진행할 것이다. 코드는 아래와 같다. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDo("..

이번 포스팅에서는 useEffect에서 사용되는 cleanup 함수를 배워 볼 것이다. cleanup 함수는 주로 useEffect 훅에서 사용되는 함수이다. 해당 useEffect가 더 이상 필요하지 않을 때 어떻게 정리할 것인지를 정의하는 역할을 한다. useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 효과를 발생시키는 데 사용된다. 이때, 해당 효과가 필요하지 않아지면 그에 대한 정리 작업을 수행하기 위해 cleanup 함수가 활용된다. cleanup 함수는 useEffect 안에서 반환되는 함수로 컴포넌트의 렌더링이 사라질 때 또는 특정 조건이 변할 때 실행된다. 코드를 우선 살펴보자. import { useState, useEffect } from "react"; function Hello..

이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자 import { useEffect } from "react"; export default function SubApp() { function onClick() { console.log("Click!"); } console.log("I run all the time"); useEffect(() => { console.log("Call The Api.."); }, []) return ( useEffect Click me ) } SubApp.js:7 I run all the time SubApp.js:9 Call The Api.. //클릭시 호출 되는 함수 SubApp.j..