React - 예산 계산기 앱 만들기 | Props(컴포넌트 간 데이터 전달), map(지출 목록 나열)

부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달할 때 !

Props

- Properties의 줄임말

- Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법

- Props는 읽기 전용(immutable)으로 자녀 컴포넌트에서는 데이터를 변경할 수 없음 (읽기만 할 수 있음)

(변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 함)

 

 

 

 

 

App.js

initialExpenses = [
    { id: 1, charge: "렌트비", amount: "1600" },
    { id: 2, charge: "교통비", amount: "400" },
    { id: 3, charge: "식비", amount: "1200" },
  ];

<ExpenseList initialExpenses={this.initialExpenses} />
{/* expenseList로 데이터를 내려줌 */}

1. <ExpenseList ... />:
• ExpenseList는 다른 컴포넌트를 의미합니다.
• 이 컴포넌트를 JSX 문법을 사용하여 렌더링합니다.

2. initialExpenses={this.initialExpenses}:
• initialExpenses는 props로 전달될 속성 이름입니다.
• {this.initialExpenses}는 initialExpenses 속성에 전달될 데이터입니다.
• this.initialExpenses는 현재 컴포넌트 클래스의 initialExpenses 속성을 참조합니다.

 

ExpenseList.js

export class ExpenseList extends Component {
  render() {
    console.log(this.props.initialExpenses);

두 번 나오는 건 <React.StrictMode> 때문임. 없애면 한번만 나옴

{this.props.initialExpenses.map((expense) => {
            return <ExpenseItem expense={expense} key={expense.id} />;
          })}

리스트들에 고유한 key 값을 주면 에러가 해결됨. (id값으로 1,2,3 --> 고유한 값으로 리스트들에 하나씩 할당해주면 됨)

만약 이 리스트들이 중간에 삭제되거나 중간에 삽입되는 케이스가 있다면 index값을 key값으로 주면 안되고

실질적인 고유한 값을 줘야 하지만 여기서는 중간에 삭제, 삽입되는 경우가 없으므로 index 값으로 !

 

map() 메소드

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

 

ExpenseList.js

 {this.props.initialExpenses.map((expense) => {
            return <ExpenseItem expense={expense} />;
          })}

1. this.props.initialExpenses:

• 부모 컴포넌트로부터 전달받은 initialExpenses라는 배열입니다.

• 이 배열에는 여러 지출 항목 객체들이 들어 있습니다.

• 예: [{ id: 1, charge: '렌트비', amount: 1000 }, { id: 2, charge: '커피', amount: 5 }]

2. .map((expense) => { ... }):

• map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다.

• 여기서 map 함수는 initialExpenses 배열의 각 항목(expense)에 대해 아래 함수를 실행합니다.

3. (expense) => { return <ExpenseItem expense={expense} />; }:

• 이 함수는 expense 객체를 받아서 JSX를 반환합니다.

• expense는 initialExpenses 배열의 각 항목입니다.

4. <ExpenseItem expense={expense} />:

• ExpenseItem이라는 컴포넌트를 생성합니다.

• expense라는 prop을 ExpenseItem 컴포넌트에 전달합니다.

• 예: expense 객체가 { id: 1, charge: '렌트비', amount: 1000 }인 경우, 이 데이터를 ExpenseItem 컴포넌트에 전달합니다.

 

 

 

ExpenseItem.js

<span className="expense">{this.props.expense.charge}</span>
<span className="amount">{this.props.expense.amount}</span>

 

1. this.props.expense:

• props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.
• expense는 props로 전달된 객체입니다. 이 객체는 지출 항목의 정보를 포함하고 있습니다.
• 예를 들어, expense 객체는 { charge: "렌트비", amount: 1000 }와 같은 형태일 수 있습니다.

2. <span className="expense">...</span>:

• <span> 요소는 HTML의 인라인 요소입니다. 텍스트를 그룹화하는 데 사용됩니다.
• className="expense": 이 <span> 요소에 expense라는 CSS 클래스를 적용합니다. 이를 통해 스타일을 지정할 수 있습니다.
• {this.props.expense.charge}: 중괄호 {}를 사용하여 JavaScript 표현식을 삽입합니다.
• this.props.expense.charge는 expense 객체의 charge 속성 값을 가져와서 표시합니다.
• 예를 들어, expense.charge가 “렌트비”라면, 이 부분은 “렌트비”라는 텍스트를 화면에 표시합니다.

3. <span className="amount">...</span>:

• <span> 요소는 HTML의 인라인 요소입니다. 텍스트를 그룹화하는 데 사용됩니다.
• className="amount": 이 <span> 요소에 amount라는 CSS 클래스를 적용합니다. 이를 통해 스타일을 지정할 수 있습니다.
• {this.props.expense.amount}: 중괄호 {}를 사용하여 JavaScript 표현식을 삽입합니다.
• this.props.expense.amount는 expense 객체의 amount 속성 값을 가져와서 표시합니다.
• 예를 들어, expense.amount가 1000이라면, 이 부분은 “1000”이라는 텍스트를 화면에 표시합니다.

 

 

전체 과정

1. 부모 컴포넌트(App.js)에서 initialExpenses 배열을 ExpenseList에 전달합니다.

2. ExpenseList 컴포넌트는 initialExpenses 배열을 순회하며 각 항목에 대해 ExpenseItem 컴포넌트를 생성하고 렌더링합니다.

3. 각 ExpenseItem 컴포넌트는 개별 지출 항목을 화면에 표시합니다.