리액트

props

Component로 작성한 엘리먼트를 발견시 JSX 어트리뷰트를 해당 객체에 단일객체로 전달(이 객체가 props)

props는 읽기 전용이기 때문에 수정해서는 안된다.

 

state

직접 수정 x -> setState()

업데이트는 비동기적일수도(this 사용에 주의)

업데이트는 병합

state 끌어올리기(https://view.ziteboard.com/shared/96522991256516)

BoilingVerdict 컴포넌트 생성
(celsius prop을 받아서 온도가 물을 끓이기에 충분한지 여부 출력)

function BoilingVerdict(props) {
	if(props.celsius >= 100) {
    	return <p>The water would boil</p>
    }
    return <p>The water would not boil</p>
}

 

Carculator 컴포넌트 생성
(온도를 입력할 수 있는 input을 렌더링하고 그 값을 this.state.temperature에 저장)
또한 현재 입력값에 대한 BoilingVerdict 컴포넌트를 렌더링합니다.

class Calculator extends React.Component {
	constructor(props){
    	super(props)
        this.handleChange = this.handleChange.bind(this);
        this.state={temperature:''};
    }
    
    handleChange(e){
    	this.setState({temperature:e.target.value});
    }
    
    render(){
    	const temperature = this.state.temperature;
        return (
        	<fieldset>
            	<legend>Enter temperature in Celsius:</legend>
                <input 
                	value={temperature}
                    onChange={this.handleChange} />
                <BolingVerdict
                	celsius={pareseFloat(temperature)} />
                </fieldset>
           );
        }
    }

 

life cycle

componentdidmount

componentwillUnmount