컴포넌트(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 className="root">
    <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>
    <article>
        <h2>Home</h2>
        <p>홈 화면 입니다.</p>
    </article>
</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 Article() {
    return (
        <div>
            <h2>Home</h2>
            <p>홈 화면 입니다.</p>
        </div>
    )
}

function App() {
    return (
        <div className="root">
            <Header />
            <Nav />
            <Article />
        </div>
    )
}

export default App

3. 컴포넌트의 재사용

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

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

... 생략 ...

function App() {
  return (
    <div className="root">
      <Header />
      <Nav />
      <Article />
      <Article /> // Article 컴포넌트를 2번 사용
    </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>
  );
}

... Article 컴포넌트 생략 ...

export default function App() {
  return (
    <div className="root">
      <Header />
      <Article />
    </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 컴포넌트 분리

// Article.jsx
function Article() {
    return (
        <div>
            <h2>Home</h2>
            <p>홈 화면 입니다.</p>
        </div>
    )
}

export default Article

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

// App.js
export default function App() {
  return (
    <div>
      <Header title="Dashboard" />
      <Article />
    </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'))