본문 바로가기

CodeIt_Sprint78

(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)React로 데이터 다루기_1_React를 위한 단축키 기능들 ● 이론0_Vscode의 React 단축키 기능 ○ 기능1_ 단어의 일부만 입력하면, 나머지 완성 기능 //ToolTip 기능예 : useState() 입력시, 자동 import문까지 생성이렇게 입력 도중, "useState" 탭창이 나오고, Enter나 Tab 누를 시,import문과 함수까지 자동 입력이 된다. ○ 기능2_ 컴포넌트 내에서 함수 작성 후, 태그 내 onClick 속성에 대입 시,=> 속성의 일부 알파벳만 적어서 완성 시키는 기능해당의 속성 "onClick"을 선택한 후, Enter를 누르면, onClick 속성이 자동 완성 된다.=> 위에 선언된, 함수이름도 일부 알파벳만 입력하면, ToolTip이 추천 메소드로 나온다.해당의  "handleButtonClick"을 선택한 후, Ent.. 2024. 12. 26.

티스토리툴바