[2019.05.19] 오늘의 TIL

오늘 리액트 2주 프로젝트 작업을 하다가 정말 알 수 없는 문제로 1시간을 아깝게 버린 일이 있었다..

해당 문제는 아래의 예시와 같다..

var names = ['inyong','jack','carry','luck'];

return (
  {names.map((data,index)=>{
    <MyComponent name={data} key={index}/>
  })}
)

 

위와 같이 name,key를 props로 던져준다. key는 동적으로 생성하여 사용시, 각 컴포너트 마다의 고유의 key값을 가지게 하는 것을 권장한다.

그래서 저렇게 key = {index}로 넣어서 각 고유의 키  값을 전달해주지만, MyComponent 태그 안에서는 key 값을 찾으면 계속 undefined로 나온다.

class MyComponent extends Component {
  render(){
    consol.log(this.props.key) // undefined
    return (
      <div />
    )
  }
  
}

알고보니 key는 props로 받아서 사용할 수 없다.

그냥 고유의 값을 가져와서 사용하고 싶으면, key 말고 다른 용어로 또 넣어줘서 사용해야한다.... -0-