해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

---

React Programming Pattern

stateful component
: state property를 가지고 있는 컴포넌트

stateless ccomponent
: state property를 가지고 있지 않은 컴포넌트

이제부터 다룰 프로그래밍 패턴은 stateful component가 stateless component에게 state를 주어서, stateless component가 stateful component의 state을 inherit하는 방식
→ 이거 참 말장난이네요...

Stateful Component Class

(정말 클래스형 컴포넌트 쓰기 싫지만)
state를 가진 클래스형 컴포넌트를 정의한다.

• state가 있기 때문에 initial state가 있고
• 그렇기 때문에 constructor가 있어야한다.

import React from 'react';
import ReactDOM from 'react-dom';


class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Frarthur' }
  }

  render() {
    return <div></div>;
  }
}

Stateless Component Class

stateless가 될 Child 컴포넌트를 만든다.

• Parent에서 inherit해 받은 props를 사용할 때는 {this.props.이름} 식으로 사용한다.
• Child 컴포넌트는 Parent 컴포넌트에서 사용해야하므로 export를 해준다.

import React from 'react';

export class Child extends React.Component {
  render() {
    return <h1>Hey, my name is {this.props.name}!</h1>;
  }
} 

Stateful to Stateless

Parent에서 Child로 state를 넘겨줘야한다

1. Parent에서 Child 컴포넌트를 불러온다.

import { Child } from './Child';

2. Child 컴포넌트를 render 하도록 한다.

render() {
    return <Child />;
  }

3. Child 컴포넌트에게 state를 넘겨준다.

render() {
    return <Child name={this.state.name} />;
  }

그러면 완료! Parent 컴포넌트를 ReactDOM에 렌더링 해준다.

ReactDOM.render(<Parent />, document.getElementById("app"));