React 컴포넌트 만들고 사용하기

React에서 컴포넌트를 만들고 사용하는 것은 웹 애플리케이션 개발에서 중요한 부분입니다. 

컴포넌트를 만들면 1. 코드의 가독성을 높일 수 있고, 2. 재사용성을 증가시키며 3. 생산성을 향상시킬 수 있습니다. 아래에서 React에서 사용자 정의 태그(컴포넌트)를 만들고 활용하는 방법에 대해 설명합니다.

 

1. 사용자 정의 태그(컴포넌트) 만들기

React에서 사용자 정의 태그(컴포넌트)를 만들 때 다음 규칙을 따릅니다:

- 컴포넌트 이름은 대문자로 시작해야 합니다.
- React 컴포넌트 클래스나 함수를 정의합니다.
- 컴포넌트의 렌더링 결과를 반환합니다.

예를 들어, 간단한 "Hello World" 컴포넌트를 만들어보겠습니다.

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default HelloWorld;

 

또는 함수 컴포넌트를 사용하여 같은 결과를 얻을 수 있습니다.

import React from 'react';

function HelloWorld() {
  return <div>Hello, World!</div>;
}

export default HelloWorld;

2. 컴포넌트 사용하기

이제 만든 컴포넌트를 다른 곳에서 사용할 수 있습니다. 다른 React 컴포넌트 내에서 사용하거나, 렌더링할 때 사용할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld'; // 컴포넌트 가져오기

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <HelloWorld /> {/* HelloWorld 컴포넌트 사용 */}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

 

위의 코드에서 `<HelloWorld />`와 같이 컴포넌트를 사용하면 됩니다. 이렇게 하면 해당 컴포넌트가 렌더링됩니다.

 

3. 컴포넌트 재사용과 가독성

컴포넌트를 만들고 사용함으로써 코드를 더 가독성 있게 만들 수 있습니다. 컴포넌트는 기능 단위로 분리되므로 각 컴포넌트는 특정 작업을 수행하고 이해하기 쉽게 됩니다. 또한 동일한 컴포넌트를 여러 곳에서 재사용할 수 있으므로 코드 중복을 피할 수 있습니다.

예를 들어, 웹 애플리케이션에서 다양한 페이지에 사용되는 헤더 컴포넌트를 만들고 사용할 수 있습니다. 이러한 재사용성은 유지 및 보수를 간편하게 만들어줍니다.

import React from 'react';

function Header() {
  return (
    <header>
      <h1>My App Header</h1>
      {/* 다양한 헤더 내용 */}
    </header>
  );
}

export default Header;

import React from 'react';
import Header from './Header'; // 헤더 컴포넌트 가져오기

function HomePage() {
  return (
    <div>
      <Header /> {/* 헤더 컴포넌트 재사용 */}
      {/* 다양한 홈페이지 내용 */}
    </div>
  );
}

export default HomePage;

 

이와 같이 컴포넌트를 만들고 사용함으로써 코드의 가독성을 높이고, 재사용성을 향상시킬 수 있으며, 한 번에 여러 곳에서 동시에 수정할 수 있습니다. 이것이 React 컴포넌트의 강력한 기능 중 하나입니다.

import logo from './logo.svg';
import './App.css';

function Header(props){
  return <header>
    <h1><a href="/">Web</a></h1>
  </header>
}

function Nav(){
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    </ol>
  </nav>
} 

function Article(){
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}

function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}
 
export default App;

 

참고영상 : https://opentutorials.org/course/4900/31265