List and Key

기본 리스트 컴포넌트

 

import React from "react";

export default function List() {
  
  const todos = [
    { id: 1, text: "Drink Water" },
    { id: 2, text: "Go to Bed" },
    { id: 3, text: "Listen Lecture" },
    { id: 4, text: "Take a Shower" },
  ];
  
  const Item = (props) => {
    return <li>{props.text}</li>;
  };

  const TodoList = todos.map((todo) => <Item {...todo} key={todo.id} />);
  return TodoList;
}

 

여러개의 컴포넌트 렌더링하기

 

• JavaScript map() 함수를 사용하여 todos 배열을 반복 실행한다.

• Item 컴포넌트에 props로 todos의 객체들을 하나씩 넣어준다.

console.log(todo)

Item 컴포넌트의 props → id:1, text: 'Drink Water' // props = id:2, text: 'Go to Bed' ..... 

접근 방식 : props.id , props.text 

실제 사용 방식 : <li> {props.text} </li>

map함수로 배열안에 있던 객체들이 하나씩 props로 전달 된다.

<li>Drink Water</li>

<li>Go to Bed</li>

....

• 일반적으로 컴포넌트 안에서 리스트를 렌더링한다.

const Item = (props) => {
    return <li>{props.text}</li>;
  };

 

• Item컴포넌트는 전달받은 props를 중괄호 {}을 이용하여 사용.

• map함수 사용하여 props를 Item 컴포넌트로 반환하고 TodoList에 저장한 후 return 한다.

 

 

 

Key

리액트는 페이지 전부를 렌더링하는 것이 아니라 기존과 비교하여 수정되는 부분만 렌더링해주는 방식이다.

이 과정에서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다.

즉 ,Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 

 

 

key로 컴포넌트 추출하기

 

위 코드의 경우 Item컴포넌트를 추출하는 과정에서 key값은 Item컴포넌트에 넣어줬다. 그 이유는 엘리먼트가 map 함수로 인해 여러개 생성되는데, 뭉쳐있는 형제 엘리먼트 사이에서 서로 고유성을 가져야하기 때문에 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정하는 것.

 

또한 key는 어튜리뷰트(속성)이기 때문에 props로 전달 되는 것은 아니니 참고하면 좋을 듯하다.