2. props & state

1. props

리액트의 특징 중 하나는 '단방향 흐름'이다. 단방향 흐름이란 말 그대로 데이터가 한 방향으로 밖에 나갈 수 없다는 것이다.

즉, 데이터는 상속관계에서 상위 컴포넌트에서 하위 컴포넌트로 밖에 줄 수 없다는 말이다. 이때 하위 컴포넌트에 전달할 수 있는 방법이 props이다.

 

2. state

state는 각 컴포넌트의 '상태'이다. props는 단순히 데이터를 전달한다는 것에 그친다면, state는 해당 컴포넌트의 상태로 가지고 있을 수 있을 수 있다.

 

예제)

 

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

//App
class App extends React.Component {
  constructor(props) {
    super(props);
	
    //state
    this.state = {
      color : 'black'
    };
  }

  render() {
    return (
      <Buttion color={this.state.color}/>
    );
  }
}

//Button
class Button extends React.Component {

  render() {
    return (
      <p>{this.props.color}</p>
    );
  }
}

 

class는 각 컴포넌트를 정의한다. App 컴포넌트안을 보면 this.state가 위에서 설명한 state이다. 여기에는 해당 컴포넌트의 상태를 담을 수 있다. 물론 이는 setState라는 함수를 통해서 변경할 수 있다. 중요한 것은 state모양이 객체와 같아서 

 

this.state.color = ???와 같이 변경하면 error가 발생한다. 그렇기 때문에 setState함수를 사용해야 한다.

 

다음으로 App 컴포넌트에 render함수 안을보면 Button 컴포넌트가 있고, color= {this.state.color}가 보인다. 이 방식이 상위 컴포넌트가 하위 컴포넌트에게 props를 통해 데이터를 전달하는 방법이다.

Button의 props안에 color라는 키에 this.state.color(= 'black')을 가지게 되고, 이를 전달받아 사용할 수 있게 된다.