[리액트 React] 컴포넌트, 프롭스 (Component, props)

컴포넌트(Component)

• UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다
• React의 구성요소는 컴포넌트로 이루어져 있으며 헤더, 바디, 푸터 등. 벽돌을 쌓아 집을 만드는 것과 같다 (컴포넌트=벽돌) 
• React는 주로 함수형 컴포넌트를 사용하며 재사용이 가능한 개별적인 여러 조각으로 나눠 특정 기능 또는 UI를 구성한다 

* 명령형
어떻게(How)를 중요시 여기며 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태

* 선언형
무엇(What)을 중요시 여기며 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태

---

부모 - 자식 컴포넌트

• 컴포넌트는 다른 컴포넌트를 통해 호출하거나 값을 전달할 수 있다
• 부모 컴포넌트(App)를 호출하면 부모컴포넌트는 자식 컴포넌트(Child)를 호출(return)함으로 화면에는 "나는 자식입니다"라는 텍스트를 내보낸다

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

---

props 

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식 자식 컴포넌트는 props를 통해 임의의 입력을 받아 화면에 표현하거나 어떠한 동작을 수행할 수 있다
• 부모 > 자식 방향으로만 데이터 전달이 가능하다
• 반드시 읽기 전용으로 취급되므로 변경할 수 없다

props 전달 예시 코드

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  const name = 'John';

  return (
    <div>
      <h1>Parent Component</h1>
      
      // 자식 컴포넌트로 데이터와 함수 전달
      <ChildComponent name={name} handleClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

// 자식 컴포넌트
import React from 'react';

const ChildComponent = ({name, handleClick}) => {
  return (
    <div>
      <h2>Child Component</h2>
      // 부모 컴포넌트에게 받은 데이터를 화면에 표시
      <p>Hello, {name}!</p>
      
      // 부모 컴포넌트에게 받은 함수 호출부분
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default ChildComponent;

* props
함수형 컴포넌트의 매개변수와도 같다 부모컴포넌트에서 자식컴포넌트가 전달받아 사용하며 자식은 부모에게 값을 줄 수 없다
 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 propsName(변수명과 같이 아무 이름이나 상관없음)={전달할 props }
자식 컴포넌트에서 값을 받을 때는 객체 형태로 받아야 한다 {부모 컴포넌트에서 보내준 propsName }
함수, 데이터 등 다양한 형태로 전달이 가능하다
함수 : 부모 컴포넌트에서 자식컴포넌트로 콜백함수를 props로 전달하여  자식 컴포넌트에서 함수 호출이 가능하다 

---

Props Children

• 자식컴포넌트로 정보를 전달하는 다른 방법, 이름은 children으로 정해져 있다
• 부모컴포넌트의 태그 사이에 있는 내용을 자식 컴포넌트에서 렌더링 할 수 있다
• props.children을 사용하면 부모 컴포넌트와 자식 컴포넌트 간의 중첩 구조를 만들거나 컴포넌트를 더 유연하게 재사용할 수 있다

중첩 props.children 예시코드

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <h1>Parent Component</h1>
      
      // 자식 컴포넌트를 호출하며 사이에 있는 p태그를 props로 전달한다
      <ChildComponent>
        <p>This is child component content.</p>
        <ChildComponent>
          <p>This is nested child component content.</p>
        </ChildComponent>
      </ChildComponent>
    </div>
  );
};

export default ParentComponent;

export default ParentComponent;

// 자식 컴포넌트
import React from 'react';

const ChildComponent = ({children}) => {
  return (
    <div>
      <h2>Child Component</h2>
      
      // 부모 컴포넌트에서 받은 children
      {children}
    </div>
  );
};

export default ChildComponent;

 

실행 결과
Parent Component
Child Component
This is child component content.
Child Component
This is nested child component content.

1. 부모 컴포넌트의 <h1>Parent Component</h1> 가 먼저 렌더링되며 출력된다
2. 이후 첫 번째 ChildComponent가 렌더링되어 자식 컴포넌트의  <h2>Child Component</h2> 가 출력된다
3. 부모 컴포넌트에서 ChildComponent을 중첩 사용했음으로 첫 번째 props.children 에는 <p>This is child component content.</p> 가 포함되어있음으로 먼저 출력한다
4. 두 번째 props.children 를 출력하기 전 자식 컴포넌트의 <h2>Child Component</h2> 를 먼저 출력 후 <p>This is nested child component content.</p> 를 출력한다

---

 

 

defaultProps

• 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값

defaultProps  예시코드

import React from 'react';

const MyComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

MyComponent.defaultProps = {
  name: 'Guest' // 부모컴포넌트에서 name props가 주어지지 않으면 기본값으로 'Guest'를 사용한다
};

export default MyComponent;