[리액트] 배열 렌더링

[영화관 가기,매일 책읽기,여행가기] 배열을 출력하는 예제

App.js

BucketList.js

App.js 의 생성자에서 만든 this.state={list:["영화관가기","매일 책읽기","여행가기"]} 를 'BucketList.js' 에 매개변수로 넘겨주고 있다.

그리고 매개변수를 받는 'BucketList.js' 이다

 

여기서 중요한건 App.js 에서 매개변수를 넘겨줄 때

<BucketList list = {this.state.list}/> 여기서 'list'라는 이름으로 넘겨주면 받는 쪽에서도 꼭 명칭이 같아야함.

 

만약에 <BucketList list_array = {this.state.list}/> 라고 하면 이 이름에 맞춰줘야함.

그리고 props 가 아니라 다음과 같이도 가능함.

하지만 반드시 중괄호 '{}' 안에 써야함. 그리고 역시 App.js에서 <BucketList list_array = {this.state.list}/> 로 보내면 이름을 맞춰줘야함.

---

그리고 마지막부분에서 div 에 key 값을 넣어주는 부분이 이해가 안갔는데, 배열을 map으로 렌더링하면서 리스트항목에 'key'를 넣지않으면 경고가 표시됨. key는 React가 어떤 항목을 변경, 추가 또는 삭제할 때 식별하는 것을 돕기때문에 넣어야함.