[React] map 함수 사용 시 Key 값을 부여해 주는 이유
Keys React는 효율성을 높이기 위해 key 속성을 지원한다. key를 통해 기존 트리와 비교하여 업데이트 이후 트리의 자식들과의 일치 여부를 확인하고 변경한다. 간단한 list를 map함수를 사용하여 예제를 들어보자! const Tooo1 = () => { const m = [1, 2, 3, 4]; return ( {m.map((v, i) => ( {v} ))} ); }; export default Tooo1; 위 코드를 실행하면 다음 결과가 나온다. 너무 당연한 결과다. 정상적으로 코드가 실행되었다!! 그렇지만 브라우저에서는 경고를 보내고 있다. 경고의 원인은 map함수에 key 값을 안 넣어서 그렇다. Key 값을 왜 넣어야 할까? 우선 key는 React가 어떤 항목을 변경, 추가 또는 삭제..
FRONT-END
2022. 4. 26. 18:34
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 그리디
- 운영체제
- 연습문제
- CPP
- 정렬
- java
- py
- 정리
- 문자열
- 자바스크립트
- 프로그래머스
- Web
- JS
- 쉽게배우는
- 백준
- 우종정
- 알고리즘
- 정답
- 자바
- 답
- 해답
- 구현
- 쉽게 배우는 자바 프로그래밍
- OS
- BFS
- 파이썬
- 풀이
- 쉽게배우는자바프로그래밍
- C++
- Python
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함