Virtual DOM, props, state

✅Virtual DOM은 React에서 사용되는 가상의 DOM 구조입니다.
가상의 DOM으로 실제 DOM과 동기화하여 성능을 향상시키는 역할을 합니다. 이는 UI를 업데이트할 때 전체 DOM을 새로 그리는 것이 아니라, 변경된 부분만을 찾아 실제 DOM에 적용하여 효율적으로 업데이트할 수 있게 해줍니다.

1️⃣ 가상의 복제품: 실제 DOM의 가벼운 복제품으로 React가 UI 상태 변경을 추적하는 데 사용합니다.
2️⃣ 효율적 업데이트: React는 가상 DOM을 사용하여 UI 변경 사항을 감지하고, 이전과 새로운 가상 DOM 사이의 차이를 계산합니다. 그 후 변경된 부분만을 실제 DOM에 반영하여 최소한의 업데이트만 수행함으로써 성능을 향상시킵니다.
3️⃣ 재조정 및 최적화: 변경 사항을 일괄적으로 처리하여 여러 업데이트를 일괄로 처리하고, 최적화를 위해 필요한 경우에만 실제 DOM에 적용합니다. 이로써 불필요한 리렌더링을 방지하고 효율적인 UI 업데이트를 가능케 합니다.

 

✅ Props는 React 컴포넌트에 전달되는 속성값들을 말합니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 읽기 전용(immutable)으로 컴포넌트 내부에서 변경할 수 없습니다.

1️⃣ 속성 전달: Props는 React 컴포넌트에 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 props를 활용합니다.
2️⃣ 읽기 전용: Props는 컴포넌트 내에서 읽기만 가능한 속성으로, 컴포넌트 내부에서 props를 직접 변경할 수 없습니다. 이는 데이터의 안정성을 유지하고 예측 가능한 행동을 유지하는 데 도움을 줍니다.
3️⃣ 재사용성과 유연성: Props를 활용하여 컴포넌트를 더 유연하게 만들 수 있습니다. 다양한 상황에서 동일한 컴포넌트를 재사용하고, 다른 props를 전달함으로써 다양한 동작을 수행할 수 있습니다.

✅State는 React 컴포넌트의 내부 상태를 나타냅니다. 

컴포넌트 내부에서 변경 가능하며, setState를 통해 업데이트되면 컴포넌트가 리렌더링됩니다. 주로 컴포넌트가 관리하는 동적인 데이터를 담고 있습니다.

1️⃣컴포넌트 내부 상태: State는 React 컴포넌트의 내부 상태를 나타냅니다. 컴포넌트가 관리하는 데이터를 저장하고, 변경될 때마다 컴포넌트가 리렌더링되도록 합니다.

2️⃣동적 데이터 관리: 주로 사용자 상호작용이나 API 호출 등으로 변경되는 데이터를 저장합니다. 예를 들어, 입력 필드의 텍스트, 클릭된 버튼, 또는 로딩 중인 상태 등을 저장할 수 있습니다.

3️⃣setState로 업데이트: State를 변경하려면 setState 메서드를 사용합니다. 직접적으로 state를 수정하는 것이 아니라 setState를 사용하여 새로운 state 값을 제공함으로써 React가 변경 사항을 감지하고 업데이트를 관리할 수 있게 합니다.