Chapter3 - 버킷리스트 복습용

BucketList.js

// 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // <div>버킷 리스트</div> // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를 사용할거예요. // 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다. // js 함수가 값을 받아오는 것과 똑같이 받아오네요. const BucketList = ({list}/*또는 {list} 대신 props*/) => { // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요? const my_lists = list //또는 위가 props일 경우props.list 로 받아올 수 있다. // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다. return ( <div> { // js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요. // 자세한 사용법은 아래 링크를 확인해주세요. // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map my_lists.map((list, index) => { // 콘솔을 확인해봅시다 :) console.log(list); return (<div key={index}>{list}</div>); }) } </div> ); } // 우리가 만든 함수형 컴포넌트를 export 해줍니다. // export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요. export default BucketList;

 

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> {/* 컴포넌트를 넣어줍니다. */} <BucketList list={this.state.list}/> </div> ); } } export default App;