React 입문 - 부모 자식 비유

---

 

 

리액트에서 부모컴포넌트 자식컴포넌트는 부모가 열심히 일해서 벌어놓은 돈이나, 성실히 살아서 일군 성과들을 자식이 사용해 좋은 집에서 좋은 차를 타고 비싼밥 먹으며 다닌다고 생각하면 돼?

 

네, 리액트에서 부모 컴포넌트와 자식 컴포넌트의 관계를 설명하는 비유로 "부모가 열심히 일해서 벌어놓은 돈이나, 성실히 살아서 일군 성과들을 자식이 사용해 좋은 집에서 좋은 차를 타고 비싼 밥 먹으며 다닌다"고 하는 것은 적절한 비유입니다. 이 비유를 통해 부모 컴포넌트가 자식 컴포넌트에게 데이터를 제공하고, 자식 컴포넌트는 이를 활용하는 관계를 쉽게 이해할 수 있습니다.

리액트에서의 부모-자식 관계

1. 데이터 제공:
   • 부모 컴포넌트는 자신의 상태나 데이터를 관리합니다.
   • 부모 컴포넌트는 이 데이터를 props를 통해 자식 컴포넌트에게 전달합니다. 이는 부모가 자식에게 필요한 자원을 제공하는 것과 비슷합니다.
2. 데이터 활용:
   • 자식 컴포넌트는 부모로부터 받은 props를 사용하여 자신의 UI를 구성하고 동작을 수행합니다.
   • 자식 컴포넌트는 부모로부터 받은 데이터를 기반으로 자신의 기능을 수행합니다. 이는 자식이 부모의 자원을 사용하여 좋은 생활을 하는 것과 유사합니다.

 

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [resources, setResources] = useState({
    money: 1000,
    house: 'Big House',
    car: 'Luxury Car',
    food: 'Expensive Meals'
  });

  const spendMoney = (amount) => {
    setResources(prevResources => ({
      ...prevResources,
      money: prevResources.money - amount
    }));
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Money: ${resources.money}</p>
      <p>House: {resources.house}</p>
      <p>Car: {resources.car}</p>
      <p>Food: {resources.food}</p>
      <ChildComponent resources={resources} spendMoney={spendMoney} />
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent({ resources, spendMoney }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Living in: {resources.house}</p>
      <p>Driving: {resources.car}</p>
      <p>Eating: {resources.food}</p>
      <p>Money received from parent: ${resources.money}</p>
      <button onClick={() => spendMoney(100)}>Spend $100</button>
    </div>
  );
}

export default ChildComponent;

 

 

• 부모 컴포넌트: 부모 컴포넌트는 resources라는 상태를 관리하며, 이는 돈, 집, 차, 음식 등의 자원을 포함합니다. 부모는 spendMoney 함수를 통해 돈을 사용할 수 있습니다.
• 자식 컴포넌트: 자식 컴포넌트는 부모로부터 resources와 spendMoney 함수를 props로 받아옵니다. 자식은 부모가 제공한 자원들을 UI에 표시하고, 버튼을 클릭하여 돈을 사용할 수 있습니다.

 

 

이 비유를 통해

리액트의 부모-자식 컴포넌트 관계를 쉽게 이해할 수 있습니다.

 

부모 컴포넌트는 자원을 관리하고 자식 컴포넌트에게 제공하며,

자식 컴포넌트는 이 자원을 사용하여 자신의 기능을 수행합니다.

 

 

---

<데이터 흐름>

 부모

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ]);

  const addItem = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map(item => (
          <ChildComponent key={item.id} item={item} />
        ))}
      </ul>
      <ChildComponentAdd onAddItem={addItem} />
    </div>
  );
}

export default ParentComponent;

 

 

자식1

import React from 'react';

function ChildComponent({ item }) {
  return (
    <li>
      {item.name}
    </li>
  );
}

export default ChildComponent;

자식2

import React, { useState } from 'react';

function ChildComponentAdd({ onAddItem }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    const newItem = { id: Math.random(), name: inputValue }; // 새로운 아이템 생성
    onAddItem(newItem); // 부모의 addItem 함수 호출
    setInputValue(''); // 입력 필드 초기화
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSubmit}>Add Item</button>
    </div>
  );
}

export default ChildComponentAdd;

•  

1. 부모 컴포넌트 (ParentComponent):
   • items 상태를 관리합니다.
   • addItem 함수는 새로운 아이템을 items 배열에 추가합니다.
   • ChildComponentAdd에게 onAddItem 콜백 함수를 props로 전달합니다.
2. 아이템을 렌더링하는 자식 컴포넌트 (ChildComponent):
   • props로 받은 item을 사용하여 리스트 아이템을 렌더링합니다.
3. 새로운 아이템을 추가하는 자식 컴포넌트 (ChildComponentAdd):
   • onAddItem 콜백 함수를 호출하여 새로운 아이템을 부모 컴포넌트로 전달합니다.
   • 입력 필드와 버튼을 제공하여 사용자가 새로운 아이템을 추가할 수 있도록 합니다.

데이터 흐름

1. 부모에서 자식으로: 부모 컴포넌트는 자식 컴포넌트에 props를 통해 데이터를 전달합니다.
2. 자식에서 부모로: 자식 컴포넌트는 부모로부터 전달받은 콜백 함수를 호출하여 부모의 상태를 업데이트합니다.

이 패턴을 통해 자식 컴포넌트는 부모 컴포넌트의 상태를 간접적으로 변경할 수 있으며, 리액트의 단방향 데이터 흐름을 유지하면서도 상호작용을 구현할 수 있습니다.