[React]props와 state

props는 컴포넌트 사용시에 선언해주며, 부모 컴포넌트에 작성하면 자식 컴포넌트에게 전달되는 값입니다
state는 컴포넌트 내부에서 선언하여 사용하는 값입니다.

props

import React, {Component} from 'react';
import ChildComponentName from './component/ChildComponentName';
class ComponentName extends Component {
  render() {
    return (
    	<ChildComponentName propsname="value1" />
    );
  }
}
export default ComponentName;

위의 코드는 ComponentName이라는 컴포넌트의 코드이다.
ComponentName는 부모 컴포넌트이고, ChildComponentName은 자식 컴포넌트이다.

---

<ChildComponentName propsname="value1" />

이 부분에서 자식 컴포넌트를 사용하게 되는데, 속성을 지정하듯이 작성된 저 코드가 props를 선언 해주는 역할을 한다.

state

import React, {Component} from 'react';
class ChildComponentName extends Component {
  constructor(props){
    super(props);
    this.state = {
      statekey1 : "statevalue1" ,
      statekey2 : "statevalue2"
    }
  }
  render() {
    return (
      <div>
      	<p>statevalue1받아오는 방법 : {this.state.statekey1}</p>
      </div>
    );
  }
}
export default ChildComponentName;

• state는 객체 형식으로 선언을 하며, key와 value값이 있다.
• render 함수 내에서 state를 사용하기 위해서는 중괄호를 이용해서 그 안에 추가를 해주어야 한다.
• {this.state.key}이렇게 사용 하여 value를 불러 올수 있다.

---

constructor(props){
  super(props);
  this.state = {
    statekey1 : "statevalue1" ,
    statekey2 : "statevalue2"
  }
}

이런 형식으로 state를 선언을 하고,

불러와서 사용을 할 때에는
render 해주는 곳에서 {this.state.statekey1}과 같이 코드를 작성하면,
statevalue1을 반환해주게 된다.

props는 읽기 전용이라 값을 변경 할 수 없습니다.
그래서 state를 통해 값을 변경하여 동적인 웹을 만들수 있습니다

<ChildComponentName propsname={this.state.statekey} />

이렇게 props에 state를 적용해서 값을 변경해주어 동적인 웹을 만들수 있다.

하지만, state는 자식 컴포넌트는 부모 컨포넌트에 접근 할 수 없기 때문에 state 선언은 부모 컴포넌트에서 하고,

state값을 자식 컴포넌트에서 변경해야 할 경우에는

• 부모 컴포넌트에서 값을 변경하는 함수를 작성하고,
• 자식 컴포넌트에서 그 함수를 실행시켜 변경하는 방식으로 접근해야 합니다.