React

[React] 컴포넌트(Component)

효니님 2024. 7. 27. 16:48
728x90

 

컴포넌트(Component)

리액트 컴포넌트는 리액트 애플리케이션의 기본 구성 요소로,

독립적이고 재사용 가능한 코드 블록입니다.

리액트 컴포넌트는 사용자 인터페이스(UI)를 정의하고 구성하는 데 사용됩니다.

리액트 컴포넌트를 사용하면 애플리케이션을 작은 단위로 나눌 수 있어 관리와 유지보수가 용이합니다.

 

리액트 컴포넌트의 종류는 크게 두 가지로 나눌 수 있습니다.

  • 함수형 컴포넌트(Function Component)
  • 클래스형 컴포넌트(Class Component)

이 포스팅에서는 함수형 컴포넌트에 대해 알아보겠습니다.

 

 

React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수입니다.

 

서로 같은 것끼리 그룹핑을 해서 이름을 붙여 사용자 정의 태그를 만든 것이 컴포넌트이며,

React에서 사용자 정의 태그를 컴포넌트라 부릅니다.

 

React 컴포넌트는 일반 JavaScript 함수지만,

컴포넌트를 만들 때 이름은 반드시 대문자로 시작해야 합니다.

만들어진 컴포넌트는 return 값으로 HTML태그를 리턴하면 됩니다.

 

함수 정의하기

function Header(){
  return <h1>WEB</h1>
}

function Header(){ }를 사용하면 Header라는 이름의 함수를 정의할 수 있습니다.

Header컴포넌트는 <h1> WEB </h1> 태그를 반환합니다.

 

리턴문에 작성된 태그는 HTML처럼 작성되어 있지만 실제로는 자바스크립트입니다. 

이 구문을 JSX라고 하며, 자바스크립트 안에 마크업을 삽입할 수 있습니다.

 

반환문은 이 컴포넌트에서처럼 한 줄에 모두 작성할 수 있지만,

마크업이 모두 return 키워드와 같은 라인에 있지 않은 경우 다음과 같이 괄호로 묶어야 합니다.

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

해당 코드처럼 부모 태그로 감싸주어야 return문이 무시되지 않습니다.

 

 

컴포넌트 사용하기

정의한 Header 컴포넌트는 다른 컴포넌트 안에 중첩할 수 있습니다.

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

Header 컴포넌트를 사용하는 App컴포넌트를 내보낼 수 있습니다.

 

컴포넌트는 일반 자바스크립트 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있습니다.

 

Header 컴포넌트는 App안에서 렌더링 되기 때문에(여러 번 렌더링 가능)
App은 Header를 "자식"으로 렌더링 하는 부모 컴포넌트가 됩니다.

컴포넌트를 한번 정의한 다음 원하는 곳에서 원하는 만큼 사용할 수 있습니다.

 

주의해야 할 점은 컴포넌트는 다른 컴포넌트를 렌더링 할 수 있지만, 

그 정의를 중첩해서는 안됩니다.

export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됩니다!
  function Profile() {
    // ...
  }
  // ...
}

위 코드는 매우 느리며 버그를 촉발합니다. 

 

export default function Gallery() {
  // ...
}

// ✅ 최상위 레벨에서 컴포넌트를 선언합니다
function Profile() {
  // ...
}

자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우,

정의를 중첩하는 대신 props로 전달해야 합니다.

728x90