코딩연습장

  • 홈
  • 방명록
  • 글쓰기
  • 관리자

2024/10/11 1

24.10.11 react에서 리스트 매핑중 key를 사용해야하는 이유

문제상황오늘 팀 프로젝트의 mockview와 state들을 만들면서 이러한 오류가 있었다.학력의 오른쪽 + 버튼을 누르면 아래 3가지 입력창이 계속 생기는 기능을 만들고 있었다.{eduArray.map((edu, idx) => { return ( handleEduArray(idx, 'graduated_at', e)} /> );})}이렇게 key에 crypto.randomUUID()를 넣어주어 유니크한 키 값을 가지도록 하였다.인풋값을 입력할때마다 focus가 풀렸다. 이유가 뭘까??발생 이유리액트 내부 리스트 매핑에서의 key는 결국 리액트가 해당 컴포넌트를 식별하기 위함이다.컴포넌트 또한 배열로 관리하여 key값으로 비교하게 되는데, 내가 작성..

2차 공부/TIL 2024.10.11
이전
1
다음
더보기
프로필사진

  • 분류 전체보기 (344)
    • 2차 공부 (162)
      • 알고리즘 (34)
      • TIL (127)
      • WIL (0)
      • 최종프로젝트 (1)
    • 1차 공부 (181)
      • React공부 (42)
      • WIL (13)
      • TIL (39)
      • 알고리즘 (28)
      • 공부한 자료 (21)
      • JavaScript (7)
      • 코드분류 (1)
      • 웹개발노트 (5)
      • 설정관련 (3)
      • 기타 (2)
      • 기술면접 준비 (20)

Tag

action creator, tanstack query, nextjs, redux, 프로그래머스, react-redux, 알고리즘, js, React Query, react, vite, CSS, Reducer, 리덕스, TDZ, 리액트, 코딩테스트, 팀프로젝트, 실행컨텍스트, javascript,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2024/10   »
일 월 화 수 목 금 토
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

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바