React는 웹 애플리케이션을 더욱 효율적이고 동적으로 만들어주는 라이브러리입니다. 하나씩 개념을 익히며 작성해보겠습니다! 😊
1. 엘리먼트(Element)란 무엇인가?
엘리먼트(Element)는 React의 UI를 표현하는 가장 작은 단위입니다. 우리가 HTML에서 <div>, <h1>같은 태그를 사용하는 것처럼, React에서도 엘리먼트를 사용해 화면을 구성합니다.
엘리먼트의 특징
- 불변성: 엘리먼트는 한 번 생성되면 변경되지 않습니다.
- 화면을 업데이트하려면 새로운 엘리먼트를 생성해 React DOM에 전달해야합니다.
예제 코드
function App() {
const element = <h1>Hello, world!</h1>;
return <div className="App">{element}</div>;
}
export default App;
위 코드는 "Hello, world!"라는 텍스트를 화면에 표시하는 React 엘리먼트를 생성합니다. React에서는 이러한 엘리먼트를 사용해 화면을 구성하고, 이를 DOM에 렌더링합니다.
2. 컴포넌트(Component)란 무엇인가?
React는 엘리먼트를 조합해 컴포넌트(Component)라는 더 큰 단위를 만듭니다. 컴포넌트는 UI를 재사용 가능한 조각으로 나누는 데 유용합니다.
컴포넌트의 종류
- 함수형 컴포넌트 (요즘 주로 사용)
- 클래스형 컴포넌트
함수형 컴포넌트 예제
function Welcome() {
return (
<div>
<h1>Hello, Shimssung!</h1>
</div>
);
}
export default Welcome;컴포넌트 사용하기
import Welcome from "./Welcome";
function App() {
return (
<div className="App">
<Welcome/>
</div>
);
}
export default App;
- 화면에 Welcome 컴포넌트 내용인 "Hello, Shimssung!"을 표시합니다.
3. SPA(Single Page Application)란?
SPA(Single Page Application)는 이름 그대로 하나의 페이지에서 모든 작업이 이루어지는 애플리케이션입니다. React는 SPA를 구현하기에 매우 적합한 라이브러리입니다.
SPA의 특징
- 빠른 화면 전환: 페이지 이동 시 새로고침 없이 필요한 부분만 업데이트합니다.
- 사용자 경험(UX) 향상: 부드럽고 매끄러운 인터페이스를 제공합니다.
- 클라이언트 사이드 렌더링: 브라우저가 JavaScript를 이용해 화면을 렌더링합니다.
간단한 SPA 예제: 숫자 증가/감소
CountSPA.jsx:숫자와 버튼을 이용해 SPA의 기본 동작을 간단히 구현한 예제입니다. 다른 방식은 나중에 이해하기로하고 숫자가 바뀔때 화면의 새로고침 없이 화면 내용만 업데이트하는것에 중점을 두겠습니다!
import React, { useState } from "react";
function CountSPA() {
// 숫자 상태 설정
const [count, setCount] = useState(0);
// 숫자 증가 함수
const increment = () => {
setCount(count + 1);
};
// 숫자 감소 함수
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>숫자: {count}</h1> {/* 숫자 출력 */}
<button onClick={increment}>+1</button> {/* 증가 버튼 */}
<button onClick={decrement}>-1</button> {/* 감소 버튼 */}
</div>
);
}
export default CountSPA;
useState(0)를 사용하여 숫자(count)의 초기값을 0으로 설정합니다.- 두 개의 버튼이 있으며, 하나는
+1을, 다른 하나는-1을 누를 때 숫자가 각각 증가하거나 감소하도록 설정합니다. - 새로고침 없이 버튼 클릭에 따라 화면 내용만 업데이트되는걸 볼 수 있습니다.
React가 SPA에서 빛나는 이유!!
- React는 Virtual DOM을 사용해 화면 업데이트를 빠르고 효율적으로 처리합니다.(Virtual DOM이란?)
- 컴포넌트 기반으로 구조화된 코드를 작성할 수 있습니다.
4. Props란?
React에서 props는 컴포넌트 간에 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려보낼 때 활용됩니다.
Props의 특징
- 읽기 전용(Read-only): 컴포넌트는 props를 직접 수정할 수 없습니다.
- 단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달됩니다.
Props 예제
부모 컴포넌트
import Welcome from "./Welcome";
function App() {
return (
<div className="App">
<Welcome name="props테스트" />
</div>
);
}
export default App;자식 컴포넌트
function Welcome(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
</div>
);
}
export default Welcome;
App컴포넌트에서Welcome컴포넌트로name="props테스트"라는 데이터를 전달했습니다.props.name을 사용해 "Hello, props테스트!"를 화면에 표시합니다.
정리
React는 엘리먼트와 컴포넌트를 활용해 UI를 만들고, Props를 사용해 컴포넌트 간에 데이터를 주고받으며 SPA를 효율적으로 구현합니다. 이번 글에서는 React의 핵심 개념을 간단히 다뤘지만, 다음 글에서는 State와 이벤트 처리 등 더 심화된 주제를 다룰 예정입니다. 기대해주세요! 😊
