props : 부모 컨포넌트의 속성, 변수값을 자식에게 전달[자신감up 실습4]

• 문자열을 전달할 때: name="문자열"과 같이 큰따옴표(" ")를 사용합니다.
• JavaScript 표현식을 전달할 때: name={표현식}과 같이 중괄호({ })를 사용합니다.

props 역할

1. 데이터 전달: 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전달할 수 있습니다. 이 데이터는 문자열, 숫자, 객체, 배열, 함수 등 다양한 형태가 될 수 있습니다.
2. 읽기 전용: props는 자식 컴포넌트에서 읽기 전용입니다. 즉, 자식 컴포넌트 내에서 props의 값을 직접 변경할 수 없습니다. 이는 React의 단방향 데이터 흐름 원칙을 따르는 것입니다.
3. 재사용성 증가: props를 사용하면 동일한 자식 컴포넌트를 다양한 데이터로 여러 번 재사용할 수 있습니다. 부모 컴포넌트에서 다른 props를 전달함으로써, 자식 컴포넌트는 다른 상황에서도 사용될 수 있습니다.

각 컴포넌트의 변화는 서로에게 영향x 

---

구현결과

구현 결과: 각 컴포넌트의 변화는 서로에게 영향x

 

---

제출해보려한 코드

 

처음 내가 생각한 것은 아이의 값을 부모로 올리는 건 힘드니까, 부모에서 함수를 만들어서 아이에게 보내는 방식으로 만들려 했는데 잘 모르겠음.

import './App.css'

import React, { useState } from 'react'

function Child(props) {

  const [papaMoney, setPapaMoney] = useState(0);

  const [money, setMoney] = useState(0);

  const getMoney = () => {

    setMoney(money + 5);

  }

  return (

    <div className='Child'>

      <h1>여기는 Child인 {props.name} 앱 입니다.</h1>

      <button onClick={getMoney}>용돈 받기</button>

      <p>용돈을 {money}만큼 받았습니다.</p>

      <hr/>

    </div>

  )

};

function App() {

  const [papaMoney, setPapaMoney] = useState(0);

  const getSalary = () => {

    setPapaMoney(papaMoney + 700);

  }

  const sendedMoney = () => { // 이게 자식 컴포넌트에 보낼 함수.

    setPapaMoney(papaMoney - )

  }

  return (

    <div className='App'>

      <h1>여기는 아빠 앱 입니다.</h1>

      <button onClick={getSalary}>아빠 월급날</button>

      <p>월급 계좌의 잔액은 {papaMoney}만원입니다.</p>

      <hr/>

      <Child name="제니"/>

      <Child name="아이유"/>

    </div>

  )

}

export default App

---

코드 정답

 

그냥.. 부모 컴포넌트의 값을 자식에게 그대로 물려주는...

대신 자식은 각각의 값만 props 하기 때문에 자식 컴포넌트의 값이 바뀌었다 해서, 자식2 컴포넌트의 값에 영향x

 

import './App.css'

import React, { useState } from 'react'

function Child(props) {

 

  const [money, setMoney] = useState(0);

  const getMoney = () => {

    setMoney(money + 5);

  }

  return (

    <div className='Child'>

      <h1>여기는 Child인 {props.name} 앱 입니다.</h1>

      <button onClick={getMoney}>용돈 받기</button>

      <p>용돈을 {money}만큼 받았습니다.</p>

      <p>아빠의 월급이 {props.papaMoney - money}만원 이겠군요.</p>

      <hr/>

    </div>

  )

};

function App() {

  const [papaMoney, setPapaMoney] = useState(0);

  const getSalary = () => {

    setPapaMoney(papaMoney + 700);

  }

  return (

    <div className='App'>

      <h1>여기는 아빠 앱 입니다.</h1>

      <button onClick={getSalary}>아빠 월급날</button>

      <p>월급 계좌의 잔액은 {papaMoney}만원입니다.</p>

      <hr/>

      <Child papaMoney={papaMoney} name="제니"/>

      <Child papaMoney={papaMoney} name="아이유"/>

    </div>

  )

}

export default App