[React #18] React Component

01. 기본 파일 수정

 

📑 App.jsx

import './App.css';

function App() {
  return (
    <>
      <h1>Hello!</h1>
    </>
  );
}

export default App;

 

📑 main.jsx

import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

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

 

📑 .eslintrc.cjs 코드 추가

module.exports = {
  rules: {
    'no-unused-vars': 'off',
    'react/prop-types': 'off',
  },
};

• no-unused-vars : 실제로 사용하지 않는 변수가 있을 때 알려주는 옵션
• react/prop-types : 컴포넌트가 제대로 전달된 속성(props)을 사용하는지 확인하는 옵션

📑 App.css, index.css 안에 내용 삭제

 

 

02. React Component

 

✅ 함수 Component

• html 태그를 반환하는 자바스크립트 함수
• 첫 글자는 반드시 대문자로 시작해야 함 (소문자로 입력한다면 컴포넌트라고 인정하지 않음)

// 방법 1 : 함수 선언식
function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  );
}

// 방법 2 : 화살표 함수
const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  );
}

 

📑 App.jsx

import './App.css';

const Header = () => {
  return (
    <header>
      <h1>Header</h1>
    </header>
  );
};

function App() {
  return (
    <>
      <Header />
      <h1>Hello!</h1>
    </>
  );
}

export default App;

• 부모 컴포넌트 : App 컴포넌트
• 자식 컴포넌트 : 다른 컴포넌트의 리턴문 내부에 포함되는 컴포넌트
  ex) Header 컴포넌트는 App 컴포넌트 안에 있기 때문에 자식 컴포넌트임
• 모든 컴포넌트들은 화면에 렌더링 되기 위해서는 자식 컴포넌트로 존재해야 함
• 루트 컴포넌트 : 최상위 컴포넌트로 뿌리 역할을 함
• 보통 App 컴포넌트를 루트 컴포넌트로 설정함

 

03. React Component 분리

- 리액트의 컴포넌트들은 모듈화를 위해서 컴포넌트 별로 파일을 나눠서 작성을 함

 

📑 Header.jsx

const Header = () => {
  return (
    <header>
      <h1>HEADER</h1>
    </header>
  );
};

export default Header;

 

📑 Main.jsx

const Main = () => {
  return (
    <main>
      <h1>MAIN</h1>
    </main>
  );
};

export default Main;

 

📑 Footer.jsx

const Footer = () => {
  return (
    <footer>
      <h1>FOOTER</h1>
    </footer>
  );
};

export default Footer;

 

📑 App.jsx (루트 컴포넌트)

import './App.css';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';

export default function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  );
}

• Vite로 만든 리액트 앱에서는 경로 설정할 때 확장자를 적지 않아도 됨

실행화면

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'