[react] component 컴포넌트란?

 

 

컴포넌트란?

사전적 의미로는 구성 요소를 뜻한다.

이러한 의미 그대로 컴포넌트란 UI를 구성하는 개별적인 요소로써, 

이것들을 조합하여 프로그래밍 할 수 있다.

 

 

 

컴포넌트를 사용하게 되면 여러가지 장점이 있다

 

1. 긴 html 태그들을 한 줄로 깔끔하게 치환할 수 있다.

 

//Before

function App() {
  return (
    <>
      <header>
        <h1>Logo</h1>
          <nav>
            <ul> 
              <li>About</li>
              <li>Work</li>
              <li>Contact</li>
            </ul>
          </nav>
      </header>
      
      <div>
        <article>
          <h1>title</h1>
          <h2>contents</h2>
        </article>
      </div>
      
      <footer>
        <div>
          <div>Logo</div>
          <ul> 
            <li>About</li>
            <li>Work</li>
            <li>Contact</li>
          </ul>
        </div>
        <div>
          <p>contact me</p>
          <p>010-1234-5678</p>
          <p>dev-ee.tistory.com</p>
          <p>ⓒ2022. dev-ee all rights reserved</p>
        </div>
      </footer>
    </>
  );
};

 

//After

function App() {
  return (
    <>
      <Header></Header>
      
      <div>
        <article>
          <h1>title</h1>
          <h2>contents</h2>
        </article>
      </div>
      
      <Footer></Footer>
    </>
  );
};

 

 

 

2. 각각 나눠져 있어 관리가 용이하다.

 

//src/ccomponents/Header.js

function Header() {
  return (
      <header>
        <h1>Logo</h1>
          <nav>
            <ul> 
              <li>About</li>
              <li>Work</li>
              <li>Contact</li>
            </ul>
          </nav>
      </header>
  );
};

export default Header;

 

//src/components/Footer.js

function Footer() {
  return (
      <footer>
        <div>
          <div>Logo</div>
          <ul> 
            <li>About</li>
            <li>Work</li>
            <li>Contact</li>
          </ul>
        </div>
        <div>
          <p>contact me</p>
          <p>010-1234-5678</p>
          <p>dev-ee.tistory.com</p>
          <p>ⓒ2022. dev-ee all rights reserved</p>
        </div>
      </footer>
    </>
  );
};

export default Footer;

 

 

3. 재사용이 가능하여 범용성이 좋다.

 

 

 

 

사용방법

• src에 component폴더를 생성한다.
• component폴더 하위에 컴포넌트 파일들을 생성한다.
• 컴포넌트 파일 하단에 export 해준다. (ex. export default 컴포넌트명;)
• 컴포넌트들을 가져다 쓸 App.js 상단에 import한다.  
• 컴포넌트를 넣고 싶은 위치에 컴포넌트명을 작성해준다. 이 때 컴포넌트명은 대문자로 시작한다

 

//src/App.js

import Header from './component/Header'; 
import Footer from './component/Footer';

function App() {
  return (
    <>
      <Header></Header>
      
      <div>
        <article>
          <h1>title</h1>
          <h2>contents</h2>
        </article>
      </div>
      
      <Footer></Footer>
    </>
  );
};