[리액트문서보기][UI 표현하기] 첫번째 컴포넌트

학습내용

• 컴포넌트가 무엇인지
• React 어플리케이션에서 컴포넌트의 역할
• 첫번째 React 컴포넌트를 작성하는 방법

 

---

 

◼ 컴포넌트: UI 구성요소 

• HTML은 웹에서 풍부한 구조의 문서를 만드는 데 사용되는 마크업 언어입니다.
• React는 사용자가 마크업, CSS, JavaScript를 결합하여 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있게 해줍니다.
• React 컴포넌트는 HTML 태그와 마찬가지로 조합, 정렬 및 중첩하여 전체 페이지를 디자인할 수 있습니다.
• 프로젝트가 성장함에 따라 컴포넌트를 재사용하여 개발 속도를 높일 수 있으며, React 커뮤니티에서는 수천 개의 컴포넌트를 공유하고 있습니다.

 

---

 

 

 

◼ 컴포넌트 정의하기 

예전에는 웹 페이지를 만들 때 주로 콘텐츠를 꾸며주고, 그 다음에 상호작용을 추가할 때 자바스크립트를 사용했어요. 그런데 지금은 많은 웹사이트와 앱이 사용자와 상호작용할 수 있어야만 해요. React는 이런 변화를 받아들여서 상호작용을 먼저 고려하는데, 이때도 여전히 같은 기술을 사용해요. React 컴포넌트는 자바스크립트 함수로서, 여기에 우리가 흔히 볼 수 있는 마크업을 섞어서 사용할 수 있어요.

 

컴포넌트를 만드는 방법은 이렇게 세 가지에요

1. 컴포넌트를 다른 곳에서도 사용할 수 있게 내보낼수 있습니다.

 

2. 함수를 정의하기. 함수 이름은 대문자로 시작해야 해요. (규칙)

[+ 하지만 ]
 파일명을 소문자로, 함수명을 소문자로해도 import에서 대문자로 선언을 하면 사용이 가능하다.
(ex) 파일명 account.js , 함수명 function account () {},  import Account from './account')

 

 

 

3. 마크업을 추가하기. 자바스크립트 안에 마크업을 넣을 수 있어요.

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

// return 안에 같은 라인에 없으면 소괄호로 감싸야한다.
return ( 
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

[+주의]
return과 같은 라인에 없고, 괄호가 없으면 return의 뒷 라인에 있는 모든 코드는 무시된다.

// 아무것도 없는 return을 생각하면된다
return ;
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
;​​

 

이런 식으로 React를 사용하면 사용자와 상호작용하는 웹사이트나 앱을 만들 수 있어요.

 

 

---

 

 

◼ 컴포넌트 사용하기 

컴포넌트는 중첩이 가능하다

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile /> // 만든 컴포넌트를 여러번 사용
      <Profile /> // 만든 컴포넌트를 여러번 사용
      <Profile /> // 만든 컴포넌트를 여러번 사용
    </section>
  );
}

 

[+주의]
함수안에 함수를 가급적 넣지 않는것이 좋다.

// 스니펫은 매우 느리고 버그를 촉발할수 있다
export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됩니다!
  function Profile() {
    // ...
  }
  // ...
}​

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

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

 

 

---

 

 

◼ 브라우저에 표시되는 내용 

// [JSX 코드]
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      // Profile 컴포넌트에는 더 많은 <img /> 태그가 있습니다.
      <Profile /> 
      <Profile /> 
      <Profile /> 
    </section>
  );
}

 

// [브라우저에 보이는 코드]
// <section>은 소문자로 작성되어 있어 React가 이것을 HTML 태그로 인식
<section> 
  <h1>Amazing scientists</h1>
//<Profile />은 대문자 'P'로 시작하여 React가 컴포넌트로 인식해줍니다.
  <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>

 

 

---

 

 

 

◼ 컴포넌트의 모든 것 

React 애플리케이션은 보통 root 컴포넌트에서 시작됩니다. 이 컴포넌트는 앱의 시작점이며, 모든 다른 컴포넌트들은 여기에서 시작됩니다.
대부분의 React 앱은 모든 부분에서 컴포넌트를 사용합니다. 작은 부분부터 전체 페이지까지 모든 것을 컴포넌트로 만들 수 있습니다.
일부 React 기반 프레임워크는 HTML 대신에 React 컴포넌트를 사용하여 HTML을 생성합니다.
많은 웹사이트들은 React를 주로 상호작용을 추가하는 용도로만 사용합니다. 이러한 경우에는 여러 개의 root 컴포넌트가 있을 수 있습니다.
요약하면, React는 유연하고 재사용 가능한 UI를 만드는 데 사용되며, 이를 통해 웹 애플리케이션의 개발 및 유지 보수를 용이하게 만듭니다.

 

 

 

---

 

 

◼ 요약 

• React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있습니다.
• React 앱에서 모든 UI는 컴포넌트입니다.
• React 컴포넌트는 다음 몇 가지를 제외하고는 일반적인 JavaScript 함수입니다.
  1. 컴포넌트의 이름은 항상 대문자로 시작합니다.
  2. JSX 마크업을 반환합니다.

 

 

 

 

 

 

 

 

[참고]

https://ko.react.dev/learn/your-first-component

https://www.youtube.com/watch?v=qjqUlgZ-80M&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=7