[React] 클래스, 함수, 화살표 함수 컴포넌트와 children 활용법 완벽 정리🚀

🔑토끼와 거북이에서 "거북이"가 되자

💡 클래스 컴포넌트 Class Component

---

📃 클래스형 컴포넌트는 React에서 Component를 상속하여 정의된 컴포넌트입니다. 구조화된 객체 형태로 this를 통해 다양한 속성과 메서드를 사용할 수 있습니다.

💻MyComponentClass.js

import React, { Component } from 'react'

class MyComponentClass extends Component {
  render() {
    console.log(this) // this는 컴포넌트 인스턴스를 가리킵니다
    const { name, age } = this.props
    return (
      <>
        <h2>안녕하세요 제 이름은 {name}입니다</h2>
        <h4>나이는 {age}살입니다</h4>
      </>
    )
  }
}
export default MyComponentClass

💻App.js

import './App.css';
import MyComponentClass from './MyComponentClass';
function App() {
  return (
    <>
      <MyComponentClass name="박재홍" age={23} nickname="재롱" />
    </>
  );
}
export default App;

💻console.log(this)

⬆️ App.js에서 <MyComponentClass />를 태그 형태로 사용하여 호출합니다.

⬆️ props: 부모 컴포넌트가 자식 컴포넌트에 값을 동적으로 전달하는 방법. 위에서는 name, age, nickname이라는 속성이 전달되었습니다.

⬆️ 자식 컴포넌트에서 this.props로 전달된 값을 활용할 수 있습니다. 

 

💡 함수 컴포넌트 Function Component

---

📃 React에서는 요즘 함수형 컴포넌트가 트랜드로서 자리를 잡아가고 있고, 함수 형태로 정의된 컴포넌트입니다. 클래스형 컴포넌트보다 작성이 간단하고, 구조가 더 직관적입니다.

💻MyComponentFunction.js

import React from 'react'

const MyComponentFunction = ({ name, age }) => {

  return (
    <>
      <h2>안녕하세요 제 이름은 {name}입니다</h2>
      <h4>나이는 {age}살입니다</h4>
    </>
  )
}

export default MyComponentFunction

💻App.js

import MyComponentFunction from './MyComponentFunction';
function App() {
  return (
    <>
      <MyComponentFunction name="Jayden" age={25} />
    </>
  );
}

export default App;

⬆️ 클래스형 컴포넌트보다 코드량이 적고 가독성이 좋습니다. render() 메서드가 필요 없으며, 바로 JSX를 반환합니다. 함수의 매개변수로 props를 받아 사용할 수 있습니다.

 

💡 함수형 컴포넌트 Arrow Function =>

---

📃 함수 형태로 정의된 React 컴포넌트로, ES6이후 React 개발의 트렌드가 아닌가 생각합니다 

https://www.linkedin.com/pulse/difference-between-regular-arrow-function-lokesh-jha

💻MyComponentArrowFunction.js

import React from 'react';

const MyComponentArrowFunction = ({ name, age }) => (
  <>
    <h2>안녕하세요 제 이름은 {name}입니다</h2>
    <h4>나이는 {age}살입니다</h4>
  </>
);

export default MyComponentArrowFunction;

💻App.js

import MyComponentArrowFunction from './MyComponentArrowFunction';

function App() {
  return (
    <>
      <MyComponentArrowFunction name="Jayden" age={25} />
    </>
  );
}

export default App;

💻표현식만 사용하여 return과 중괄호가 생략되는 경우

const MyComponent = ({ name }) => <h1>Hello, {name}!</h1>;
// JSX 자체가 표현식이므로 중괄호와 return 생략 가능

⬆️  화살표 함수는 표현식만 포함할 경우 중괄호와 return 키워드를 생략할 수 있어 코드가 간결해집니다 , ES6 이후로는 화살표 컴포넌트를 사용하는 것이 더 직관적이고 현대적인 것 같습니다

 

💡 특수 Props "children" 

---

📃 children은 React에서 컴포넌트의 특수 props로, 컴포넌트 태그 사이에 전달된 내용을 나타냅니다. 부모 컴포넌트에서 자식 컴포넌트 태그 안에 작성된 모든 내용을 children으로 접근할 수 있습니다

https://creative103.tistory.com/234

💻MyComponentArrowFunction.js with children

import React from 'react';

const MyComponentArrowFunction = ({ name, age, children }) => {
  return (
    <>
      <h2>안녕하세요 제 이름은 {name}입니다</h2>
      <h4>나이는 {age}살입니다</h4>
      <div>{children}</div> {/* children을 출력 */}
    </>
  );
};

export default MyComponentArrowFunction;

💻App.js

import MyComponentArrowFunction from './MyComponentArrowFunction';

function App() {
  return (
    <>
      <MyComponentArrowFunction name="Jayden" age={25}>
        <p>React를 배우고 있어요</p> {/* children으로 전달 */}
      </MyComponentArrowFunction>
    </>
  );
}

export default App;

⬆️ 부모 위 코드에서는 <p>React를 배우고 있어요!</p>가 children으로 전달되어, MyComponentArrowFunction 내부에서 <div>{children}</div>로 출력됩니다.

 

📝 SUMMARY

---

📌 Class : this를 통해 상태와 메서드를 관리하고, render() 메서드를 통해 JSX를 반환

📌 Function : 함수 형태로 정의된 컴포넌트로, 코드가 간결하고 직관적. props를 함수 매개변수로 받아 JSX를 반환

📌 Arrow Function : 함수형 컴포넌트의 간결한 문법, return과 중괄호 생략 가능. ES6 이후 더 현대적인 방식으로 널리 사용

📌 children : React 컴포넌트에서 자식 요소를 전달하고, children 특수 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달된 내용을 출력 가능