[리액트] props vs state
Props vs State
Props(=properties)와 State모두 일반 자바스크립트 객체이다. 둘의 가장 큰 차이점은 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이로 자식컴포넌트에서 읽기만 가능하고, state는 컴포넌트 안에서만 관리된다.
코드를 통해 살펴보자.
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
const element = <Welcome name="Sara" />;
// Sara라는 값을 담고있는 name이란 property를 생성했다.아래와 같이 함수형을 사용하여 props를 받아 올 수도있다.
function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}즉, props는 “come from above.” 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다.
props만의 가장 큰 특징은 이미 전달된 props는 수정될 수 없다. (과거엔setProps나 replaceProps를 사용하여 값 변경이 가능하지만 현재는 제거되어 사용할 수 없다.)
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
Welcome.defaultProps = {
name: "world",
};부모 컴포넌트에서 내려오는 props가 없다면 defaultProps를 설정하여 빈 값대신 default값을 넣어 줄 수도 있다.
State도 props와 마찬가지로 특정 컴포넌트의 데이터를 가지고있지만 props와 조금은 다른 특성이있다.
props는 부모컴포넌트의 데이터를 자식컴포넌트에서 다루는 반면, state는 컴포넌트 자체적으로 데이터 생성, 수정, 사용이가능하다. 즉, state에 담긴 데이터는 특정 컴포넌트 내에서만 관리되는 것이다.
constructor() {
super();
this.state = {
count: 0,
};
}state에 initial data를 넣어주고있다. 위의 예시처럼 초기값은 하드코딩도 가능하고 props에서 받아올 수도있다.
props는 불변성이기때문에 값을 수정하고 싶을때 state를 활용하면된다.
state의 값은 setState를 사용해 업데이트해준다.
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
state 값을 직접적으로 변경해주기보단 setState를 사용해 비동기적으로 업데이트해준다. state가 업데이트되면 컴포넌트는 자동적으로 리렌더된다(똑똑한 리액트😌)
여기서 주의할 점!
setState대신 그냥 state를 직접적으로 바꿔주면 왜안될까?
this.state.count = this.state.count + 1이유는 setState를 사용한 업데이트가 아닐 경우 리액트는 변화를 감지하지못하고 리렌더링 되지않는다. 따라서, 값이 변경된다하더라도 화면엔 업데이트가 되지않는 것이다.
this.setState({
count: this.state.count + 1
});두번째 주의할 점은 setState는 비동기 성질을 가지고있다. 따라서 동기처리를 해주지않으면 비동기적으로 실행되기때문에 원하는 결과를 얻지 못할 수 있다.
그래서 요약하자면,
props와 state 모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터이다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능하다. 반면 state는 해당 컴포넌트 내부에서 선언되기때문에 수정이 가능하다는 차이점이 있다. setState를 사용하여 state값을 업데이트 해주면 자동으로 리렌더링되지만 주의할 점은 setState의 비동기적 특성을 기억하고 사용해야한다.
[Reference]
https://lucybain.com/blog/2016/react-state-vs-pros/