TIL Props와 State

React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.

props

먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것이다.

컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다.

리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 .

• 블변의 데이터(읽기전용)
• 부모로부터 전달된다
• 초깃값과 자료형의 유효성 검사가 가능

state

컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 .

컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다.

• 상태에 따라 변화하는것
• 직접 변경 가능
• state 가 변경되면 컴포넌트를 다시 렌더링 해야함
• 외부에는 비공개 , 컴포넌트 스스로가 관리 해야하는것

 

Props와 State 차이점

State는 내부(컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있다

Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없다.

 

state변경 시, 왜 setState, useState를 사용하나요?

우선 변수 말고 state 를 사용하는 이유는 ?

• state는 일반 변수와 다르게 값이 변하면 렌더링이 일어난다.
• 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다.
• 조금더 자세하게 설명하자면 state는 props와 같이 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체이고, 컴포넌트 안에서 관리된다.

 

setState말고 state를 직접 변경해주면 왜 화면 업데이트가 안될까?

리액트의 컴포넌트는 Mount 상태에서 한번 render() 를 실행하고,

후에는 Update 상태에 진입하여 shouldComponentUpdate === true 일때만 render() 를 실행한다.

 

그래서 변경한 state가 화면에 보이게 되려면 Update상태에 들어가야 하는데 그러려면 이러한 조건이 필요하다

• state 또는 Props가 변경
• 부모 컴포넌트가 렌더링
• forceUpdate 사용

 

state가 변경되면 update가 돼야 하는거 아닌가? 라고 생각할 수 있으나,

리액트가 이 값이 변경 됐다는 것을 판단하는 기준이 객체의 메모리 주소이기 때문에, 객체의 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식을 안하기 때문이다.

 

 

결론

State을 업데이트 하기위해서는 setState, useState가 필요합니다.
직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고 setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하기 때문입니다.

 

참고 자료

https://rinrin-dev.tistory.com/93
https://velog.io/@devmag/React-state-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EC%99%9C-useState-setState%EB%A5%BC-%EC%93%B0%EB%8A%94%EA%B0%80