react props, state Bloging

1. props 

function Welcome(props) { return <h1>Hello {props.name}</h1>; }

props : props를 받는다

props.name : 받은 props의 name(키값)의 value값을 넣음

const element = <Welcome name="Sara" />;

name="Sara" : 개념적으로 볼때 

props : {

name : "Sara"

}

props 오브젝트가 생성되어 전달 된다고 생각하면 된다.

2.  defaultProps

class Welcome extends React.Component { render() { return <h1>Hello {this.props.name}</h1>; } } Welcome.defaultProps = { name: "world", };

defaliutProps 메소드를 사용하여 넘겨받은 props가 없을 경우 defaultProps에 설정된 값이 출력된다.

3. state

class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }); } render() { return (<button onClick={() => this.updateCount()} > Clicked {this.state.count} times </button>); } }

this.state : state는 setState를 통해서만 수정을 해야 수정 후 랜더링이 된다.

setState : setState는 비동기 함수이기 때문에 콜백함수를 사용하는 것이 좋다.

 인자로 오는 prevState는 this.state의 변경되기 전의 값이 오는 걸로 보여진다

 두번째 인자 props는 부모로 부터 받은 props를 사용 할 때 넣는다. 지금 코드에서는 없어도 무방하다

 

참고 : https://wonhada.com/?topic=reactjs-props%EC%99%80-state-%EB%B9%84%EA%B5%90