Why not?

Router를 통해 movie id를 가져올 수 있다. react-router-dom의 useParams를 사용하여 movie id를 얻을 수 있고, 이를 request 보내어 해당 영화의 세부 페이지로 접속할 수 있다. {id:'47571'}은 App.js에서 Route path로 지정한 /movie/:id 의 id를 의미한다. id를 통해 API에 request를 보냈다. 그러면 response를 통해 해당 페이지의 상세 정보를 확인할 수 있다. 사실 팀 프로젝트를 하며 react는 몰랐지만 routing은 해본 적이 있어서 이번 강의는 어렵지는 않았다. 하지만 detail 화면도 꾸며야 하고 앞으로 발전해야 할 길이 많다.. 열심히 하자

movie API 사용하기 useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` ) .then((response) => response.json()) .then((json) => console.log(json)); }, []); useEffect를 사용하여 처음 render 될 때만 실행되도록 하였다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useSt..

https://studywithzpqmdh.tistory.com/86 Day 8 - ReactJS로 TodoList 만들기 #1 ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부를 해야겠다. form tag는 submit event를 가지고 있다. 여러 개의 To studywithzpqmdh.tistory.com 기존 ToDo 의 문제점은 정말 많다. 기존의 코드를 살펴보며 수정할 부분들을 차근 차근 수정시켜 Todo program을 발전시켜보겠다. 문제점을 살펴보면 다음과 같다. 1. 할 일을 체크 할 수 없다 -> 체크 박스 구현하기 2. 한 일과 할 일을 따로 볼 수 없다. 3. 오늘의 할 일이지만 오늘의..

ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부를 해야겠다. form tag는 submit event를 가지고 있다. 여러 개의 ToDo를 받을 수 있는 배열 만들기 const [toDos, setToDos] = useState([]); setToDos((currentArray) => [toDo, ...currentArray]); 기본 값으로 비어있는 배열을 준다. modifier인 setToDos 함수는 toDo의 값을 input에서 가져와 currentArray(toDos)에 추가해준다. toDos array에 있는 각각을 컴포넌트로 바꿔주려면 map()을 사용하면 된다. map의 인자에는 함수가 들어가는..

노트북이 너무 너무 너무 너무 느려서 초기화를 하고 다시 세팅했다. (1년만 더 버텨봐.. ) 1. 전역적인 css style을 원하지 않음 2. style을 직접적으로 넣고 싶지도 않음 => css를 사용하면서 해당 css 파일이 적용하려는 파일의 모든 부분에 import 되지 않게 하기 위해서는 어떻게 해야 하는가? create-react-app은 css 코드를 javascript object(styles)로 변환해준다. 해당 javascript object(styles)는 btn을 안에 가지고 있음. create-react-app은 무작위적인 random class를 갖는다는 것을 알 수 있음. => style들이 모듈러가 될 수 있음! (짱) 이제 컴포넌트를 분리해서 만들 수 있고, 그 컴포넌트를..

react app 사용하기 위해서는 node.js가 설치되어 있어야 한다. 기존에 node.js 가 다운로드 되어 있어서 바로 될 줄 알았는데.. npx 명령어를 쳐도 아무런 반응이 없었다.. (왜?) 찾아보니 node 버전 문제인 것 같아서 node를 삭제하고 다시 다운로드 하였다. node 버전 문제를 저번에도 겪었었는데 또 겪으니.. 조금 짜증이 나서 해결할 수 있는 방법이 없나 검색하다가 nvm을 통해 node를 설치하면 버전관리가 된다는 것을 알고! 따라해보았다. 굿! 근데 노트북이 너무 너무 너무 너무 느려서 npx create-react-app react-practice 명령어를 완료하는 데 15분 정도 걸린 것 같다.. (이거 맞나?) npm start 위의 명령어를 통해 react-app..

props: parent component가 child component 에 데이터를 보낼 수 있게 해주는 방법 component: JSX를 return 하는 함수 * Component를 재사용하는 법을 모르기 때문에 먼저, 각각의 버튼마다 component를 생성함 두 개의 버튼의 스타일을 같게 하기 위해서 style을 복사+붙여넣기하여 사용함 -> 비효율적 따라서 이 설정을 넘겨줄 수 있는 button component가 있다면 좋겠다! => 이 style을 모두 갖는 단 한 가지의 component있다면 이를 재사용하여 효율적으로 버튼을 만들 수 있음 Btn({text:"Save Changes"}) Btn 함수에 인자를 넘겨주는 것! 따라서 Btn 함수의 첫 번째 인자 속으로 Save Changes..

메리크리스마스 🎄 flipped 이 true인지 false인지에 따라 minutes 값을 hours로 변환할지, hours 값을 minutes로 변환할 지 결정한다. 이는 value 속성 에 삼항 연산자를 사용하여 구현하였음 flipped ? amount : amount / 60 => flipped 상태이면 state 값을 그대로 보여주고(amount), 아니라면 60으로 나눈 변환 값을 보여주기 flipped ? amount * 60 : amount => flipped 상태이면 60을 곱한 변환된 값을 보여주고, 아니라면 state 값을 그대로 보여주기(amount) onFlip 함수에 reset()을 추가한 이유는 flip 버튼을 누를 때마다 변환된 값을 그대로 가져오므로, reset을 하여 사용자가..