Each child in a list should have a unique "key" prop.

React로 간단한 프로젝트를 만들고 있었는데 console창에
Each child in a list should have a unique "key" prop 라는 오류를 발견했고 오류의 원인과 해결 방법에 대해 작성해볼려고 한다

😄 오류 원인

/* 자식 Component */
class Habit extends Component {
	render() {
    	return (
        	<React.Fragment>
          		<li>
          			<span>{this.props.name}</span>
          		</li>
          	</React.Fragment>
        )
    }
}

/* 부모 Component */
class Habits extends Component {
  state = {
    habits: [
      { name: 'A'},
      { name: 'B'},
      { name: 'C'},
    ],
  };
  render() {
    return (
      <ul>
        {this.state.habits.map((habit) => {
          return <Habit />;
        })}
      </ul>
    );
  }
}

• 관련 없는 코드는 생략하였다

• 자식 Component에서 부모 Component의 state에 있는 name에 접근하기 위해 this.props.name을 사용했더니 console창에서
  Each child in a list should have a unique "key" prop 라는 오류를 발견하였다

• 오류의 원인은 간단하다

  React에서 map() 메서드를 사용하기 위해서는 배열의 각 element마다 독립적인 key 값을 설정해줘야 하는데 위의 코드에서는 그런게 없기 때문에 오류가 나는 것이다
  
  - key란 React에서 list를 만들 때 포함되어야 하는 문자열 속성으로 어떤 항목을 식별하는 것을 돕는다
  
  - key는 React 내부적으로 쓰여지기 때문에 Component로 전달되지 않는다
  
  - key는 변경되지 않고 유일해야하므로 key 값으로 배열의 인덱스를 사용하는 것을 자제하자 (배열 순서가 변경되면 인덱스도 변경되기 때문에)

😄 오류 해결

/* 자식 Component */
class Habit extends Component {
	render() {
    	return (
        	<React.Fragment>
          		<li>
          			<span>{this.props.name}</span>
          		</li>
          	</React.Fragment>
        )
    }
}

/* 부모 Component */
class Habits extends Component {
  state = {
    habits: [
      {id: Date.now(), name: 'A'},
    ],
  };
  render() {
    return (
      <ul>
        {this.state.habits.map((habit) => (
          <Habit
            key={habit.id}
            name={habit.name}
          />
        ))}
      </ul>
    );
  }
}

• 위의 코드와 같이 부모 Component에서 habits배열에 id를 지정해줬다

  • 1, 2, 3 이런 일반적인 숫자 사용보다는 Date.now()를 사용해 unique하게 지정했다
    
    

• 이후 map() 내부에서 Habit Component에 key를 지정했다

• 오류 말끔하게 해결 !!

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍