[React] 리액트 : #5 props와 state의 차이점 ?

모두의 예상처럼 props 는 properties의 약자였고 state는 말그대로 상태이다,,,! ✳︎

오늘은 props와 state의 차이점에 대해 알아보자!

---

 

props, state ?

 

리액트 공식문서에 따르면 

props와 state는 모두 렌더되는 결과물에 영향을 주는 정보를 담고 있는 

자바스크립트의 객체(objects)라고 설명한다.

 

props(short for “properties”) and state are both plain JavaScript objects.
While both hold information that influences the output of render,

 

 

props와 state 모두 컴포넌트에서 다루는 데이터이고,

비슷한 역할을 해서 무엇이 다른 건가 궁금했는데

 

둘은 작동 방식에서의 차이를 가지고 있다고 한다.

 

props는

함수의 매개변수(parameters)처럼 컴포넌트에 전달되는 반면,

 

state는

함수의 변수처럼 관리된다고 설명한다.

 

they are different in one important way:
props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

 

props와 state 차이점 ?

 

props는 immutable data,

state는 mutable data !

 

 

prop는 읽기 전용 데이터이다.

컴포넌트로 전달받은 상속된 데이터를 일방적으로 데이터를 읽어줄 수 만 있는 것이다.

받아온 데이터를 컴포넌트 내부에서 수정을 할 수 없다!

 

state는 컴포넌트의 내부에 존재하며 상태를 나타낸다.

props와는 다르게 수정할 수 있는 데이터이다.

 

하지만,

직접 값을 바로 바꾸면 수정이 반영되어 동작하지 않는다.

 

//예를 들어 아래와 같은 state가 존재하고
//나이를 수정하는 함수가 실행되어 값을 수정할 때
state = {
    name: "Kim",
    age: 7
};

//이렇게 직접 this.state.age에 접근하여 값을 바꿀 수 없다는 말이다!
grow = () => {
	this.state.age + 1;
}

 

실제로 직접 값을 바꾸려고 한다면

"Do not mutate state directly"라는 경고를 콘솔창에서 확인할 수 있게 된다.

 

우리가 직접 수정을 시도하면

리액트 내부에서는 state의 값을 수정하고,

render()를 재실행하며 VDOM을 통해 부분적으로 업데이트하는 과정을 실행하지 않는다.

그래서 결국 우리의 화면도 바뀌는 것이 보이지 않는 것이다!

 

 

그렇다면 값을 바꾸고 싶다면 어떻게 해야할까?

 

//클래스 컴포넌트의 경우 setState()를 통해 수정할 수 있다.
//State는 기본적으로 오브젝트 => setState 메서드도 객체를 받는다.
grow = () => {
	this.setState({ age: this.state.age + 1});
}

//혹은 아래와 같이 작성할 수 있다.
grow = () => {
	this.setState(current => ({ age : current.age + 1}));
}

 

state를 업데이트하고 싶다면,

클래스 컴포넌트 => setState()로

함수형 컴포넌트 => useState()로 업데이트할 수 있다.

 

 

그렇기 때문에

props는 고정적인 / 변하지 않는 데이터를 처리할 때 사용하고,

state는 이후에 변경될 수 있는 데이터를 처리할 때 사용하는 것이 효율적이다!

 

---

컴포넌트 State – React

 

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***