React 완벽 가이드 1편: React란 무엇인가?

React는 현대적인 웹 개발에서 필수적인 라이브러리입니다.
이번 시리즈에서는 React의 기초부터 고급 개념까지 단계별로 정리할 예정입니다.
이번 첫 번째 글에서는 React가 무엇인지, 왜 사용하는지, 그리고 기본 개념을 설명해 드리겠습니다.

✅ React란 무엇인가?

React는 Facebook(현재 Meta)에서 개발한 UI 라이브러리입니다.
쉽게 말해 웹 페이지에서 화면을 효율적으로 업데이트하는 역할을 합니다.

 

📌 React의 특징

✔ 컴포넌트 기반 → UI를 작은 단위로 나누어 관리할 수 있습니다.
✔ 가상 DOM(Virtual DOM) → 빠른 렌더링을 지원합니다.
✔ 선언형 코드 → 코드가 직관적이고 유지보수가 용이합니다.
✔ 재사용성 → 한 번 만든 컴포넌트를 여러 곳에서 재사용할 수 있습니다.

✅ 왜 React를 사용할까요?

🔥 기존 방식과의 차이
과거에는 HTML + JavaScript + jQuery를 사용하여 화면을 조작했습니다.
하지만 요소가 많아질수록 코드가 복잡해지고 유지보수가 어려워졌습니다.
React는 이러한 문제를 해결하기 위해 등장했으며,
특히, 빠른 업데이트와 효율적인 UI 관리가 가능합니다.

✅ React의 기본 개념

반응형

React를 이해하려면 몇 가지 핵심 개념을 알아야 합니다.

1) 컴포넌트(Component)

React의 가장 큰 특징은 컴포넌트 기반이라는 점입니다.
컴포넌트는 화면을 구성하는 독립적인 블록으로, 여러 개의 컴포넌트를 조합하여 하나의 웹 페이지를 만들 수 있습니다.

function Hello() {
  return <h1>안녕하세요, React입니다!</h1>;
}

위 코드는 Hello라는 컴포넌트를 정의한 것입니다.

2) JSX (JavaScript XML)

React에서는 JSX라는 문법을 사용합니다.
JSX는 JavaScript 코드 안에서 HTML을 작성하는 방식으로, 보다 직관적인 코드를 작성할 수 있도록 도와줍니다.

const element = <h1>안녕하세요!</h1>;

이처럼 HTML 태그를 JavaScript 코드처럼 사용할 수 있습니다.

3) 상태(State)와 속성(Props)

React에서 화면을 동적으로 변경하려면 State(상태)와 Props(속성) 개념을 이해해야 합니다.

✔ State: 컴포넌트 내부에서 관리하는 값 (예: 버튼 클릭 시 숫자가 증가)
✔ Props: 부모 컴포넌트가 자식 컴포넌트에 전달하는 값

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

위 코드에서 props.name을 통해 부모가 전달한 값을 출력할 수 있습니다.

✅ React 시작하는 방법

React를 사용하려면 먼저 개발 환경을 설정해야 합니다.

1) Node.js 설치

React는 Node.js가 필요합니다. 해당 사이트에서 다운로드하여 설치하세요.

2) React 프로젝트 생성

터미널에서 다음 명령어를 실행하면 새로운 React 프로젝트를 만들 수 있습니다.

npx create-react-app my-app
cd my-app
npm start

이제 npm start 명령어를 실행하면 브라우저에서 기본 React 화면을 확인할 수 있습니다.

✅ 마무리

이번 글에서는 React가 무엇인지, 그리고 기본 개념을 간단히 살펴보았습니다.

다음 글에서는 React의 핵심 개념인 컴포넌트와 State, Props를 더 깊이 이해하는 방법을 설명해 드리겠습니다. 앞으로 차근차근 React의 기초부터 고급 개념까지 익혀보세요!