Props vs State

둘다 React에서 값을 관리하는 방법

 

Props

• 부모가 관리하고 읽기 전용
• 내가 직접 변경하지 않고 부모 컴포넌트에서 준 값을 그대로 반영해야할 때

State

• 내가 관리하고 변경 가능(useState)
• 내가 직접 변경하는 경우

 

예시를 들어보자

`컴포넌트 A`는 페이지 컴포넌트이고  `컴포넌트 B` 는 버튼 컴포넌트일 때

 

 

예시 1) 버튼을 누르면 화면에 로딩 중이 발생함

→ 화면의 변경이 일어나는 것이므로 컴포넌트 A에 State

 

예시 2) 버튼을 누르면 버튼이 비활성화됨

→ 버튼의 변경이 일어나는 것이므로 컴포넌트 B에 State

 

예시 3) 버튼을 누르면 화면에 로딩이 생기면서 비활성화됨

→ 둘다 변경이 일어나는 것이므로 컴포넌트 A에 State

→ 이런 현상을 `Lifting State Up`이라고 한다. 둘다 변경이 일어나면 부모 컴포넌트로 올리는 것을 의미한다.

 

Props와 State 중에 뭘 써야하지?

정리하자면 현재 컴포넌트에서 변경이 일어난다면 현재 컴포넌트에서 State로 관리하기

만약에 변경은 부모 컴포넌트에서 일어난다면 부모 컴포넌트에서 State로 관리하고 Props로 전달받기

 

References

- https://react.dev/learn/sharing-state-between-components