패스트캠퍼스 챌린지 5일차 - 리액트 Key와 리렌더링

 

key와 리렌더링

 

효율적으로 변화를 감지하고 리렌더링 하기 위해 리액트에서는 key라는 엘리먼트 리스트를 만들때 포함해야되는 특수한 속성을 지원한다.

key는 기존 트리와 이후 트리의 자식들이 일치하는지 확인해주는 역할을 하기 때문에,

전역에서 유일할 필요없이 형제요소에서만 유일성을 유지하면 된다.

 

See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen.

key는 고유하게 식별할 수 있어야 하기 때문에 대부분의 경우 데이터의 ID 값을 사용한다.

유일하게 사용할 수 있는 값이 없을 경우 인덱스를 key로 사용할 수 있으나,

인덱스를 key로 사용하게 되면 재배열이 일어날 경우 컴포넌트에 예기치않은 문제가 발생할 수 있기때문에 주의해야한다.

(여기서 인덱스는 array[index] 처럼 배열이나 리스트의 순서를 의미한다.)

 

** 리액트는 key를 명시적으로 지정하지 않을 경우 기본적으로 index를 key로 사용한다.

** key 속성을 명시하더라도 컴포넌트에 props로 전달되지 않기때문에 해당 값이 필요할 경우 따로 props를 넘겨주어야한다.

---

강의 중 JS 문법

 

setInterval / clearInterval

 

setInterval() : 주기적으로 인자를 실행하는 함수

//Hello!라는 문자열을 콘솔에 3초에 1번씩 실행한다.

function test() {

    console.log("Hello!");

}

setInterval(test, 3000);

 

clearInterval() : 현재 진행되고 있는 함수를 중지

//인자로 함수 이름 넣어준다.

clearInterval(interval);

 

Array.prototype.filter()

 

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

해당되는 요소가 없을 경우 빈배열을 반환한다.

 

Array.prototype.includes()

 

배열이 특정 요소를 포함하고 있는지 판별한다. (반환값 boolean)

 

Array.prototype.find()

 

주어진 판별 함수를 만족하는 첫번쨰 요소의 값을 반환한다.

그런 요소가 없으면, undefined를 반환한다.

 

Array.prototype.map()

 

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

---

같이 읽으면 좋은 글  👇👇👇 

공식문서 재조정(Reconciliation)

공식문서 리스트와 key