[REACT] Components - 공식 문서랑 같이 공부하기 시리즈1

컴포넌트

컴포넌트는 리액트의 핵심 개념 중 하나이다. 

HTML에서는 markup이 웹의 UI를 구성한다. 리액트는 markup과 css, javascript를 컴포넌트로 결합하여 '재사용가능'한 UI 요소를 만든다고 생각하면 된다. (markup은 <h1>, <ul>과 같은 것을 이야기한다.)

컴포넌트를 구성하는 방법

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

1. 컴포넌트를 Export 한다. (내보내기) - 이 부분으로 인해 다른 파일에서 내보낸 function을 import할 수 있게 해주는 것이다.

2. function을 정의한다. - function Profile() { } 이 부분에서 Profile이라는 이름을 정해준다. 이때 이름을 대문자로 쓰지 않으면 작동하지 않는다.

3. markup을 추가한다. - return 뒤에 바로 markup을 작성하면 괄호 안 써도 된다. (예시: return <div><img /></div>) return 아래 줄부터 markup을 작성한다면 괄호 필수! 오류는 안 나지만 아무것도 안 나올 거다.

 

컴포넌트 사용하기

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

<section>은 소문자로 작성되었다. 따라서 React가 해당 태그를 HTML 태그로 인식할 수 있다.

<Profile />은 대문자로 시작한다. 따라서 React가 컴포넌트로 인식할 수 있다. 물론 <Profile />은 HTML을 포함하고 있기 때문에 브라우저는 결국 아래처럼 해석할 것이다.

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

컴포넌트는 Javascript 함수이므로, 한 파일에 여러 컴포넌트를 작성할 수 있다. 이는 컴포넌트가 상대적으로 작거나 서로 관련이 되어 있을 때 유용하다. 컴포넌트 덩치가 커지면 다른 파일로 분리할 수도 있다. (관련해선 다음 글 참조)

두 번째 코드블럭에서 Profile이 Gallery 안에서 렌더링되므로 Gallery 를 부모 컴포넌트, Profile을 자식 컴포넌트라고 부를 수 있다. 심지어 Profile은 여러 번 사용될 수 있는데, 이것이 바로 React의 유용성이다!

* 대신 컴포넌트 function 내부에서 또다시 컴포넌트를 정의하지는 말아야 한다. 자식 컴포넌트에서 부모 컴포넌트의 데이터가 필요하다면 props로 데이터를 받아야 한다. (관련해선 다음 글 참조)

 

리액트 공부 n일차 초보 공부 기록입니다. 잘못된 글이 있으면 댓글로 알려주세요~!