Props 와 State
Props와State둘 다 변경이 발생하면, 랜더가 다시 일어날 수 있습니다.
Render 함수
실습
Props
function 컴포넌트에서 props 표현 방식
- function 컴포넌트에 들어오는 props는 인자로 들어오게 됩니다.
- props는 객체입니다.
// {message: '안녕하세요!!!'}
function Component(props) {
return (
<div>
<h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
</div>
);
}
ReactDOM.render(<Component message="hello!!!" />, rootElement);
// message의 값이 바뀌면 Component 는 다시 그림을 그립니다. 다시 그릴 때에는 바뀐 값으로 그립니다.class 컴포넌트에서 props 표현 방식
class Component extends React.Component {
render() {
return (
<div>
<h1>
{this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.
</h1>
</div>
);
}
}
// class 컴포넌트에서는 props가 this.props로 들어오게 됩니다.
ReactDOM.render(<Component message="hello!!" />, rootElement);
// message의 값이 바뀌면 Component 는 다시 그림을 그립니다. 다시 그릴 때에는 바뀐 값으로 그립니다.props를 넘기지 않을 때, default값 설정하는 방법
default props 기능이라고 합니다.
클래스 컴포넌트에서는 2가지, 함수 컴포넌트에서 1가지 방법이 있습니다.
클래스 컴포넌트와 함수 컴포넌트 둘 다 사용이 가능합니다.Component.defaultProps = { message: "기본값" }; // 컴포넌트에 props가 들어오지 않으면 기본값으로 정의한 값이 출력됩니다. ReactDOM.render(<Component />, rootElement); // message의 값이 바뀌면 Component 는 다시 그림을 그립니다. 다시 그릴 때에는 바뀐 값으로 그립니다. // 출력 결과 : 기본값 이것은 클래스로 만든 컴포넌트 입니다.
클래스 컴포넌트 안에 정의합니다.class Component extends React.Component { render() { return ( <div> <h1> {this.props.message} 이것은 클래스로 만든 컴포넌트 입니다. </h1> </div> ); } static defaultProps = { message: "기본값2" }; //이 방법은 클래스에서만 사용이 가능합니다. } // class 컴포넌트에서는 props가 this.props로 들어오게 됩니다. // Component.defaultProps = { // message: "기본값" // }; // 컴포넌트에 props가 들어오지 않으면 기본값으로 정의한 값이 출력됩니다. ReactDOM.render(<Component />, rootElement); // message의 값이 바뀌면 Component 는 다시 그림을 그립니다. 다시 그릴 때에는 바뀐 값으로 그립니다. // 출력 결과 : 기본값2 이것은 클래스로 만든 컴포넌트 입니다.
클래스 컴포넌트에서만 사용이 가능합니다.
State
현재는 클래스 컴포넌트에서만 사용할 수 있는 기능으로 생각하겠습니다.
나중에 함수 컴포넌트에서 hook을 배우면 똑같은 기능을 하는 State를 function에도 설정해 줄 수 있습니다.
클래스 컴포넌트에서 State 정의하기
2가지 방법이 있습니다.
클래스 컴포넌트에서 state는 항상 객체이여야 합니다.
-
class Component extends React.Component { state = { count: 0 };// 클래스에서 state는 항상 객체이여야 합니다. render() { return ( <div> <h1> {this.props.message} 이것은 클래스로 만든 컴포넌트 입니다. </h1> <p>{this.state.count}</p> </div> ); } componentDidMount() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); }, 2000); } // 2초 뒤 p태그의 값이 0에서 1로 변경됩니다. static defaultProps = { message: "기본값2" }; // 이 기본값 설정 방법은 클래스에서만 사용이 가능합니다. }고전 프론트엔드에서는 변경이 생기면 다시 새로고침으로 반영을 해주어야 했습니다. React는 state를 변경하기위해 setState를 호출하면 값을 변경한 후, 변경된 상태로 render() 메소드가 자동으로 다시 호출합니다.
this.setState(): state를 다시 변경해 주는 함수입니다. -
// 방법1 // state = { // count: 0 // }; // 방법2 constructor(props) { super(props); this.state = { count: 0 }; }
방법1이 더 간단하지만 경우에 따라 방법2를 사용해야 하는 경우도 있습니다.
그런경우 방법2를 떠올려서 작성하면 됩니다.
클래스 컴포넌트에서 state 값 변경하기
2가지 방법이 있습니다.
- 객체를 새로 만들어서 넘겨줍니다.
this.setState({ count: this.state.count + 1 }); - 이전 값을 가지고와서 변경하고 다시 넣는 작업에서는,
위처럼 새로운 객체를 만들어서 할당해 주는 방식 보단
객체 대신 함수를 넣는 방법을 사용합니다.
특징은 1번방법은 객체를 새로 만들어서 통채로 넣는 방식이라면, 2번 방법은 이전값을 이용한다는 특징이 있습니다.this.setState((previousState) => { const newState = {count: previousState.count + 1} return newState; });
