[ReactJS] 2장 컴포넌트와 UI 구성요소

1. UI 구성 요소

React의 컴포넌트는 주로 다음과 같은 UI 형식로 구성되어 있습니다.

• HTML 요소: <div>, <h1>, <p>등 일반적인 html 요소 
• React 요소: 다른 React 컴포넌트를 포함시킬 수 있음
• 스타일 요소: CSS 또는 스타일링 라이브러리를 사용해 UI를 꾸밀 수 있음

---

2. 컴포넌트 정의하기

컴포넌트를 정의하기위해 함수형 컴포넌트 또는 클래스형 컴포넌트로 정의할 수 있습니다.

 

함수형 컴포넌트 예시

import "./App.css";
import React from "react";

const ReactComponent = () => {
  return <h1>hello React!</h1>;
};

export default ReactComponent;

 

클래스형 컴포넌트 예시

import React, { Component } from "react";

class ReactComponent extends Component {
  render() {
    return <div>hello</div>;
  }
}

export default ReactComponent;

---

3.컴포넌트 내보내기

컴포넌트를 다른 파일에 사용할 수 있도록 내보내기 위해서 export를 사용합니다. 위에서 보았듯 export default 뒤에 정의한 함수나 클래스를 내보내 다른 파일에서 사용할 수 있습니다. 사용법은 다음 컴포넌트 불러오기에서 설명하겠습니다.

export default ReactComponent; // 기본 내보내기

 

또는 이름을 직접 지정해 내보낼 수 있습니다.

export const ReactApp = () => {
  return <h1>Hello World</h1>;
};

---

4. 함수 정의하기

컴포넌트 내 특정 동작을 수행하는 함수를 정의할 수 있습니다. 예를 들어 버튼을 클릭하면 카운트를 증가시키는 함수를 작성할 수 있습니다. 코드는 다음과 같습니다.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0); // 기본 값 0

  const increment = () => {
    setCount(count + 1); // increment 클릭시 + 1 씩 증가
  };

  return (
    <div>
      <h1>현재 카운트: {count}</h1>
      <button onClick={increment}>증가</button>
    </div>
  );
};

export default Counter;

---

5.마크업 추가하기 

컴포넌트의 JSX  내부에 HTML 마크업을 추가해 UI를 구성합니다.

const MyComponent = () => {
  return (
    <div>
      <h1>Hello!</h1>
      <p>React Component</p>
      <button>Please! Click Here</button>
    </div>
  );
};

export default MyComponent;

---

6.컴포넌트 사용하기

다른 컴포넌트에 정의한 컴포넌트를 사용하려면 컴포넌트 이름을 JSX 형식으로 사용합니다.

import MyComponent from "./1.First-Component/Markup";

export const ReactApp = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default ReactApp;

---

7. 브라우저에 표시되는 내용

• <section>은 소문자로 React는 HTML 태그를 가리킨다고 이해
• <MyComponent />는 대문자 m으로 시작하므로 React는 MyComponent는 컴포넌트를 사용하고자 한다고 이해

<section>
   <h1>컴포넌트 위 컴포넌트 작성가능</h1>
   <MyComponent />
</section>

---

8. 컴포넌트 중첩

리액트는 컴포넌트를 다른 컴포넌트 안에 컴포넌트를 포함시킬 수 있습니다 이를 통해 UI 구조화와 재사용성을 높일 수 있습니다.

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

const Footer = () => {
  return <h1>Footer Component</h1>;
};

const MainContent = () => {
  return <p>Main Content</p>;
};

export const ReactApp = () => {
  return (
    <section>
      {/* <h1>컴포넌트 위 컴포넌트 작성가능</h1> */}
      {/* <MyComponent /> */}
      <Header />
      <Footer />
      <MainContent />
    </section>
  );
};

export default ReactApp;

---

요약

• UI 구성 요소: UI 재사용으로, HTML과 유사한 JSX를 사용해 작성
• 컴포넌트 정의:
  • 함수형 컴포넌트: Javscript 함수로 정의
  • 클래스형 컴포넌트: ES6 클래스로 정의
• 컴포넌트 내보내기: 다른 파일에서 사용할 수 있도록 export를 사용해 내보냄
• 함수 정의하기: 컴포넌트 내에서 특정 동작을 수행하는 함수 작성 가능
• 마크업 추가하기: JSX 내부에 HTML 마크업을 추가해 UI 구성  
• 컴포넌트 사용하기: 다른 컴포넌트에 정의한 컴포넌트를 JSX 태그 형식으로 사용 가능
• 브라우저에 표시되는 내용: ReactDOM을 사용해 애플리케이션을 HTML 요소에 렌더링

GitHub - Koras02/react-bloging: https://thinky.tistory.com/category/Front-End/ReactJS