React 화면 레이아웃 구성하기

React로 레이아웃을 구성하는 방법은 여러 가지가 있지만, 대표적인 방법으로는 다음과 같은 방법이 있습니다.

 

1. 컴포넌트 구성하기 React에서는 UI를 작은 단위의 컴포넌트로 분리하여 작성합니다. 따라서 레이아웃을 구성하기 위해서는 레이아웃을 구성하는 작은 단위의 컴포넌트를 작성해야 합니다. 예를 들어, 페이지 헤더, 페이지 바디, 페이지 푸터 등을 각각 별도의 컴포넌트로 작성할 수 있습니다.

 

function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <p>Copyright © My Website</p>
    </footer>
  );
}

 

 

2. 컴포넌트 조합하기 작은 단위의 컴포넌트를 작성한 후에는 이 컴포넌트들을 조합하여 레이아웃을 구성합니다. 이때 React에서는 다양한 방법으로 컴포넌트를 조합할 수 있습니다. 예를 들어, 컴포넌트를 중첩해서 사용하거나, 컴포넌트를 배열로 조합하거나, 조건부 렌더링을 통해 레이아웃을 동적으로 변경하는 등의 방법이 있습니다. 

 

function App() {
  return (
    <div className="App">
      <Header />
      <main>
        <h2>Welcome to my website!</h2>
        <p>This is the homepage of my website.</p>
      </main>
      <Footer />
    </div>
  );
}

 

위 코드에서는 Header 컴포넌트와 Footer 컴포넌트를 App 컴포넌트에서 조합하여 레이아웃을 구성하고 있습니다. main 태그에는 페이지 내용이 들어갑니다.

 

3. 스타일링하기 React에서는 CSS 스타일을 작성하는 방법이 여러 가지가 있지만, 가장 대표적인 방법은 className 속성을 사용하여 CSS 클래스를 지정하는 방법입니다. 이때 CSS 클래스는 별도의 CSS 파일에서 정의하거나, styled-components 등의 라이브러리를 사용하여 작성할 수 있습니다.

 

import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <main className="content">
        <h2>Welcome to my website!</h2>
        <p>This is the homepage of my website.</p>
      </main>
      <Footer />
    </div>
  );
}

 

 

 

위 코드에서는 App 컴포넌트에 className="App"을 지정하여 CSS 클래스를 적용하고 있습니다. 이 CSS 클래스는 App.css 파일에서 정의됩니다.

 

.App {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
  padding: 20px;
}

 

위 CSS 코드에서는 App 클래스를 display: flex로 설정하여 컴포넌트들을 수직으로 정렬하고 있습니다. 또한 min-height: 100vh로 설정하여 페이지 전체를 차지하도록 설정하고 있습니다. content 클래스는 flex: 1로 설정하여 Header와 Footer 사이에 있는 main 요소가 남은 공간을 모두 차지하도록 하고 있습니다. padding을 설정하여 내용과 컴포넌트 사이에 여백을 만들고 있습니다.

 

위와 같이 React로 레이아웃을 구성하는 방법은 다양한 방법으로 확장될 수 있습니다. 또한 CSS 스타일링 또한 다양한 방법으로 작성할 수 있으며, styled-components 등의 라이브러리를 사용하여 보다 쉽게 스타일링할 수 있습니다.