React 알아보기

1. React란?

React는 Facebook에서 개발한 Javascript 라이브러리로, 사용자 인터페이스(UI) 구축을 쉽게 할 수 있도록 도와줍니다.

(주요 특징과 관련된 개념은 아래의 공식 문서를 참고)

React

 

• React의 등장

React의 등장은 웹 애플리케이션 개발에서 성능과 유지보수 문제를 해결하기 위한 필요성에서 비롯되었습니다. 초기 웹 애플리케이션은 UI와 상태 관리가 얽혀 있어 코드가 복잡하고, 성능이 저하되는 문제가 있었다. 이러한 문제를 해결하기 위해 2011년 개발자 조던 워크가 만든 라이브러리로 React가 탄생했습니다.

 

• React 점유율

React는 Stack Overflow에서 관련 질문 비율이 높은 프레임워크로, 이는 개발자들이 React에 대해 많은 관심을 가지고 있으며, 이를 해결하려는 시도가 활발하다는 것을 의미합니다. Stack Overflow에서 올라오는 질문 수는 해당 프레임워크가 개발자들 사이에서 얼마나 널리 사용되고 있고, 그에 따른 문제와 해결책을 찾으려는 수요가 얼마나 높은지를 보여줍니다. 

Top Frontend Web Frameworks

 

2. React의 핵심 기능

1. 컴포넌트 기반 개발

리액트 애플리케이션을 여러 개의 컴포넌트로 구성됩니다. 각 컴포넌트는 UI의 일부를 담당하며, 컴포넌트 간에는 상태(state)와 속성(props)을 통해 데이터가 전달됩니다.

function MyComponent() {
	return <h1>Hello from MyComponent!</h1>;
}

 

 

2. JSX 사용

JSX는 Javascript를 확장한 문법으로,  HTML과 유사한 구문을 사용하여 UI를 작성할 수 있게 도와줍니다.

const element = <h1>Hello, world!</h1>;

 

또한 자주 상태나 데이터가 변하는데, 이 때 동적으로 렌더링되는 요소를 처리할 수 있는 강력한 기능을 제공합니다.

const products = [{ name: 'apple', id: 1 }, { name: 'banana', id: 2 }];
const listItems = products.map(product => <li key={product.id}>{product.name}</li>);
return <ul>{listItems}</ul>;

 

 

3.  virtual DOM

가상 DOM은 UI의 효율성을 높이기 위한 핵심 개념입니다. UI를 변경할 때마다 전체 DOM을 갱신하는 대신,  React는 가상 DOM을 사용하여 변경 사항을 메모리 내에서 미리 계산한다. 이를 통해 실제 DOM의 변경을 최소화하여 성능을 향상시킵니다.

 

3. React 개발에서 유용한 디버깅 도구

React Developer Tools:

• 리액트 앱의 상태를 실시간으로 추적할 수 있게 해주는 브라우저 확장 프로그램으로, 컴포넌트 트리를 탐색하고 각 컴포넌트의 props, state를 분석할 수 있으며, 컴포넌트가 렌더링되는 과정을 관찰할 수 있습니다.
• 이를 통해 상태 변경이 앱에 미치는 영향을 쉽게 추적하고, 버그를 찾거나 성능 이슈를 개선할 수 있습니다.