Virtual DOM, props, state

Virtual DOM (가상 돔): Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 메모리 상의 표현입니다. DOM은 웹 페이지의 구조화된 표현으로, HTML, XML, SVG 문서의 객체 기반 표현입니다. Virtual DOM은 실제 DOM을 빠르게 조작하고, 렌더링 성능을 향상시키기 위한 목적으로 사용됩니다.

React에서는 웹 페이지의 변경 사항을 가상 DOM에 먼저 적용한 후, 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이 과정을 'Reconciliation'이라고 하며, 이를 통해 성능을 최적화하고 불필요한 업데이트를 줄입니다.

Props (속성): Props는 React에서 사용되는 입력 매개 변수의 줄임말입니다. React 컴포넌트는 재사용 가능한 코드 블록으로 생각할 수 있습니다. 컴포넌트를 만들 때, 컴포넌트의 동작이나 스타일을 변경할 수 있도록 여러 속성을 전달할 수 있습니다. 이러한 속성들을 'props'라고 부릅니다.

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. 중요한 것은 props는 읽기 전용이라는 점입니다. 즉, 컴포넌트는 자신의 props를 수정할 수 없으며, 부모 컴포넌트에서만 수정할 수 있습니다.

State (상태): State는 컴포넌트의 내부 상태를 나타내는 개념입니다. 사용자 상호작용이나 시간 경과 등에 따라 변경되는 데이터를 저장하고 관리하기 위해 사용됩니다.

React 컴포넌트는 state 객체를 가질 수 있으며, 이를 사용하여 컴포넌트의 상태를 변경할 수 있습니다. state를 변경하면 React는 변경 사항을 감지하고 해당 컴포넌트를 다시 렌더링합니다. 이를 통해 동적인 사용자 인터페이스를 만들 수 있습니다.

State는 컴포넌트가 직접 관리할 수 있는 반면, props는 부모 컴포넌트로부터 전달되는 데이터입니다.둘의 주요 차이점은 state가 컴포넌트 내에서 변경 가능한 반면, props는 읽기 전용이라는 점입니다. 다시 말해, 컴포넌트는 자신의 상태(state)를 변경할 수 있지만, 전달받은 속성(props)는 변경할 수 없습니다.

State: 컴포넌트 내부에서 변경 가능한 데이터를 다루려면 state를 사용해야 합니다. 예를 들어, 텍스트 입력, 체크박스, 라디오 버튼 등의 사용자 인터페이스 요소의 상태를 저장하거나, 동적으로 변경되는 데이터를 저장하기 위해 state를 사용할 수 있습니다. React에서 state를 사용하려면, 클래스 컴포넌트에서는 this.state를 초기화하고, 함수형 컴포넌트에서는 useState 훅을 사용해야 합니다. 상태를 변경할 때는 클래스 컴포넌트에서 this.setState 메서드를, 함수형 컴포넌트에서는 useState 훅에서 반환된 상태 업데이트 함수를 사용해야 합니다.

Props: 부모 컴포넌트로부터 전달받은 데이터를 사용하려면 props를 사용해야 합니다. 예를 들어, 리스트 컴포넌트에서 각 항목을 렌더링하는 자식 컴포넌트에 데이터를 전달하는 경우에는 props를 사용합니다. props는 컴포넌트에 함수 인자처럼 전달되며, 컴포넌트 내부에서 수정할 수 없습니다. 수정하려면 부모 컴포넌트에서 상태를 변경하고, 변경된 상태를 자식 컴포넌트에 다시 전달해야 합니다.

결론적으로, state와 props의 주요 차이점은 state가 컴포넌트 내에서 변경 가능한 데이터를 다루는 데 사용되는 반면, props는 부모 컴포넌트로부터 전달받은 읽기 전용 데이터를 다루는 데 사용된다는 것입니다.