컴포넌트(Components) - React 배우기

컴포넌트(Components), Props - react 배우기

1. 리액트 컴포넌트(React Components)란?

컴포넌트란 재사용 가능한 UI 조각을 의미한다.

• 컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다.
• 컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다.
• 컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는 하나만 있어야 한다.

- 컴포넌트의 규칙

• 컴포넌트는 함수 또는 클래스로 정의할 수 있음
• 컴포넌트 이름은 대문자로 시작해야 함
• 소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하게 됨
• 컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 랜더링에 전달할 수 있음

// html div 태그로 인식
const element = <div />;

// 컴포넌트로 인식
const element = <Cat name="겨울" />;

- 함수 컴포넌트

• 컴포넌트를 정의하는 가장 간단한 방법
• 일반 함수, 화살표 함수의 형태로 컴포넌트를 정의할 수 있다.

// 일반 함수로 정의
function Header() {
  return <header>logo</header>;
}

export default Header;

// 화살표 함수로 정의
const Header = () => {
  return <header>logo</header>;
};

export default Header;

- 클래스 컴포넌트

• 자바스크립트 ES6의 클래스(class)를 사용해 컴포넌트를 정의하는 또 다른 방법
• React.Component를 상속받아서 컴포넌트를 정의할 수 있음
• render() 메소드는 화면에 표시할 내용을 반환해야 함

// 클래스 컴포넌트로 정의
import React from 'react';

class Header extends React.Component {
  render() {
    return <header>logo</header>;
  }
}

export default Header;

리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 정의해야 한다.
상속이라는 것은 부모 클래스의 기능을 그대로 물려받는 것을 의미한다.

위 예제에서는 React.Component라는 클래스를 상속받아서 Header 클래스를 만들었고,
이는 React.Component를 상속받았기 때문에 리액트 컴포넌트가 된다.

- 리액트 컴포넌트가 가지고 있는 기능은 무엇일까?

• 컴포넌트의 상태(state)를 관리할 수 있음
• 컴포넌트의 생명주기(lifecycle)를 관리할 수 있음
• 컴포넌트의 속성(props)을 관리할 수 있음

---

2. 컴포넌트 만들기

• 일반 html

<!-- index.html -->
<div id="wrap">
  <header>
    <h1>logo</h1>
  </header>
  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/">About</a>
      </li>
      <li>
        <a href="/">SignIn</a>
      </li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>섹션1</h2>
      <p>섹션1 컨텐츠</p>
    </section>

    <section>
      <h2>섹션2</h2>
      <p>섹션2 컨텐츠</p>
    </section>
  </main>
  <footer>footer</footer>
</div>

• 위 html 코드를 리액트 컴포넌트로 나누어 보자.

// App.js
import React from 'react';

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

function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/">About</a>
        </li>
        <li>
          <a href="/">SignIn</a>
        </li>
      </ul>
    </nav>
  );
}

function Section() {
  return (
    <section>
      <h2>섹션1</h2>
      <p>섹션1 컨텐츠</p>
    </section>
  );
}

function Footer() {
  return <footer>footer</footer>;
}

function App() {
  return (
    <div id="wrap">
      <Header />
      <Nav />
      <main>
        <Section />
      </main>
      <Footer />
    </div>
  );
}

export default App;

3. 컴포넌트의 재사용

• 컴포넌트는 재사용이 가능하고 재사용하면 코드의 중복을 줄일 수 있다.
• 아래 코드에서 article 컴포넌트를 2번 사용하고 있다.

// App.js
import React from 'react';

//... 생략 ...

function App() {
  return (
    <div id="wrap">
      <Header />
      <Nav />
      <main>
        <Section />
        <Section />
      </main>
      <Footer />
    </div>
  );
}

export default App;

4. 컴포넌트의 조합

• 컴포넌트는 다른 컴포넌트를 포함할 수 있다.

• 컴포넌트를 조합하여 화면을 구성할 수 있다.

• Header 컴포넌트에 Nav 컴포넌트를 포함시켜 구조를 변경할 수 있다.

// App.js
import './styles.css';

function Header() {
  return (
    <header>
      <h1>logo</h1>
      <Nav />
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/">About</a>
        </li>
        <li>
          <a href="/">SignIn</a>
        </li>
      </ul>
    </nav>
  );
}

// ... Section 컴포넌트 생략 ...

export default function App() {
  return (
    <div id="wrap">
      <Header />
      <main>
        <Section />
        <Section />
      </main>
      <Footer />
    </div>
  );
}

5. 컴포넌트의 분리

• 컴포넌트를 분리하면 코드의 재사용성을 높일 수 있다.
• 컴포넌트를 분리할 때는 컴포넌트를 사용하는 부모 컴포넌트와 컴포넌트를 분리하는 자식 컴포넌트로 구분한다.
• 자식 컴포넌트는 부모 컴포넌트에 종속되지 않고 독립적으로 동작해야 한다.

- Header 컴포넌트 분리

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

function Header() {
  return (
    <header>
      <h1>logo</h1>
      <Nav />
    </header>
  );
}

export default Header;

- Nav 컴포넌트 분리

// Nav.jsx
function Nav() {
  return (
    <nav>
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/">About</a>
        </li>
        <li>
          <a href="/">SignIn</a>
        </li>
      </ul>
    </nav>
  );
}

export default Nav;

- Article 컴포넌트 분리

// Section.jsx
function Section() {
  return (
    <section>
      <h2>섹션1</h2>
      <p>섹션1 컨텐츠</p>
    </section>
  );
}

export default Article;

- App 컴포넌트에서 분리한 컴포넌트를 불러와서 사용한다.

// App.js
export default function App() {
  return (
    <div id="wrap">
      <Header />
        <main>
            <Section />
            <Section />
        </main>
        <Footer />
    </div>
  );
}

export default App;

6. 컴포넌트 랜더링

• 컴포넌트를 랜더링(출력)할 때는 ReactDOM.render() 함수를 사용
• 첫 번째 파라미터는 랜더링할 결과물, 두 번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정함

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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