Component - 클래스형 & state 넘겨주기

'

클래스형 App.js 기본 코드

// App component를 class형으로!
import React from 'react';

class App extends React.Component {

  constructor(props){
    super(props);

    this.state = {}
  }

  componentDidMount(){

  }
  
  render(){

    return (
      <div className="App">
        
      </div>
    );
  }
}

export default App;

 

클래스형 BucketList App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
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/>
      </div>
    );
  }
}

export default App;

 

App 컴포넌트가 가지고 있는 state를 BucketList에 넘겨주기

App.js의 render에 해당 코드를 삽입해보자.

render() {
    console.log(this.state);
    ...
}

- this 키워드는 깊이 들어가면 context 객체와 연관이 있다.

- 함수나 클래스 안에서 사용하면 this를 쓴 위치(위의 경우에는 App 클래스)에 있는 값을 가지고 온다고 생각하면 된다.

- ex) App 클래스 안에서 쓰면, this.[변수명]은 App 클래스 안에 있는 값을 가지고 온다.

 

App 컴포넌트에서 BucketList 컴포넌트로 state를 넘기기

render() {
    // this 키워드를 통해 state에 접근
    console.log(this.state);

      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어준다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <BucketList list={this.state.list}/>
      </div>
    );
  }

 

잘 넘어갔는지 확인을 위한 과정 - Bucket list 수정

const BucketList = (props) => {
    
    console.log(props);

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환
    return (
        <div>
            버킷 리스트
        </div>
    );
}

 

위의 내용 응용

 

BucketList.js

import React from 'react'; 

const BucketList = ({list}) => {
    // props 가 아닌 {list} 를 사용
    // props를 log 찍어보면 list: [a,b,c] 가 나오는데 {list} 로 받아온다면 어트리뷰트 값만 가져올 수 있다.

    const my_lists = list;
    // list 를 my_lists에 넣어준다.
    console.log(my_lists);
    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            {
               my_lists.map((list, index) => {
                 //map. 리스트의 갯수만큼 => 오른쪽 구문을 반복
                    console.log(list, index);
                    return (<div key={index}>{list}</div>);
                })
            }
        </div>
    );
}

export default BucketList;

 

위의 {list} 대신 props로도 가능하다.

const BucketList = (props) => {
    const my_lists = props.list;