본문 바로가기
728x90
반응형

map5

[TIL] 11/18 map 에서 key 가 필요한 이유, 1. map 에서 key 가 필요한 이유map 으로 컴포넌트를 반복해서 렌더링할 경우, 각 컴포넌트에는 key 값을 넣어줘야 한다. 넣어주지 않아도 에러가 나지는 않지만, 개발자 도구를 열어보면 콘솔창에 " Warning: Each child in a list should have a unique "key" prop " 라는 경고 문구를 확인할 수 있다.  그렇다면 key 는 왜 필요한 걸까? 결론부터 말하면 성능 최적화를 위해 필요하다.   리액트는 가상 DOM 을 사용하여 실제 DOM 과 비교하는 방식으로 렌더링 성능을 최적화한다. 리액트는 DOM 을 효율적으로 업데이트하기 위해 실제 DOM 과 비교할 수 있는 가상의 DOM 트리를 만들어 두고, 실제 DOM 과 비교해서 변경된 부분만 실제 DOM .. 2024. 11. 18.
[TIL] 10/22 JS 기초2 개발 설계에 오류를" data-og-host="everydayc0ding.tistory.com" data-og-source-url="https://everydayc0ding.tistory.com/entry/JavaScript-%EA%B8%B0%EC%B4%88-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%B2%98%EB%A6%AC2" data-og-url="https://everydayc0ding.tistory.com/entry/JavaScript-%EA%B8%B0%EC%B4%88-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%B2%98%EB%A6%AC2" data-og-image="https://scrap.kakaocdn.net/dn/PzqAs/hyXlItVnWy/Uq1LuNMZFvS.. 2024. 10. 22.
[TIL] 9/5 api GET/DELETE/PUT, 리팩터링, forEach, map, HTTP 상태코드 1. 실습 1) 전체 유튜버 "조회" GET /youtubers- req: X- res: map 을 전체 조회해서 돌려주면 됨 2) 개별 유튜버 "조회" GET /youtuber/:id - id 로 map 에 저장된 객체를 찾아서, 그 객체의 정보를 뿌려줌- req: params.id, map 에 저장된 key 값을 전달- res: map 에서 id 로 객체를 조회해서 전달 3) 신규 유튜버 "등록" POST /youtuber- { channelTitle: ___ , sub: 0, videoNum: 0 } - req: channeTitle 만 주고 API 내부적으로 sub, videoNum 을 만들게 해도 괜찮고,          아니면 channerTitle, sub, videoNum 을 모두 줘도 괜.. 2024. 9. 5.
[TIL] 9/3 express, Map, express generator, 자바스크립트 함수 1. express + map - 객체 담기 map 에는 string 뿐 아니라 객체도 담을 수 있다. // express 셋팅const express = require('express');const app = express();app.listen(1234);// data 셋팅let db = new Map();let notebook = { productName: "NoteBook", price: 2000000}let cup = { productName: "Cup", price: 3000}let chair = { productName: "Chair", price: 100000}let poster = { productName: "Poster", price: 2000.. 2024. 9. 3.
728x90
반응형

티스토리툴바