전체 글36 map을 이용해서 json data를 화면에 뿌려주기!! array.map(callbackFunction(currenValue, index, array), thisArg) 이와 같은 방식으로 사용하며 아래와 같은 방식으로 array 안에 있는 각각의 값에 접근해서 function을 실행한다. {loading ? Loading... : movies.map((movie) => {movie.title} {movie.summary} {movie.genres.map((g) => ({g}))} )} 2022. 10. 3. react로 api 호출해서 화면에 표시하기!! useEffect와 useState를 이용해서 api 호출해 화면에 표시한다. useState를 통해 loading의 상태를 업데이트하고, movies의 목록 상태를 업데이트한다. async await를 통해 특정 api url의 response를 json을 가져오고 그것을 setMovies에 넣어준다. movies.map을 통해 화면에 가져온 데이터에서 title을 화면에 뿌려준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]) const getMovies = async() => { c.. 2022. 10. 3. react의 useEffect는 api call 할 때 많이 사용!! 코인 정보를 가져올 때 우선 useState는 로딩, 로딩후 상태 업데이트에 사용하고 true-> false 또한 코인 상태를 저장하는 것에 사용한다. [] -> [코인 값 json] 그리고 useEffect는 코인 api를 fetch한 다음에 setLoading을 false로 바꿔준다. 그리고 html에는 각 coin의 목록을 li에 넣어준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]) useEffect(() => { fetch("https://api.coinpaprika.com/v1/.. 2022. 9. 26. react에서 to-do-list 만들기는 바닐라 js에 비해 너무 쉬움!! toDos를 가져온 다음에 map 함수를 이용해서 하나씩 뽑아서 li에 넣어주기만 하면 됨!! li 마다 index가 필요하기 때문에 li의 key로 index 하나 넣어주고 {toDos.map((toDo, index)=> {toDo})} 결론적으로 전체 코드 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState("") const [toDos, setToDos] = useState([]) const onChange = (event) => setToDo(event.target.value) const onSubmit = (event) => { event.preventDefault() if (t.. 2022. 9. 26. 이전 1 ··· 3 4 5 6 7 8 9 다음