props 와 state

props 와 state

props

컴포넌트 외부에서 컴포넌트에게 주는데이터

State

컴포넌트 내부에서 변경 할 수 있는 데이터

둘다 변경이 발생하면 랜더가 다시 일어날 수 있음

render 함수

props 와 state를 바탕으로 컴포넌트를 그린다. 그리고 props 와 state가 변경되면, 컴포넌트를 다시 그린다. 컴포넌트를 그리는 방법을 기술하는 함수가 랜더함수이다.

props 예시

function

//props >> {message: "하이하이"} 로 들어옴 
function Component(props) {
return (
        <div><h1>{props.message} 함수로만든컴포넌트 </h1> </div>
    );
}

ReactDOM.render(<Component  message = "하이하이" /> , document.querySelector("#root"))

class

class Component extends React.Component{
render() {
    return (
        <div><h1>{this.props.message} 클래스로만든컴포넌트 </h1> </div>
        ); 
    }
}

ReactDOM.render(
<Component message = "하이하이" /> , document.querySelector("#root")
)

props 기본 값 지정하기

class Component extends React.Component{
render() {
    return (
        <div><h1>{this.props.message} 클래스로만든컴포넌트 </h1> </div>
    ); 
}
//클래스에서 사용가능
static defaultProps = {
    message: "기본값"
    }
}

//함수에서도 사용가능
Component.defaultProps = {
    message:"기본값",
};

ReactDOM.render(
    <Component/> , document.querySelector("#root")
)

state 예시

class Component extends React.Component{
    state = { // 스테이트는 무조건 객체여야한다. 
        count: 0
    };
    render() {
        return (
            <div>
                <h1>
                    {this.props.message} 클래스로만든컴포넌트 
                </h1> 
                <p>{this.state.count}</p>
            </div>
        ); 
    }
}
ReactDOM.render(
    <Component/> , document.querySelector("#root")
)

state 변경 시 this.setState({...})를 사용해야 한다.

값이 바뀌고 render 가 다시 호출되는것!!

생성자로 쓰는방식

class Component extends React.Component{
    constructor(props){
        //생성자 함수 props를 받는다
        super(props); //props를 담아서 호출해주어야한다.

        this.state = {count : 0};
    }
    render() {
        return (
            <div>
                <h1>
                    {this.props.message} 클래스로만든컴포넌트 
                </h1> 
                <p>{this.state.count}</p>
            </div>
        ); 
    }

    componentDidMount(){
        setTimeout(() => {
            this.setState((proeviousState) => {
                //이전 state받아서 처리하기
                const newState = { count: proeviousState.count + 1 }
                return newState;
            });
        }, 1000);
    }

}


ReactDOM.render(
    <Component/> , document.querySelector("#root")
)