영화 앱 만들기 (1)

영화 앱 만들기 (1)

... {movies.map((movie) => ( {movie.title} ... 1. 앱 안에서 페이지를 전환하는 법 - 로딩화면과 object 받아오기 import { useEffect, useState } from "react"; function App() { 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) => { setMo..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 22.
  • textsms
Coin Tracker 만들기

Coin Tracker 만들기

1. 간단하게 제목과 로딩 text를 만들어준다 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The coins! {loading ? Loading ... : null} ); } export default App; 2. API 가져오기 - 가장 처음으로 render 될 때 돌아가도록 설정 useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users"); }, []); 나는 회사 보안 정책상 링크가 열리지 않아서 https://jsonplaceholder.typicode.com/user..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 18.
  • textsms
간단한 to-do List 만들기 (2)

간단한 to-do List 만들기 (2)

2024.04.18 - [React/영화웹서비스만들기] - 간단한 to-do List 만들기 (1) 간단한 to-do List 만들기 (1) 1. input만들기 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); return ( ); } export default App; 2. input을 form에 넣어 sm-lee2026210.tistory.com 1. array로부터 동일한 컴포넌트에 있는 것들을 render하는 법 return ( .....

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 18.
  • textsms
간단한 to-do List 만들기 (1)

간단한 to-do List 만들기 (1)

1. input만들기 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); return ( ); } export default App; 2. input을 form에 넣어주고 버튼 추가하기 function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.value); console.log(toDo); const onSubmit =..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 18.
  • textsms
Cleanup

Cleanup

1. 간단한 버튼 만들기 import { useEffect, useState } from "react"; function Hello() { useEffect(() => { console.log("i m here"); }); return Hello; } function App() { const [showing, SetShowing] = useState(false); const onClick = () => SetShowing((prev) => !prev); return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } export default App; 2. Cleanup 함수 만들기 컴포넌트가 destroy될 때 뭔가 할 수 있도록 해 주는 함수 CleanUp..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 18.
  • textsms
Deps

Deps

1. Search Bar 생성하기 import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log(" i run all the time"); const [keyword, setKeyword] = useState(""); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { console.log("call the api..."); }, []); return ( {counter} Click M..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 17.
  • textsms