함수형 컴포넌트의 작성 방법

Q1.

const MyChildrenSub 는 선언은 상수인데 내용물은 함수인데, 이건 도대체 뭔지가 궁금해.

 

 

 

A1.

const MyChildrenSub는 상수인데, 내용물이 함수?

 

React에서 자주 사용하는 패턴으로, 함수를 상수로 선언하여 컴포넌트를 정의한 것입니다.

코드의 구조

const MyChildrenSub = ({width, height, children}) => { ... }

위 코드는 화살표 함수를 사용한 React 함수형 컴포넌트입니다.

상수와 함수의 관계

• const는 변수를 재할당하지 못하게 고정하는 키워드입니다.
• 하지만 const로 선언된 변수의 값이 함수일 경우, 함수 내부의 로직은 실행될 수 있습니다.
• 즉, MyChildrenSub는 상수로 선언된 함수이며, MyChildrenSub()를 호출하면 이 함수가 실행됩니다.

React에서 함수형 컴포넌트란?

React 컴포넌트는 크게 두 가지 형태로 작성할 수 있습니다:

1. 클래스형 컴포넌트 (이전 방식)
2. 함수형 컴포넌트 (현대 React의 권장 방식)

여기서 사용된 함수형 컴포넌트는 단순히 props를 받아서 JSX를 반환하는 함수입니다. 이 함수는 다음과 같은 특징을 가집니다:

• React가 이 함수를 호출하여 반환된 JSX를 렌더링합니다.
• ({width, height, children})는 구조 분해 할당을 사용하여 props 객체에서 필요한 속성을 바로 꺼내온 것입니다.

---

정리

const MyChildrenSub는 상수로 선언된 함수형 컴포넌트이며, React의 현대적인 컴포넌트 작성 방식입니다.

 

React에서 함수형 컴포넌트를 사용하는 것이 가볍고 간결하기 때문에, 클래스형보다 더 자주 사용됩니다. 😊

 

 

 

Q2.

const MyChildrenSub 이렇게 함수를 선언하고 작성하는게 함수형 컴포넌트의 작성 방법인가?

 

 

 

A2.

네, **const MyChildrenSub**처럼 작성하는 방식은 함수형 컴포넌트의 작성 방법입니다. 이는 현대적인 React에서 가장 널리 사용되는 컴포넌트 작성 방식입니다. 함수형 컴포넌트는 React 16.8부터 도입된 Hooks와 함께 더욱 강력해졌고, 현재는 React의 권장 방식입니다.

---

함수형 컴포넌트란?

React 컴포넌트는 두 가지 방식으로 작성할 수 있습니다:

1. 클래스형 컴포넌트 (이전 방식)
2. 함수형 컴포넌트 (현대 방식, 권장)

함수형 컴포넌트는 단순히 props를 받아서 JSX를 반환하는 함수입니다. const, function 키워드로 작성할 수 있습니다.

---

const MyChildrenSub와 함수형 컴포넌트의 특징

const MyChildrenSub = ({ prop1, prop2 }) => {
    return (
        <div>
            <h3>Function Component</h3>
            <p>{prop1}</p>
            <p>{prop2}</p>
        </div>
    );
};

이 코드의 주요 특징:

1. ES6 화살표 함수 사용:
   • const MyChildrenSub = () => {}처럼 작성합니다.
   • 함수형 컴포넌트는 단순 함수이기 때문에 화살표 함수로 작성하는 경우가 많습니다.
2. props를 구조 분해 할당으로 받음:
   • 함수의 매개변수로 props를 받거나, 필요한 값을 구조 분해 할당으로 꺼냅니다.
   • 예: { prop1, prop2 }는 props.prop1, props.prop2를 꺼낸 것입니다.
3. JSX 반환:
   • 함수형 컴포넌트는 JSX를 반환합니다.
   • JSX는 HTML과 유사한 문법으로, React가 렌더링합니다.

---

클래스형 컴포넌트와의 비교

클래스형 컴포넌트는 ES6 클래스를 기반으로 작성되며, state와 lifecycle methods를 사용합니다.

클래스형 컴포넌트 예:

import React, { Component } from 'react';

class MyChildrenSub extends Component {
    render() {
        const { prop1, prop2 } = this.props;
        return (
            <div>
                <h3>Class Component</h3>
                <p>{prop1}</p>
                <p>{prop2}</p>
            </div>
        );
    }
}

왜 함수형 컴포넌트를 선호할까?

1. 간결함: 클래스 선언과 render() 메서드 없이도 컴포넌트를 쉽게 작성할 수 있습니다.
2. Hooks 지원:
   • useState, useEffect 같은 React Hooks를 사용해 상태와 라이프사이클을 관리할 수 있습니다.
3. 성능: 함수형 컴포넌트는 클래스형 컴포넌트보다 메모리 사용이 효율적입니다.
4. React의 권장 방식: React 개발팀도 함수형 컴포넌트 사용을 권장합니다.

---

현대적인 함수형 컴포넌트의 예

React Hooks를 사용한 함수형 컴포넌트 예제:

import React, { useState } from 'react';

const MyChildrenSub = ({ prop1, prop2 }) => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h3>Function Component with Hooks</h3>
            <p>{prop1}</p>
            <p>{prop2}</p>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
};

export default MyChildrenSub;

---

결론

const MyChildrenSub = () => {}와 같은 방식은 React 함수형 컴포넌트를 작성하는 방법입니다. 함수형 컴포넌트는 간결하고 React Hooks를 사용할 수 있어, 현재 React 개발에서 표준으로 자리 잡고 있습니다. 이 방식을 배우고 사용하는 것이 가장 현대적인 React 개발 방법입니다. 😊