리액트에서의 Props와 State의 차이점
Props의 개념
Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. Props는 컴포넌트 간의 데이터 흐름을 담당하며, 자식 컴포넌트는 이를 변경할 수 없습니다. 주로 컴포넌트의 초기값이나 설정을 전달하는 데 사용됩니다. 예를 들어, 부모가 자식에게 텍스트나 스타일을 전달할 때 Props를 사용합니다. Props는 불변(immutable)으로, 컴포넌트가 렌더링될 때마다 해당 값이 변하지 않습니다.
State의 개념
State는 컴포넌트 내에서 관리되는 데이터로, 컴포넌트의 상태를 나타냅니다. State는 컴포넌트 내에서 변경 가능하며, 변경된 값에 따라 컴포넌트가 다시 렌더링됩니다. State는 주로 사용자 입력, API 호출 결과, 내부 로직 등에 의해 변경됩니다. 상태 변경은 setState 메서드를 통해 이루어지며, 컴포넌트의 동적인 부분을 관리하는 데 중요한 역할을 합니다. 예를 들어, 버튼 클릭 시 카운트를 증가시키는 경우 State를 사용합니다.
Props는 읽기 전용, State는 변경 가능
Props는 부모 컴포넌트로부터 전달된 데이터이기 때문에 자식 컴포넌트에서 값을 수정할 수 없습니다. 반면, State는 컴포넌트 내부에서 관리되며, 그 값은 직접 수정이 가능합니다. State는 변경될 때마다 자동으로 화면을 다시 렌더링하여, UI가 상태에 맞게 업데이트되도록 합니다. 즉, Props는 읽기 전용이고 State는 변경 가능한 데이터를 관리합니다. 상태 관리를 통해 컴포넌트의 동적인 동작을 구현할 수 있습니다.
Props는 부모에서 자식으로 흐른다, State는 컴포넌트 내부에 존재
Props는 항상 부모 컴포넌트에서 자식 컴포넌트로 흐릅니다. 이는 데이터의 방향성을 명확하게 하며, 부모 컴포넌트가 자식 컴포넌트에 필요한 정보를 제공하는 방식입니다. 반면, State는 특정 컴포넌트 내부에서만 존재하며, 외부에서 직접 접근하거나 수정할 수 없습니다. State는 해당 컴포넌트의 내부 상태를 추적하고 관리하는 데 사용됩니다. 따라서 Props는 외부에서 관리되고, State는 컴포넌트 내부에서 관리됩니다.
Props는 상태 변화 없이 렌더링, State는 상태 변화 시 렌더링
Props는 부모 컴포넌트가 변경할 때만 변하고, 자식 컴포넌트는 이를 자동으로 반영합니다. 자식 컴포넌트는 Props가 변경되면 새로 렌더링됩니다. 그러나 State는 컴포넌트 내에서 변화가 발생할 때마다 setState를 호출하여 상태를 업데이트하고, 그로 인해 컴포넌트가 다시 렌더링됩니다. 즉, Props는 부모에서 자식으로 전달된 값이며 상태 변화 없이 UI가 갱신되지만, State는 상태 변화가 일어날 때마다 컴포넌트가 동적으로 업데이트됩니다.