React 3. 컴포넌트 만들기

✅ React 에서의 컴포넌트란?

React에서 컴포넌트는 재사용성과 유지보수성을 높이는 데 중요한 역할을 합니다. 하나의 컴포넌트를 여러 곳에서 사용할 수 있으며, 각 컴포넌트는 독립적으로 작동하므로 유지보수가 용이합니다.

---

👀 컴포넌트 만들기 시작 !

1. 기본 소스를 컴포넌트로 만들어보겠습니다. 

App.js소스 코드)

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

//사용자 정의 테그 만들기 (컴포넌트)
function Header(){
    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>웰컴 ~~</h2>
        Hello, Web
    </article>
}


function App() {
  return (
    <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
    
  );
}

export default App;

2. 위 코드를 컴포넌트를 만들어 보자 

//사용자 정의 테그 만들기 (컴포넌트)
function Header(){
    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>웰컴 ~~</h2>
        Hello, Web
    </article>
}


function App() {
  return (
    <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
  );
}

2-1. 컴포넌트 소스를 하나씩 살펴 보겠습니다.

 

 ✔️ 첫번째로 header()를 컴포넌트로 만들어 보겠습니다.

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

✔️ 두번째로 nav()를 컴포넌트로 만들어 보겠습니다.

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>
}

✔️ 세번째로 article()를 컴포넌트로 만들어 보겠습니다.

function Article(){
    return <article>
        <h2>웰컴 ~~</h2>
        Hello, Web
    </article>
}

✔️ 간결된 메인 코드

function App() {
  return (
    <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
    
  );
}

---

App.js의 변경된 소스)

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

//사용자 정의 테그 만들기 (컴포넌트)
function Header(){
    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>웰컴 ~~</h2>
        Hello, Web
    </article>
}


function App() {
  return (
    <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>

    </div>
    
  );
}

export default App;

---

끝으로..

컴포넌트 소스로 만든다는 것은 여러 태그들을 하나의 독립된 부품으로 만들 수 있게 되었고, 그 부품을 이용하면 더 적은 복잡도로 프로그래밍이 가능해졌습니다. 또한, 내가 만든, 다른 사람이 만든 컴포넌트를 이용하여 생산성을 높일 수 있습니다. 

 

다음시간에는 컴포넌트에 속성값을 넣을수 있는 props에 대해 공부 해보겠습니다.