[React]props&state

props & state의 개념

props와 state는 리액트에서 다루는 데이터의 개념이다.
쉽게 말하면, props는 받은 데이터이거나 생성된 데이터, 즉 데이터의 기원이 자기 자신이 아닌것이고, state는 자기자신의 컴포넌트에서 만들어낸 데이터이다. 어떤 컴포넌트 기준에서 얘기하는지에 따라서 같은 데이터를 지칭하고 있더라도 그 데이터는 props가 될 수 있고 state가 될 수 있다.

state

현재 컴포넌트의 데이터

state는 현재 컴포넌트에서 생성, 변할 수 있는 데이터이다. state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다.

class App extends React.Component {
	state = {
    	helloMessage : 'Hello ReactJs!'
    };
    
    render() {
    	return (
        	<div className="App">
            	<div>
                	<span>{this.state.helloMessage}</span>
                </div>
            </div>
        );
    }
}

class 내부에 state라는 프로퍼티를 하나 생성하면 된다. state가 필요없는 컴포넌트라면 state자체를 정의하지 않아도 아무런 문제는 없다.

• state는 반드시 객체 형태로 생성 되거나 null(state를 정의하지 않음) 타입이어야만 한다

• state 업데이트를 하려면 무조건 setState라는 메소드를 사용해야만 한다.

state = {
    helloMessage : 'Hello ReactJs!'
};
    
this.setState({
    helloMessage : 'Changed'
})

props

부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식 입장에서)읽기 전용이다.

class App extends React.Component {
  state = {
    count:0
  };

  render() {
    return (
      <div className="App">
      	<PropsTestClass count={this.state.count}/>
     </div>
    );
  }
}

class PropsTestClass extends React.Component {
	render() {
    	return (
        	<div>
            	<div>
                	<span>Hello I am testClass</span>
                </div>
                <div>받은 Props의 데이터는 {this.props.count} 입니다.</div>
            </div>
        );
    }
}

자식 컴포넌트에서 this.props.데이터로 접근 가능하고
부모 컴포넌트에서 자식컴포넌트 호출 시 this.state.데이터로 전달하는 형식으로 props를 주고 받을 수 있다.

클래스형 컴포넌트의 state 관리

setState() 사용

생성자에서 state 를 정의하고 setState 함수를 통해 state 값을 변경한다.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    
    // state 데이터
    this.state = {
      count: 3,	
    };
}
  
  componentDidMount() {}

  plusCount = () => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count);
  };

  minusCount = () => {
    this.setState({ count: this.state.count - 1 });
    console.log(this.state.count);
  };

  render() {
    return (
      <div className="Nemo">
        <button onClick={this.plusCount}> count+1 </button>
        <button onClick={this.minusCount}> count-1 </button>
      </div>
    );
  }
}

export default App;

함수형 컴포넌트의 state 관리

useState() 사용

import React from "react";

const Nemo = (props) => {

  //const [변수, 변수변경함수] = React.useState(초기값);
  const [count, setCount] = React.useState(3);

  const plusCount = () => {
    setCount(count + 1);
    console.log(count);
  };
  
  const minusCount = () => {
    setCount(count - 1);
    console.log(count);
  };
  
  return (
    <div className="Nemo">
        <button onClick={plusCount}> count+1 </button>
        <button onClick={minusCount}> count-1 </button>
    </div>
  );
};

export default Nemo