Props이용해 컴포넌트간 데이터 전달

우선 기본으로 들어갈 데이터를 배열로 만들어주자..

이 친구는 App.js안에 만들어준다.

class App extends Component {
  initailExpenses = [
    { id: 1, charge: "점심값", amount: 12000 },
    { id: 2, charge: "교통비", amount: 1500 },
    { id: 3, charge: "커피값", amount: 1400 },
  ];

  render() {

이 데이터는 ExpenseItem.js에서 사용해야 한다. ExpenseItem.js는 App.js의 자식 컴포넌트인 ExpenseForm.js의 자식으로 있다…

이렇게 자식의 자식으로 전달하려면 리액트에선 Props라는 객체를 이용한다.

Props란?

Properties의 준말로, 객체이다.

리액트에선 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달할때 Props객체를 사용한다.

Props는 자녀 입장에선 읽기 전용 객체이다.(immutable하다.) 따라서 자녀 컴포넌트가 props를 받아서 값을 변경할 수 없다.

변경하려면 부모가 전달하기 전에 미리 상태를 변경시켜 놓고 전달해야 한다…

지피티는 이렇게 이야기함.

props는 리액트(React)에서 주로 사용되는 개념이지만, 리액트에만 국한되지 않습니다. props는 "properties"의 줄임말로, 자바스크립트 라이브러리 및 프레임워크에서 컴포넌트 간의 데이터 전달을 위해 사용되는 일반적인 개념입니다. 그러나 props라는 용어와 그 사용 방식은 리액트에서 널리 알려지고 사용되기 시작했습니다.