[React] Component, 컴포넌트

컴포넌트

• React의 함수에서, JSX를 반환하는 것이 컴포넌트.

• 함수 선언문 작성법

    export default function App() {
      return (
        <div className="title">
          <h1>App Component</h1>
        </div>
      );
    }
  

• 화살표 함수 작성법

    const App = () => {
      return (
        <div className="title">
          <h1>App Component</h1>
        </div>
      );
    };
      
    export default App;   
  

원래는 화살표 함수 방식으로 작성했으나, 근래는 함수 선언문 작성법이 대세.

• 화살표 함수 방식 빠르게 작성 → rafce snippets 사용

  

• 따라서, App()에서는 return 부에 있는 JSX를 반환하는 곳이 컴포넌트가 된다.

  

---

컴포넌트를 불러와서 컴포넌트 작성

• 다음과 같이 하나의 tsx파일에다가 여러 컴포넌트를 작성할 수 있다.

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

• 또한, 외부에 작성하여 컴포넌트를 불러올 수 있다.

  → 일반적으로, components 폴더를 만들어서 불러올 컴포넌트를 작성하는 것이 관례.

  → 또한, components 폴더는 src 하위에 존재해야 한다!

  

    import Header from "./components/Header.tsx";
    import Main from "./components/Main.tsx";
    import Footer from "./components/Footer.tsx";
      
    export default function App() {
      return (
        <>
          <Header />
          <Main />
          <Footer />
        </>
      );
    }
  

---

export

• 외부로 컴포넌트를 내보낼때는 항상 다음과 같은 형식을 지키자.

    export default function 컴포넌트명() {
      return (
        <>
    	    ...컴포넌트 작성...
        </>
      );
    }
  

import

• 외부에 있는 컴포넌트를 불러올 때는 항상 다음과 같은 형식을 지키자.

    import 컴포넌트명(작성) from "파일경로명";
      
    export default function App() {
      return (
        <>
          <컴포넌트명 />
        </>
      );
    }
  

• 파일 경로명에서 .tsx 확장자는 생략해도 불러올 수 있다.

  

• 파일 경로명에서 파일명은 소문자로 시작해도 정상 동작한다.

  

• 단, 작성하는 컴포넌트명은 반드시 대문자로 시작하도록 한다!

  

  → JSX 문법이 해당 컴포넌트를 읽지 못한다!

  → 불러올 컴포넌트명은 해당 함수명과 일치하지 않아도 된다!

• 일일이, import 문을 작성하는 것보다는 자동완성 기능을 활용하자.

  

---