[REACT] props의 state를 받아와서 map으로 보여주기

<결과>

 

 

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
 
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
 
  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }
 
  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <BucketList list={this.state.list}/>
      </div>
    );
  }
}
 
export default App;

 

App.js에서 BucketList컴포넌트를 쓸 것이므로 import해온다.

버킷리스트에 props의 state를 넘겨준다.

 

 

 

 

 

 

BucketList.js

// 리액트 패키지를 불러온다.
import React from 'react'; 
 
// App.js에서 받아온 props
const BucketList = (props) => {
 
    const my_lists = props.list;
 
    console.log(props);
    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다.
    return (
        <div>
            {
                my_lists.map((list, index)=>{
                    return(<div key ={index}>{list}</div>);
                })
             }
        </div>
    );
}
 
// 우리가 만든 함수형 컴포넌트를 export 해준다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있다.
export default BucketList;

 

받아온 props중에서 특별히 list를 my_lists라고 받아온다.

• 받아온 list를 하나씩 div형태로 반환을 할 것이다
• 자바스크립트 map문법을 사용하여 !
• 자바스크립트를 쓰려면 {}안에 써야함!