[React] props vs State

컴포넌트를 만드는 쪽에서는 state를 사용해서 내부작업을 할 수 있게되고 

컴포넌트를 사용하는 쪽에서는 컴포넌트가 제공하는 props를 통해 내부의 작업을 할 수 있게 됩니다.

 

function FuncComp(props){ // 함수형에서는 함수를 호출할 때 첫번째 인자 값으로 전달된 props 값을 전달하도록 약속되어있습니다
    return(
        <div className="container">
            <h2>function style component</h2>
            <p>Number: {props.initNumber}</p> 
        </div>
    )
}

class ClassComp extends Component{
    render(){
        return(
            <div className="container">
                <h2>Class style component</h2>
                <p>Number: {this.props.initNumber}</p> {/* //props를 통해 전달된 값을 class에서 받을 때에는  */}
            </div> 
        )
    }
}

클래스에서는 props를 통해 전달된 값을 받습니다

함수형에서는 함수는 props를 받을 수 있는데, this를 사용하는 것이 아니고, 함수형에서는 함수를 호출할 때 첫번째 인자 값으로 전달된 props 값을 전달하도록 약속되어 있습니다.

 

 

컴포넌트가 내부적으로 자신의 상태를 바꾸고 관리하기 위해 사용하는 state는 

state의 초기값 설정을 하는데 number라는 state 값을 주는데 props로 넘어온 initNumber값을 전달하면 initNumber가 전달이 되면서 컴포넌트 안에 state는 number의 값이 2가 됩니다. 

2) 부모컴포넌트에서 넘어온 props가 자식컴포넌트에 state가 됩니다. 

3) 버튼의 setState로 인해서 state 값이 바뀌고 state 값이 바뀌면 render 메소드가 호출되면서 바뀐 결과가 반영됩니다.

 

정리하자면,

1) state 를 초기화한다

2) state의 값을 사용한다

3) state 값을 변경하는 작업

 

함수형에서는 기존에는 state를 관리할 수 없었지만 Hooks를 사용하여 state 관리가 가능하게 되었습니다.