profile
열심히 노력하는 신입 프론트엔드 개발자 문건우입니다.
태그 목록
전체보기 (184)JavaScript(45)알고리즘(40)프로그래머스(25)React(20)python(14)leetcode(13)부스트캠프(12)삽질(12)후기(8)typescript(8)js(7)멤버십(5)next(5)ts(5)면접(5)DSC(5)next.js(5)타입스크립트(5)프론트엔드(4)DND(4)boj(4)express(4)위상정렬(3)Nginx(3)debounce(3)에러(3)NHN Forward(3)TIL(3)카카오 코딩테스트(3)SSR(3)컨퍼런스(3)백준(3)redux(3)우아한 테크 캠프(3)리액트(3)회고(3)webpack(3)key(2)throttle(2)https(2)ES5(2)ES6(2)boostcamp(2)동아리(2)(2)데브매칭(2)카카오 인턴(2)ux(2)array(2)Recoil(2)프로젝트(2)리뷰(2)카카오 인턴 코딩테스트(1)프론트엔드과제(1)썸머코딩(1)확장(1)카카오 알고리즘(1)PNU(1)홍보(1)우테캠(1)훌륭한 개발자(1)es8(1)Context API(1)arguments(1)세션(1)쿠키(1)NaN(1)UI(1)생성자(1)action(1)사이드프로젝트(1)Trie(1)호이스팅(1)우아한 형제들(1)corejs(1)생각정리(1)자동배포(1)ScrollIntoView(1)garbage colerctor(1)레디스(1)ncloud(1)웹 표준(1)그룹 프로젝트(1)cutom hook(1)유틸리티 타입(1)Tree Shaking(1)트리 쉐이킹(1)emotion(1)트랜스파일(1)dynamic routing(1)CSS(1)lazy(1)Saga(1)bind(1)배포(1)데이터베이스(1)code splitting(1)웹팩(1)cookie(1)sql(1)개발자(1)Node(1)mysql(1)HMR(1)babel(1)html(1)카카오(1)dd(1)Sequelize(1)해커톤(1)상속(1)typeOrm(1)class(1)error(1)목표(1)shell(1)자료구조(1)객체(1)Index(1)nextjs(1)개발(1)useCallback(1)Symbol(1)queue(1)this(1)arrow function(1)private(1)화살표 함수(1)useReducer(1)Prototype(1)코드 스플리팅(1)부산(1)figma(1)clipboard(1)웹 접근성(1)코딩테스트(1)챌린지(1)Summer/Winter 코딩(1)개발자의 디자인 독해력(1)책 리뷰(1)
post-thumbnail

컴포넌트의 key가 바뀌었을 때 리렌더링? 언마운트?

key 속성은 보통 list를 map으로 반복문으로 렌더링할 때 각 element를 구분하고 바뀌었는지 구분하기 쉽게 도와주는 역할을 한다. key는 props로 넘어가지 않고 단순히 리액트를 도와주는 역할을 하는 것이다.기본적으로 props가 바뀌면 리렌더링이 되는데

2021년 3월 17일
·
0개의 댓글

index를 key로 쓰면 안 되는 이유

React는 이전 리스트와 현재 리스트를 순회하고 차이점이 있으면 변경을 생성한다.예를 들어 맨 끝에 엘리먼트를 추가한다면, 변경은 잘 작동할 것이다.React는 첫번째, 두번째 요소가 같은 것을 확인하고, 마지막에 third를 추가할 것이다.하지만 위와 같이 구현할

2020년 6월 20일
·
0개의 댓글