들어가며
주니어 개발자인 나에게 "어떻게 하면 리액트에 대해 더 깊게 이해할 수 있을까?"를 고민하던 중 "하나부터 열까지 다 적어보면 되지 않을까?"라는 생각에 시작하게 되었다.
React란 무엇인가?
React는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다. 2013년 페이스북에서 처음 개발되었으며, 현재는 많은 기업에서 사용하고 있다. React의 주요 매력은 효율적인 UI 렌더링과 컴포넌트 기반 개발을 가능하게 하는 것이다.
컴포넌트 기반 개발을 하지 않는다면 React의 진가를 못 볼 수도..
React의 주요 개념
1. 컴포넌트 기반 구조
React는 UI를 컴포넌트라는 독립적이며 재사용 가능한 작은 단위로 쪼개서 개발하는 방식이다.컴포넌트는 각각의 상태 & 로직을 가지고 있어, 대규모 어플리케이션을 더 효율적이고 직관적으로 관리할 수 있다. 컴포넌트는 함수형 혹은 클래스형으로 정의할 수 있다.
function Component() {
return <h1>Hello, Velog!</h1>;
}[함수형 컴포넌트] : function으로 정의하고, 간단한 UI 요소를 만들 때 자주 사용된다.
[클래스형 컴포넌트] : ES6의 클래스 문법을 사용해 정의하며, React 16.8 이후 훅(Hook) 도입으로 함수형 컴포넌트가 더 자주 사용된다.
2. JSX (JavaScript XML)
JSX는 자바스크립트 코드 내에 HTML과 비슷한 구문을 사용할 수 있게 해주는 문법이다. React 컴포넌트에서 UI를 정의할 때 사용하고, 실제로는 브라우저가 이해할 수 있는 자바스크립트로 변환된다.
const element = <h1>Hello, Velog!</h1>;JSX는 HTML과 매우 비슷하지만 자바스크립트를 지원하므로, 동적인 데이터를 쉽게 처리할 수 있다.
3. Virtual DOM (가상 DOM)
React는 Virtual DOM이라는 개념을 통해 성능을 최적화한다. 브러우저의 실제 DOM에 직접 접근하여 변경하는 것은 비용이 많이 들어서.. React는 가상 DOM을 메모리에 두고, 그곳에서 UI 업데이트를 처리한다. 이후 변화된 부분만 실제 DOM에 반영하여 성능을 향상시킨다.
Virtual DOM은 React의 핵심 성능 최적화 전략이다.
실제 DOM 조작을 최소화하여, 화면을 빠르게 갱신할 수 있다.
4. 리액티브(반응형) 프로그래밍
React는 리액티브 프로그래밍 방식으로 작동한다. 이는 상태가 변화하면 그에 따라 UI가 자동으로 다시 렌더링되는 구조다. 사용자가 상호작용하거나 데이터가 업데이트되면, 해당 부분만 다시 그려주어 효율적인 UI 업데이트가 가능하다.
React의 주요 개념들
1. 컴포넌트의 상태 (State)
컴포넌트는 상태를 가질 수 있고, 이 상태는 컴포넌트의 동작과 렌더링 결과를 결정한다. 상태는 동적인 데이터이며, 상태가 변경되면 컴포넌트가 다시 렌더링된다.
import React, { useState } from 'react';
function Counter () {
const [count, setCount] = useState(0);
return (
<div>
<p> 현재 카운트 : {count} </p>
<button onClick={() => setCount(count+1)}> 증가 </div>
);
}
useState는 상태를 관리하기 위해 사용되는 훅(Hook)이다.
상태가 업데이트되면, React는 해당 컴포넌트를 다시 렌더링하여 새로운 값을 화면에 보여준다.
2. Props (속성)
Props는 컴포넌트 간에 데이터를 전달하는 방법이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, Props는 읽기 전용으로, 자식 컴포넌트에서는 수정할 수 없다.
function Welcome(props) {
return <h1> Hello, {props.name}! </h1>;
}
function App() {
return <Welcome name="Velog" />;
}위 예제는
App컴포넌트가Welcome컴포넌트에name이라는 Props를 전달하고,Welcome은 이를 이용해 "Hello, Velog!"를 렌더링한다.
3. 렌더링
React 컴포넌트에서는 렌더링이라는 과정을 통해 UI를 그린다. render() 함수 또는 함수형 컴포넌트에서 JSX를 반환하며, React는 이 JSX를 실제 DOM으로 변환해 브라우저에 표시한다.
function Greeting() {
return <h1>Hello, world!</h1>;
}4. useEffect (부수 효과 처리)
useEffect는 컴포넌트가 렌더링될 때 또는 특정 상태가 변경될 때 부수 효과(side Effects)를 처리할 수 있게 도와주는 훅이다. 예를 들어 API 호출, 구독(Subscription), DOM 업데이트와 같은 작업을 수행할 때 사용된다.
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(timer); // 컴포넌트가 사라질 때 정리 작업
}, []);
return <p> {count}초가 지났습니다. </p>;
}
위 코드는 타이머를 구현한 예시다. useEffect는 컴포넌트가 처음 렌더링될 때 타이머를 시작하고, 컴포넌트가 사라질 때 타이머를 정리(clean-up)한다.
React의 성능 최적화
1. 메모이제이션
React는 컴포넌트가 자주 렌더링될 때 성능을 최적화하기 위해 메모이제이션을 지원한다. useMemo 와 useCallBack 훅을 사용해 함수나 계산된 값을 메모이제이션할 수 있다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
2. Lazy Loading
React는 React.lazy() 와 Suspense를 이용해 지연 로딩을 지원한다. 이는 필요한 시점에만 컴포넌트를 로딩하여 초기 로딩 시간을 줄일 수 있게 한다.
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}3. Code Splitting (코드 분할)
Webpack과 같은 도구를 결합해 코드를 분할하여 페이지 로딩 시간을 단축할 수 있다. React는 React.lazy()를 통해 필요한 컴포넌트만 로드하여 성능을 최적화한다.
React의 확장성
React는 다양한 도구 및 라이브러리와 잘 어우러져 큰 프로젝트에도 확장 가능하다.
1. React Router
페이지 간 라우팅을 관리한다.
2. Redux
전역 상태 관리를 도와주는 라이브러리로, 복잡한 상태 관리를 체계적으로 처리할 수 있다.
3. Styled Components
컴포넌트 스타일링을 위한 CSS-in-JS 라이브러리다.
4. Next.js
서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크로, 성능과 SEO 최적화를 위해 자주 사용됩니다.
따라서
React는 컴포넌트 기반 개발 방식과 Virtual DOM을 통한 성능 최적화로 대규모 애플리케이션 개발에 적합한 라이브러리다. 사용자가 상호작용하거나 상태가 변화할 때 UI를 자동으로 다시 렌더링하여, 동적이고 반응형인 웹 애플리케이션을 쉽게 구축할 수 있다.
