[React] Component?

리액트의 컴포넌트

컴포넌트는 앱을 이루는 최소한의 단위이다

props나 state를 아직 잘 모른다면 (나도 아직 모른다) Component의 사용법에 대해 알아가면 될 거 같다

 

컴포넌트를 통해서 UI를 재사용 가능한 개별적인 조각으로 나누고 그 조각들을 살펴 볼 수 있다

쉽게 이해 하자면 HTML을 쭉 나열하는 게 아니라 HTML을 함수에 담아 쪼개서 사용할 수 있다는 얘기다

 

여기서 props를 함수 인자로 받아 데이터를 받지만 일단은 props를 빼고 예제를 만들어 보았다

 

그전에 지금은 function형 component를 많이 사용하지만 구형 문법인 class형 component를 알고 있으면

도움이 되지 않을까 싶다

class component (rcc)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

리액트 npm run start를 하고 난 후 초기화면

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!!</h1>
      <p>jihoon!</p>
      <ul>
        <li>top</li>
        <li>md</li>
        <li>bottom</li>
      </ul>
      <footer>end</footer>
    </div>
  );
}

export default App;

여기서 div로 만든 App class 안에 HTML을 집어넣어 주면 잘 작동되어 HTML이 그려지게 된다

 

만약 <ul>태그를 따로 관리하고 싶다면 component화 시켜서 관리하면 된다

방법은

 

1. function 함수를 똑같이 만들어 주고 componet의 이름은 무조건 대문자로 시작해야 한다

function Listcard() {
  return (
    <ul>
      <li>top</li>
      <li>md</li>
      <li>bottom</li>
    </ul>
  )
}

2. App함수 안에서 불러오면 끝

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!!</h1>
      <p>jihoon!</p>
      <Listcard></Listcard>
      <footer>end</footer>
    </div>
  );
}

function Listcard() {
  return (
    <ul>
      <li>top</li>
      <li>md</li>
      <li>bottom</li>
    </ul>
  )
}

export default App;

여기서 ul을 여러개 만들고 싶다면

function App() {
  return (
    <div className="App">
      <h1>Hello, React!!</h1>
      <p>jihoon!</p>
      <Listcard></Listcard>
      <Listcard></Listcard>
      <Listcard></Listcard>
      <footer>end</footer>
    </div>
  );
}

Ul이 여러개 만들어진 것을 확인할 수 있다

이게 리액트를 쓰는 이유 중 하나이다

 

나중에 읽기전용인 props 배우면 데이터를 내려받아 올 수 도 있다