[React] 입문 - 컴포넌트

React 컴포넌트

함수로 만든 컴포넌트를 React에서는 함수 컴포넌트라고 부른다. 화살표 함수로도 만들 수 있다. 

import './App.css';

// html 태그를 반환하도록 설정하는 것 => 컴포넌트
// 컴포넌트를 부를때는 보통 함수 이름을 부른다.

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

// 이거는 App 컴포넌트
function App() {
  return (
    <>
      <div>
        <h1>Welcome to React</h1>
      </div>
    </>
  );
}

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

export default App;

클래스보다는 함수를 이용해서 만드는 것이 훨씬 일반적이다 .

⚠️ 함수컴포넌트로 만들때 주의사항

컴포넌트를 생성하는 함수의 이름은 반드시 첫글자가 대문자여야한다. 

 

현재 위의 코드를 실행시켜보면 header 텍스트가 안나타나기에 

import './App.css';

// html 태그를 반환하도록 설정하는 것 => 컴포넌트
// 컴포넌트를 부를때는 보통 함수 이름을 부른다.

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

// 이거는 App 컴포넌트
function App() {
  return (
    <>
      <div>
        {/* 여기에 헤더를 넣어보자 */}
        <Header />
        <h1>Welcome to React</h1>
      </div>
    </>
  );
}

export default App;

App 컴포넌트 안에 Header 컴포넌트를 넣어준다. 

Header 컴포넌트를 App 컴포넌트에 넣는 것을 자식 컴포넌트라고 부른다. 

그렇다면 App 컴포넌트는 뭐가 될까? 부모 컴포넌트이다.

 

     계층 구조

-----------------------

App 컴포넌트

           | |

Header  컴포넌트

-----------------------

 

리액트의 컴포넌트들은 화면에 표시되기 위해 자식 컴포넌트로서 존재해야된다. 

 

모든 리액트 컴포넌트들은 App 컴포넌트를 최상위 조상을 갖는 계층 구조이다. 

이때 조상 역할을 하는 App 컴포넌트를 모든 컴포넌트의 뿌리역할 => 루트 컴포넌트 라고 부른다. 

 

루트 컴포넌트는 main.jsx 파일에 render 메서드의 인수로서 전달이 된다. 

 

관례상 App 컴포넌트를 루트 컴포넌트로 설정한다. 

 

모듈화를 위해 컴포넌트별로 각각 파일을 나눠서 작성한다. 

src 파일안에 components파일을 새롭게 추가한다! → Header 컴포넌트를 보관하기 위해 header.jsx 파일 생성

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

// header 컴포넌트를 내보내기 위해 export default Header를 사용한다.
export default Header;

그러면 App.jsx에서 

import Header from './Header.jsx';를 입력해준다. 

vite에서는 import할 때 .jsx인 확장자를 생략해도 된다. 왜냐면.. 파일을 찾아가도록 내부에서 자동 설정되어있기 때문이다 .