$$config title: [리액트]API에서 받아온 데이터를 이용해서 뷰 구성하기 keywords: - 다양한 방식^o^ $$ 40강 ~ 42강 # [VER.1](https://codepen.io/SeonHo-/pen/yLvpKVg?editors=0011) for of문 사용 ```js (async () => { const data = await fetch("https://picsum.photos/v2/list?page=1&limit=10"); const json = await data.json(); 2-1. const ul = document.createElement("ul"); console.log("그리기 시작"); 1. for (const row of json) { 2-2. const li = document.createElement("li"); 3. li.innerText = row.author + " / " + row.download_url; 4. ul.appendChild(li); } 5. document.body.appendChild(ul); console.log("그리기 끝"); })(); ``` ------------------------ 1 . for (const row of json) : json안에 있는 배열 값만큼 row에 들어간 다음 실행 2 . const ul = document.createElement("ul"); [+ li] - 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작 * ul과 li라는 HTML 요소를 사용해야하기 때문에 Document 사용 - ul[목록]과 li[항목]이라는 테크를 만드는 작업 - ```js

```과 같다. 3 . li.innerText = row.author + " / " + row.download_url; - innerText : 태그 안의 텍스트를 가져오거나 바꾸는 기능 - row안에 있는 author와 download_url을 li에 있는 텍스트에 넣는다. 4 . ul.appendChild(li); - li의 값을 ul에 넣을려면 "appendChild"를 활용하여 집어넣어야한다. 5 . document.body.appendChild(ul); - 다 만든 ul을 appendChild을 통해 문서 안에 있는 body 테그에 넣는다. # [VER.2-1](https://codepen.io/SeonHo-/pen/ExQoENQ?editors=0010) useEffect와 img 사용 ```js function App() { 2-1. const [imgs, setImgs] = useState([]); 3. useEffect(async () => { const data = await fetch("https://picsum.photos/v2/list?page=1&limit=10"); const json = await data.json(); 2-2. setImgs(json); }, []); return ( <>

{img.id} / {img.author} / {img.download_url}

); } ``` 1 . ```js {imgs.map((img, index) => (

{img.id} / {img.author} / {img.download_url}

))} ``` - map을 통해서 imgs에 있는 개수만큼 li를 생성 - 해당 방식처럼 map안에 li를 사용시 지켜야하는 사항 * li key={index} - li 뒤에 key를 입력하고 그 key안에 {index}를 넣어준다. * map((img, index)) - map안에 들어가는 값이 하나면 map(img => ~ )로 할수 있지만, key와 index를 연결해야함으로 map( ? => ) '?'안에 ()으로 img와 index를 감싸준다. - {img.id} - img와 연결된 값에 있는 id값을 가져와서 화면에 출력 2 . const [imgs, setImgs] = useState([]); : useState 사용 3 . useEffect( fetch 익명함수, [] ); - useEffect로 감싼 함수는 최초의 딱 한번 실행한다.[횟수제한] - useEffect가 없다면 코드펜의 함수를 무한실행하는 일이 발생 # [VER.2-2](https://codepen.io/SeonHo-/pen/JjpMLbZ?editors=0010) useEffect와 img 사용 + (page추가) ```js function App() { const [page, setPage] = useState(1); const [imgs, setImgs] = useState([]); useEffect(~}, [page]); const loadPrev = function () { setPage(page - 1); }; const loadNext = function () { setPage(page + 1); }; return ( <>

현재 페이지 : {page}

~ ); } ``` - page라는 state 변수를 추가하여 이전, 다음을 누를때마다 useEffect가 실행되도록 함