방구석 개발자의 놀이터

  • 홈
  • 태그
  • 방명록

render 1

[React] DOM 요소에서 key 값의 중요성

React DOM 요소에서 반복되는 요소에 key값을 넣어주는게 렌더링에서 효율적이다. 아래의 예제로 확인해보자! if(flag){ return( 사과 바나나 ); } else { return( 사과 파인애플 바나나 ); } 위와 같이 flag 조건에 따른 렌더링을 할 때 리액트는 이전의 돔과 비교해서 다른 점을 렌더링해주는 특징이 있다. 이전 돔과 비교할 때 순서를 기준으로 비교한다. 즉, 사과 바나나 순서에서 사과 파인애플 바나나 순서로 비교해서 따라서 위와 같이 조건에 따라 변한다면 파인애플과 바나나가 새로 렌더링된다. 하지만! 우리 입장에서는 파인애플만 추가된건데 굳이 바나나까지 새로 렌더링 된다면 비효율적이다! (물론 예제처럼 몇 안되는 돔 요소면 성능 차이는 없겠지만 복잡한 연산의 렌더링일 경..

Front-End/React 2020.12.23
이전
1
다음
더보기
프로필사진

게으른 사람들에게 편리함을 제공해 줄 수 있을 때 가장 기쁜 개발자

250x250
  • 분류 전체보기 (102)
    • JAVA (2)
    • Spring (17)
    • Python (14)
    • 회고록 (4)
    • Flutter (3)
    • Git (1)
    • Spring Boot (15)
    • Algorithm (3)
    • AWS (1)
    • Front-End (34)
      • HTML (1)
      • CSS (1)
      • SCSS (2)
      • JavaScript (12)
      • React (13)
      • React-query (1)
      • NextJS (0)
      • Test (1)
    • OpenSource (3)
    • 독서 (0)
    • 강의 (1)
    • Error (4)

Tag

회고록, flutter, frontend, 개발자, aspect, react, CSS, springboot, component, es6, front-end, PYTHON, spring, springframework, javascript, react-router-dom, spring boot, opensource, 프론트엔드, lombok,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
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.

티스토리툴바