개발 블로깅/오늘의 TIL
[2019.05.19] 오늘의 TIL
Hello이뇽
2019. 5. 19. 18:34
오늘 리액트 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-
반응형