[JS React] 컴포넌트 활용하기

 

 

아래와 같이 반복되는 코드들이 있다면 어떨까요? 
지속적으로 작성하기에 비효율적이지 않을까요? 그럴때 컴포넌트를 사용하면 됩니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지', 'CSS 공부를 위한 페이지']);

  return (
    <div className="App">
      <h4>{pageName[0]}</h4>
      <p>설명 설명 설명</p>
      <h4>{pageName[1]}</h4>
      <p>설명 설명 설명</p>
      <h4>{pageName[2]}</h4>
      <p>설명 설명 설명</p>
    </div>
  );
}

export default App;

 

 

아래와 같이 기능을 나눌 수 있습니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  return (
    <div className="App">
      <Page index={0}/>
      <Page index={1}/>
      <Page index={2}/>
    </div>
  );
}

function Page({index}) {
  let [pageName, pageNameChange] = useState(['리액트 공부를 위한 페이지', 'HTML 공부를 위한 페이지', 'CSS 공부를 위한 페이지']);

  return (
    <div>
      <h4>{pageName[index]}</h4>
      <p>설명 설명 설명</p>
    </div>
  )
}

export default App;