리액트 강좌: 일기장 앱의 버튼 및 헤더 컴포넌트 구현하기

본 강좌에서는 리액트를 사용하여 일기장 애플리케이션의 공통 컴포넌트인
Button과 Header를 구현하는 방법을 단계별로 설명합니다.
일기장 앱은 사용자로 하여금 자신의 일기를 작성하고 저장할 수 있도록 해주는 웹 애플리케이션으로,
기본적인 UI 컴포넌트를 친숙하게 만들기 위해 리액트를 사용하는 것이 좋습니다.

리액트란?

리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.
웹 애플리케이션의 UI를 구축할 때 컴포넌트 기반의 구조를 통해 재사용성과 효율성을 극대화할 수 있습니다.
리액트는 상태(state)와 속성(props)을 사용하여 동적인 UI를 쉽게 관리하고 업데이트할 수 있도록 해줍니다.

공통 컴포넌트란?

공통 컴포넌트는 여러 곳에서 재사용될 수 있는 UI 요소를 의미합니다.
일기장 애플리케이션에서는 Button과 Header 같은 요소들이 자주 사용될 것이므로,
이를 컴포넌트로 분리하여 코드의 중복을 줄이고 유지보수를 용이하게 만들 수 있습니다.

프로젝트 설정

프로젝트를 시작하기 전에 먼저 리액트 환경을 설정해야 합니다.
새로운 리액트 애플리케이션을 시작하기 위해 다음의 명령어를 입력하여 리액트 앱을 생성합니다:

npx create-react-app diary-app

이후 생성된 디렉토리로 이동하여 프로젝트를 실행합니다:

cd diary-app
npm start

공통 컴포넌트 구현하기

1. Button 컴포넌트

Button 컴포넌트는 클릭 가능한 버튼을 생성하는 역할을 합니다.
이 컴포넌트를 통해 다양한 버튼 스타일과 기능을 쉽게 추가할 수 있습니다.
아래 코드를 통해 Button 컴포넌트를 생성해 보겠습니다.


import React from 'react';
import './Button.css'; // 스타일을 위한 CSS 파일

const Button = ({ onClick, children, className }) => {
    return (
        
    );
};

export default Button;

위 코드에서 Button 컴포넌트는 세 가지 속성을 받습니다:

onClick: 버튼 클릭 시 호출될 함수
children: 버튼 안에 들어갈 내용
className: 추가적인 CSS 클래스를 적용할 수 있도록 하는 속성

이제 스타일을 정의하기 위해 Button.css 파일을 생성하겠습니다.
버튼의 기본 스타일을 아래와 같이 설정해 보겠습니다.


.button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #0056b3;
}

2. Header 컴포넌트

Header 컴포넌트는 애플리케이션의 상단에 표시되는 제목 및 기타 요소들을 포함합니다.
다음 코드를 통해 Header 컴포넌트를 구현해 보겠습니다.


import React from 'react';
import './Header.css';

const Header = () => {
    return (
        
            나의 일기장
        
    );
};

export default Header;

위 코드는 일기장의 제목을 포함한 간단한 Header 컴포넌트를 생성합니다.
Header.css 파일을 생성하여 스타일을 다음과 같이 지정합니다.


.header {
    padding: 20px;
    background-color: #f8f9fa;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.header h1 {
    margin: 0;
    color: #333;
}

App 컴포넌트에 통합하기

이제 구현한 Button과 Header 컴포넌트를 App.js에서 사용해 보겠습니다.
아래와 같이 App.js를 수정하여 두 개의 컴포넌트를 통합합니다.


import React from 'react';
import Header from './Header';
import Button from './Button';

const App = () => {
    const handleButtonClick = () => {
        alert('버튼이 클릭되었습니다!');
    };

    return (
        
            
            
                일기 작성하기
                
            
        
    );
};

export default App;

결론

이번 강좌에서는 리액트를 사용하여 일기장 애플리케이션의 공통 컴포넌트인
Button과 Header를 구현하는 방법에 대해 살펴보았습니다.
이러한 공통 컴포넌트를 생성함으로써 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다.
리액트의 컴포넌트 기초에 대한 이해가 깊어졌다면, 앞으로 더 복잡한 애플리케이션을 개발하는 데 큰 도움이 될 것입니다.

추가 학습 자료

React 공식 문서에서는 컴포넌트에 대한 더 많은 정보와 예제를 제공합니다.
리액트를 더욱 깊이 이해하고 싶다면 아래 링크를 참고하세요.