• props 를 리액트 Component에 넘겨줄 수 있다.
• props는 컴포넌트가 실행되는 동안 유지해야하는 값이 있을 때 사용

🧑🏻‍🏫학습 목표

• App.js에서 Counter 컴포넌트로 값을 넘겨주고 넘겨받은 값으로 더하기 빼기를 실행하는 앱을 만들어보자

property 값에 접근하기

1. 기존방식으로 접근

App.js

function PlayingWithProps(properties){

  console.log(properties)
  console.log(properties.property1)
  console.log(properties.property2)
  
  return (
    <div>Props</div>
  )
}

• 매개변수로 properties 값을 받는다

function App() {
  return (
    <div className="App">
      <PlayingWithProps property1="value1" property2 = "value2"/>
      <Counter/>
      <Counter/>
      <Counter/>
     
    </div>
  );
}

• 객체 형태로 값이 나온다

function PlayingWithProps(properties){
  
  //console.log(properties)
  console.log(properties.property1)
  console.log(properties.property2)
  
  return (
    <div>Props</div>
  )
}

• text로 값이 나온다.

2. modern JS 방식으로 값 전달받기(React)

function PlayingWithProps({property1, property2}){
  
  
  console.log(property1)
  console.log(property2)
  
  return (
    <div>Props</div>
  )
}

• 중괄호 안에 키값을 넣어주기만 하면 됌

Counter.jsx

export default function Counter({by}){

    const [count, setCount] = useState(0); //[0, f]

    //console.log(by)

    function incrementCounterFunction(){
        //state[1](state[0]+1); //현재 상태 값을 가져와서 1을 더한 후, 그 값을 사용하여 상태를 업데이트(계속증가)
        setCount(count + by)
        console.log(count);
    }

    function decrementCounterFunction(){
        //state[1](state[0]+1); //현재 상태 값을 가져와서 1을 더한 후, 그 값을 사용하여 상태를 업데이트(계속증가)
        setCount(count - by)
        console.log(count);
    }

    return(
        <div className="Counter">
            <span className="count">{count}</span>
            <button className="counterButton" 
                    onClick={incrementCounterFunction}
                    >+{by}</button>
            <button className="counterButton" 
                    onClick={decrementCounterFunction}
                    >-{by}</button>
            
        </div>
    )

/*
    요소에서 바로 정의
    return(
        <div className="Counter">
            <span className="count">0</span>
            <button className="counterButton" 
                    onClick={incrementCounterFunction}
                    style={{fontSize:"100px"}}
                    >+1</button>
        </div>
    )
*/
}

• by 를 매개변수로 받아오고 함수와 html을 고쳐준다

props의 기본 설정

Counter.prototype = {
    by: prototype.number
}

Counter.defaultProps = {
    by : 1
}

• 텍스트가 아닌 숫자형으로 바꿔준다
• 기본설정을 1로 바꿔준다.

App.js

function App() {
  return (
    <div className="App">
      {/* <PlayingWithProps property1="value1" property2 = "value2"/> */}
      <Counter by={1}/>
      <Counter by={2}/>
      <Counter by={5}/>
      {/* 숫자를 추가하려면 중괄호 안에 넣어주어야 함 */}
     
    </div>
  );
}

• 매개변수로 숫자를 넣어줄때는 중괄호 안에 넣어주어야 한다!!