리액트(React)는 동적인 사용자 인터페이스를 구축하는 데 많이 사용되는 라이브러리입니다. 이 강좌에서는 일기장 앱을 만들면서 리액트의 기본 개념을 살펴보겠습니다. 이 과정에서 Home 페이지도 구현하게 될 것입니다. Home 페이지는 사용자가 일기장에 접근하고 새로운 일기를 작성할 수 있는 주요 화면이 될 것입니다. 이 글에서는 리액트의 컴포넌트 구조, 상태 관리, 그리고 라우팅을 포함한 여러 가지 기술을 배우게 될 것입니다.
1. 리액트 기본 개념
리액트는 사용자 정의 컴포넌트 기반의 라이브러리입니다. 컴포넌트는 UI의 독립적인 조각으로, 각각의 컴포넌트는 상태(state)와 속성(props)을 가질 수 있습니다. 이 강좌에서는 리액트의 주요 개념인 JSX, 컴포넌트, props, state, 그리고 생명주기를 다룰 것입니다.
1.1 JSX
JSX는 자바스크립트 XML의 줄임말로, 자바스크립트 코드 안에 HTML과 같은 구문을 포함할 수 있게 해줍니다. JSX를 사용하면 UI 구성 요소를 직관적으로 작성할 수 있습니다. JSX는 컴파일 시 자바스크립트 객체로 변환됩니다.
const element = <h1>안녕하세요, 리액트!</h1>;1.2 컴포넌트
리액트의 기본 빌딩 블록은 컴포넌트입니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 우리는 함수형 컴포넌트를 주로 사용할 것입니다.
function Greeting(props) {
return <h1>안녕하세요, {props.name}!</h1>;
}1.3 Props와 State
Props는 컴포넌트에 전달하는 읽기 전용 데이터입니다. 반면, State는 컴포넌트 내에서 관리하는 데이터로, 변화가 가능하며 UI의 변화에 직접적으로 영향을 미칩니다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <h1>현재 카운트: {this.state.count}</h1>;
}
}1.4 생명주기
리액트 컴포넌트는 생명주기가 있으며, 이 생명주기 메서드를 통해 컴포넌트의 생성, 업데이트 및 제거 시점을 제어할 수 있습니다. 주요 생명주기 메서드로는 componentDidMount, componentDidUpdate, componentWillUnmount가 있습니다.
2. 일기장 앱 설계
이제 본격적으로 일기장 앱을 설계하겠습니다. 일기장 앱은 사용자가 일기를 작성하고, 수정하고, 삭제할 수 있는 기능을 갖춰야 합니다. 또한, 사용자는 작성한 일기를 리스트 형태로 조회할 수 있어야 합니다.
2.1 앱 구조
일기장 앱은 다음과 같은 구성 요소로 나눌 수 있습니다:
- Home: 일기 리스트와 새 일기 추가 버튼을 포함하는 화면
- DiaryEntry: 각 일기 항목을 표시하는 컴포넌트
- AddEntry: 새 일기를 작성할 수 있는 폼을 포함하는 컴포넌트
3. Home 페이지 구현
이제 Home 페이지를 구현해보겠습니다. Home 페이지는 일기 리스트와 새 일기를 추가하는 버튼을 포함할 것입니다. 이를 위해 컴포넌트를 두 개 생성하겠습니다: Home 컴포넌트와 DiaryEntry 컴포넌트입니다.
3.1 Home 컴포넌트
import React, { useState } from 'react';
import DiaryEntry from './DiaryEntry';
import AddEntry from './AddEntry';
function Home() {
const [entries, setEntries] = useState([]);
const addEntry = (entry) => {
setEntries([...entries, entry]);
};
return (
<div>
<h1>나의 일기장</h1>
<AddEntry onAdd={addEntry} />
<ul>
{entries.map((entry, index) => (
<DiaryEntry key={index} entry={entry} />
))}
</ul>
</div>
);
}
export default Home;3.2 DiaryEntry 컴포넌트
import React from 'react';
function DiaryEntry({ entry }) {
return (
<li>
<h2>{entry.title}</h2>
<p>{entry.content}</p>
</li>
);
}
export default DiaryEntry;3.3 AddEntry 컴포넌트
import React, { useState } from 'react';
function AddEntry({ onAdd }) {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onAdd({ title, content });
setTitle('');
setContent('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="제목"
/>
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="일기 내용"
/>
<button type="submit">일기 추가</button>
</form>
);
}
export default AddEntry;4. 전체 앱 코드
이제 모든 컴포넌트를 모아서 전체 앱을 구성해보겠습니다. src 디렉토리 아래에 index.js 파일을 작성하겠습니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './Home';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);5. 결론
이번 리액트 강좌에서는 일기장 앱을 통해 리액트의 기본 개념과 컴포넌트 기반 설계를 배웠습니다. Home 페이지를 구현하면서 State 관리와 Props 전달 방식도 이해할 수 있었습니다. 리액트를 통해 사용자 친화적인 UI를 손쉽게 구현할 수 있다는 것을 잊지 마세요!
앞으로 더 많은 기능을 추가하며 리액트의 심화 개념을 탐구해보세요. 다른 페이지로의 라우팅, 데이터 저장 및 불러오기와 같은 기능을 추가하면 더욱 완전한 앱이 될 것입니다. 감사합니다!