CodeIt_Sprint87 (5)React로 데이터 다루기_5_"불러오기" 버튼 없이, 웹페이지 열릴때 자동으로 데이터 fetch하기 => useEffect() 메소드 ● 이론1_ "불러오기" 버튼을 없애고, 자동으로 웹페이지 열리자마자 fetch하게 하기○ 실습 구현 코드 : - App.js : import { getReviews } from "../api";import ReviewList from "./ReviewList";import { useState } from "react";function App() { const [items, setItems] = useState([]); const handleFetchReviews = async () => { const { reviews } = await getReviews(); setItems(reviews); }; const [order, setOrder] = useState("createdAt");.. 2024. 12. 31. (4)React로 데이터 다루기_4_json 객체 배열 데이터의 index VS 객체 배열 원소당 고유 id값, sort, 삭제 기능 복습 ● 이론0_ index를 고유한 id로 지정하여, 랜더링한다면, 어떤 문제가 존재합니까?○ 실습 구현 코드 : - ReviewList.js○ 실습 구현 코드 : import "./ReviewList.css";function ReviewItem({ key, item, onDelete }) { //2_ ReviewItem 컴포넌트에서 받은 index를 const handleDelete = () => onDelete(item.id); return ( //3_ 가장 상위 태그의 key속성에 저장 {item.title} {item.rating} {formatDate(item.createdAt)} {item.content} .. 2024. 12. 30. (3)React로 데이터 다루기_3_버튼에 따른 데이터 정렬 기능 추가, 삭제 기능 버튼 추가 ● 이론1_외부 json 데이터들을 버튼을 누를 시, 삭제 기능 추가해보기○ 알아야 할 개념들 :- ★ "App 컴포넌트" 에서 구현한다.- ★ 논리 순서 : // 암기해야할듯 ①. useState를 이용하여, 정렬 기준에 대한 State 변수 초기화 ②. 정렬 후의 객체 변수를 따로 초기화 ③. 버튼 핸들러 + useState 함수 적용 ④. 버튼 태그 추가 + onClick 속성에 핸들러 적용○ Default 코드 :- App.js 코드import ReviewList from "./ReviewList";import items from "../mock.json";function App() { return ( );}export default App; ○ 각 순서마다 코드 :①.. 2024. 12. 30. (2)React로 데이터 다루기_2_프로젝트에 외부 데이터 컴포넌트에 넣어보기 ● 이론1_외부의 mock.json을 갖고와서, 컴포넌트에 호출하여, 넣어보기○ 기본 세팅 : 처음 "npm init react-app ."을 터미널에 입력하여, React 프로젝트를 생성 후, 생성된 구성 파일들을 아래와 같이 삭제하여 구성해라. ○ 사이트에서 [mock.json]을 다운 받은 후, [src]폴더내에 배치한다. [ { "id": 1, //해당 영화 리뷰에 대한 고유한 넘버 속성 "title": "결백", //영화 제목 "imgUrl": "https://learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com/react-02/film-reviews/5f2ad6df-2660-4b41-ad8b-df218a404346.jpg", .. 2024. 12. 26. 이전 1 2 3 4 5 6 ··· 22 다음
