[React.js] 컴포넌트 개념

자식 컴포넌트와 부모 컴포넌트

const Header = () => {

  return (

    <header>

      <h1>header</h1>

    </header>

  );

};

function App() {

  return (

    <>

      <Heder/>

      <h1>안녕 리액트!</h1>

    </>

  );

}

이런식으로

Return문 내부에 포함되는 컴포넌트를 자식 컴포넌트라 합니다.

반대로 컴포넌트를 품고있는 컴포넌트는 부모 컴포넌트라 합니다.

위의 코드는 Header 컴포넌트는 자식컴포넌트

App컴포넌트는 부모 컴포넌트가 됩니다.

 

계층형구조로 React의 모든컴포넌트 들은 화면에 랜더링 되기 위해서

App 컴포넌트의 자식 컴포넌트로 존재해야 한다.

React의 모든 컴포넌트 들은 App컴포넌트를 최상위 컴포넌트로 갖는다.

그러므로 App컴포넌트를 Root 컴포넌트로 부른다.

 

최상위 컴포넌트를 바꾸는 방법

main.jsx 파일에

const Hello = () => {

  return <div>hello</div>

}

ReactDOM.createRoot(document.getElementById('root')).render(

  <Hello />

)

Root 컴포넌트를 Hello로 바꿔버리면

Hello컴포넌트가 Root 컴포넌트가 된다.

대부분의 리액트 개발자들은 App이라는 컴포넌트를 root컴포넌트로 설정하기 때문에

App컴포넌트를 root 컴포넌트로 지정을 하도록 하자

 

컴포넌트 파일 분리와 분리된 컴포넌트 불러와서 사용하기

리액트는 컴포넌트 별로 따로 관리하는것이 좋기 때문에

const Header = () => {

  return (

    <header>

      <h1>header</h1>

    </header>

  );

};

function App() {

  return (

    <>

      <Heder/>

      <h1>안녕 리액트!</h1>

    </>

  );

}

이런식의 컴포넌트 관리는 용이 하지않다

그렇기 때문에 Header라는 컴포넌트는 따로 파일을 생성하여 관리를 하는것이 좋다.

Header.jsx 파일을 생성해주고

const Header = () => {

    return (

      <header>

        <h1>header</h1>

      </header>

    );

  };

  export default Header

import './App.css'

import Header from './components/Header.jsx'

function App() {

  return (

    <>

      <Header/>

      <h1>안녕 리액트!</h1>

    </>

  );

}

export default App

App.jsx 파일에 임포트 해주고 전초롬 컴포넌트를 추가하여 사용하면 된다.

vite를 사용할때에는

import Header from './components/Header.jsx'

요기에서 .jsx를 생략해도 상관없다 내부적으로 vite에서 확장자 없이도 파일을 찾아갈수 있게 만들었기 때문이다.