5.1 리스트 렌더링 및 조건부 Content: key (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

key값 주기

지금까지 값을 입력해 버튼을 누르면 새 expese가 expenses리스트 최상단에 추가되어 잘 작동하는 것을 확인할 수 있다.

하지만 개발자모드의 콘솔창을 확인해보면 유니크한 key값을 가져야한다는 에러문구가 나온다.

리액트에서는 상태를 가진 리스트를 렌더링할때는 고유한 key 값을 부여하지 않으면 버그가 일어날 수 있고, 리액트가 각각의 item들이 어디에 위치해야할지를 모른다. 

key 값이 있을때의 장점

• 컴포넌트 배열을 렌더링할 때 어떤 원소에 변화가 생겼는지 쉽게 알 수 있다.

key 값이 없을때 나오는 에러

key값을 주는 방법

App.js 에서 각각 리스트마다 id를 주었고 이 리스트를 useState로 상태를 관리하고있다.

const DUMMY_EXPENSES = [
  {
    id: "e1",
    title: "Toilet Paper",
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  {
    id: "e2",
    title: "New TV",
    amount: 799.49,
    date: new Date(2021, 2, 12),
  },
  
  # App.js

const [expenses, setExpenses] = useState(DUMMY_EXPENSES);

NewExpenses.js 에서도 랜덤 값으로 id를 부여한다.

const NewExpense = (props) => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString, //랜덤 값 id
    };
    props.onAddExpense(expenseData);
  };

 

마지막으로 렌더링 되는 곳에서 prop으로 key값을 주면 끝이다.

부여할 key값이 없다면 map함수를 사용할때 index를 사용해 index를 부여하는 방법이 있는데

버그가 발생할 수 있으므로 추천하지는 않는다.

        {props.items.map((expense) => (
          <ExpenseItem
            key={expense.id} // id를 key값으로 설정
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
        
        # Expenses.js