5-2. props, state

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트는 props를 받아오기만 가능, 받아온 props는 수정 불가.

state는 컴포넌트 내부에서 선언, 값변경가능.

App.js

import React, { Component } from 'react';

import MyName from './MyName';

class App extends Component {

render() {

return (

<MyName name="리액트" />

);

}

}

export default App;

MyName를 import해야 사용 가능.

1. Myname.js에서 App.js 값을 들고 올 수 있다. App(부모)

import React, { Component } from 'react';

class MyName extends Component {

render() {

return (

<div>

안녕하세요!<b>{this.props.name}</b>

</div>

);

}

}

export default MyName;

받아온 props값은 this. 를 사용해 조회가능하다. 

2. 값이 없을 경우에는 default값 가능

import React, { Component } from 'react';

class MyName extends Component {

render() {

return (

<div>

안녕하세요! <b>{this.props.name}</b>

</div>

);

}

}

MyName.defaultProps = {

name: '기본이름'

};

export default MyName;

3. 함수형을 component형으로도 가능

import React from 'react';

const MyName = ({ name }) => {

return (

<div>

안녕하세요! 제 이름은 {name} 입니다.

</div>

);

};

export default MyName;

이 형식으로 쓸때는 state와 lifecycle이 빠져있다는 차이가 있다.

----------------------------------------------------------------------------

state - 동적인 데이터를 다룰때

1. 컴포넌트의 state를 정의할 떄는 class fields문법을 사용해서 정의함

import React, { Component } from 'react';

class Counter extends Component {

state = {

number: 0//시작값

}

handleIncrease = () => {

this.setState({

number: this.state.number + 1

});

}

handleDecrease = () => {

this.setState({

number: this.state.number - 1

});

}

render() {

return (

<div>

<h1>카운터</h1>

<div>값: {this.state.number}</div>

<button onClick={this.handleIncrease}>+</button>

<button onClick={this.handleDecrease}>-</button>

</div>

);

}

}

export default Counter;

classfield 문법 사용안할시

import React, { Component } from 'react';

class Counter extends Component {

constructor(props) {

super(props);

this.state = {

number: 0

}

}

...

}

constructor에서 super(props) 호출한것은, 컴포넌트를 상속하고, constructor을 작성하면 기존의 클래스 생성자를 덮어쓰기에 쓴다.

메소드 생성시 화살표함수를 써준다.

render에서는 버튼 클릭시 위의 메소드가 호출되도록 설정

메소드 호출시 주의할 사항으로는 이벤트는 카멜표기법으로, 또한 함수 호출이 아니라 함수의 값을 가져와야된다.

컴포넌트를 App.js에서 불러와서 렌더링. 

setState = 객체로 전달되는 값만 업데이트 시켜줌