React 기본 개념 (1)

React가 새로고침 없이도 변경 사항을 적용할 수 있는 이유 

Virtual DOM을 사용하기 때문입니다. Virtual DOM은 가상의 DOM으로, 실제로 브라우저에 표시되는 DOM이 아니라 메모리에 가상으로 존재하는 DOM입니다. 이는 단순한 JavaScript 객체로 표현됩니다. React는 상태가 업데이트될 때 변경이 필요한 UI를 Virtual DOM을 통해 렌더링하며, 이때 React 내부의 엔진을 사용하여 실제 브라우저에 표시되는 DOM과 비교합니다. 그리고 차이가 있는 부분만을 감지하여 실제 DOM에 패치(patch)를 적용합니다. 이런 방식으로 전체 DOM을 다시 로드하는 것보다 효율적으로 UI를 업데이트할 수 있어서 빠른 성능을 제공합니다.

React와 Node.js의 관계

1. React는 클라이언트 측 라이브러리

React는 웹 애플리케이션의 사용자 인터페이스를 개발하기 위한 JavaScript 라이브러리로, 클라이언트 측에서 실행됩니다. 따라서 웹 브라우저에서 React를 실행하려면 React 및 관련 라이브러리를 클라이언트 측에서 로드해야 합니다.

2. Node.js와 npm 

Node.js는 JavaScript 런타임 환경으로, 서버 측 애플리케이션을 개발하는 데 사용됩니다. npm (Node Package Manager)은 Node.js 패키지(모듈)를 관리하고 설치하는 도구로, React 및 다른 JavaScript 패키지를 관리하는 데 사용됩니다.

3. JSX와 Babel

JSX(JavaScript XML)는 React에서 사용되는 JavaScript의 확장 문법입니다. JSX를 사용하면 JavaScript 코드 내에서 HTML과 유사한 문법으로 UI 컴포넌트를 작성할 수 있습니다. Babel은 JavaScript의 최신 버전(ES6, ES7 등)을 브라우저에서 지원하는 ES5로 변환해주는 컴파일러 도구입니다. Node.js 환경에서 JSX를 사용하려면 Babel을 통해 JSX 코드를 일반 JavaScript로 변환해야 합니다. 이를 통해 React 컴포넌트를 작성할 때 JSX 문법을 사용할 수 있습니다.

4. React와 서버 사이드 렌더링

Node.js를 사용하면 React 컴포넌트를 서버 측에서 실행하여 서버 사이드 렌더링(SSR)을 수행할 수 있습니다. 이를 통해 초기 페이지 로딩 성능을 향상시키고 SEO (검색 엔진 최적화)를 개선할 수 있습니다.

Props와 State

- Props(속성)

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. Props는 읽기 전용이며 자식 컴포넌트에서 수정할 수 없습니다. 이를 통해 데이터의 단방향 흐름을 유지하고 컴포넌트 간 효과적인 데이터 공유를 가능하게 합니다.

- State(상태)

State는 컴포넌트의 내부 상태를 나타내며 컴포넌트 자체에서 관리합니다. State는 컴포넌트의 렌더링 및 동작에 영향을 미치며, 변경 가능합니다. 컴포넌트가 내부적으로 데이터를 추적하고 상호작용할 때 사용됩니다. State는 `this.setState()` 메서드를 사용하여 업데이트됩니다.

이러한 Props와 State는 React 컴포넌트를 동적이고 유연하게 만들며, 데이터 관리와 렌더링을 효율적으로 처리하는 데 도움을 줍니다.