상태 관리 (1). state와 props

오늘 가져온 주제는 상태 관리로, 앞으로 상태 관리 시리즈로 React의 state, context api, Redux와 같은 상태, 전역 상태에 관련된 글을 올릴 계획입니다.

 

state(상태)란 무엇인가?

React 하면 가장 먼저 떠오르는 것이 “상태 관리”라고 생각합니다.

그만큼 React를 다루면 많이 사용하고, 사용할수록 더 고민이 많아지는 개념입니다.

state는 컴포넌트 내에서 관리하는 데이터(일반 자바스크립트 객체)입니다.

state의 가장 큰 특징은 다음과 같습니다.

1. 값이 변할 때마다 관련된 컴포넌트들이 다시 렌더링된다.
2. 값을 임의로 변경할 수 없다. (오직, setState를 통해서만 변경이 가능하다.)
3. 부모에서 자식으로, 자식에서 부모로 전달될 수 있고, 이 과정에서 Props Drilling이 생길 수 있음을 주의해야 한다.

 

상태를 언제 사용해야 할까?

상태는 다음과 같은 경우에 사용하면 좋습니다.

1. 사용자 입력 관리 : 폼 입력이나 체크박스와 같은 사용자 상호작용을 통해 변경되는 데이터를 관리할 때
2. UI 상태 관리: 모달 창의 열림/닫힘 상태나 탭의 선택 상태 등 UI의 시각적 상태를 관리할 때.
3. 비동기 데이터 관리 : API 호출로 가져온 데이터나 서버 응답을 관리할 때, 로딩 상태와 에러 상태를 함께 처리할 수 있습니다.
4. 조건부 렌더링: 특정 조건에 따라 컴포넌트의 렌더링을 제어할 때, 예를 들어 버튼 클릭 시 특정 컴포넌트를 보여줄 때.
5. 전역 상태 관리: 여러 컴포넌트에서 공유해야 하는 데이터(예: 사용자 인증 정보, 장바구니 정보 등)를 관리할 때, Context API나 상태 관리 라이브러리를 활용할 수 있습니다.

이러한 상황에서 상태를 적절히 사용하면 React 애플리케이션의 효율성과 사용자 경험을 향상할 수 있습니다.

 

Props란 무엇인가?

컴포넌트 간의 값을 전달하는 것을 props(Properties)라고 합니다.

즉, A 컴포넌트에서 B 컴포넌트로 값을 전달할 때, props를 통해서 전달하곤 합니다.

// A 컴포넌트
const ComponentA = () => {
	const name = "Justin";
	
	return(
		<ComponentB name={name} />
	)
}

// B 컴포넌트
const ComponentB = ({ name }) => {
	return (
		<h1>{name}님 반갑습니다</h1>
	)
}

이와 같이, 다른 컴포넌트로 값을 전달할 때, props를 통하여 전달할 수 있습니다.

props를 통하여 전달할 수 있는 값은 기본 데이터 타입, 객체, 배열, 함수, JSX 요소 등이 있습니다.

 

state와 props의 차이는 무엇인가?

그렇다면 state와 props의 차이는 무엇일까요?

 

props는 컴포넌트에 전달되는 읽기 전용 데이터로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 즉, 컴포넌트 내부에서 변경할 수 없고, 오직 부모 컴포넌트에서만 변경할 수 있습니다.

 

반면 state는 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트가 직접 제어하고 업데이트할 수 있습니다.

따라서 state는 컴포넌트의 동적인 데이터를 다루는 데 사용됩니다.

 

이런 차이를 표로 정리하면 다음과 같습니다.

 

	props	state
부모 구성 요소에서 초기 값을 가져올 수 있습니까?	예	예
부모 구성 요소에 의해 변경될 수 있나요?	예	아니오
Component 내부에 기본값을 설정할 수 있나요?*	예	예
Component 내부에서 변경할 수 있나요?	아니요	예
자식 구성 요소에 대한 초기 값을 설정할 수 있나요?	예	예
자식 구성 요소를 변경할 수 있나요?	예	아니오

• 부모로부터 받은 props와 state의 초기 값은 Component 내부에 정의된 기본 값을 재정의합니다.

출처: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

 

정리하자면 다음과 같이 이해할 수 있습니다.

 

• props: "외부에서 받는 데이터" (읽기 전용)
• state: "내부에서 관리하는 데이터" (읽기/쓰기 가능)

하지만 state를 여러 컴포넌트에서 가져가서 쓴다면 하위 컴포넌트로 계속 전달해야하는 불편함이 있을 수 있죠? 이것을 props drilling이라고 합니다.

 

예를 들어 로그인 정보의 경우, 대부분의 컴포넌트에서 사용될 수 있습니다. 이 경우, root 컴포넌트에서 leaf 컴포넌트까지 props로 전달한다면 반복적인 코드가 등장하고 비효율적일 수 있겠죠? 심지어 관리가 힘들 것입니다.

 

이를 해결하기 위해 전역 상태을 사용할 수 있는데요. 가장 간단하게 사용할 수 있는 것이 context api를 활용하는 것입니다. context api에 대해서는 다음 시리즈를 통해 소개시켜 드리겠습니다.

 

출처 및 레퍼런스

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React