Props - 컴포넌트에 데이터를 전달하는 방법

IF) App 컴포넌트에서 Counter 컴포넌트에게 Counter의 초기 값을 0이 아닌 App 컴포넌트가 전달하는 값으로 쓰라는 명령을 내리고 싶다면? -->  Props이라는 명령어를 이용한다. 

초기 변수로 5 전달

부모 컴포넌트인 App 컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에게 어떤 값을 이름을 붙여 전달할 수 있다(Props) 

 

Counter 컴포넌트에서는 부모에서 내려준 props를 매개변수로 받아서 사용할 수 있다. 

import React, {useState} from 'react'; 


const Counter = (props) => {
    console.log(props);

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

const onIncrease = () => {
    setCount(count + 1); 
};

const onDecrease = () => {
    setCount(count - 1); 
};

    return (
        <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

객체 안에 담겨서 오게 된다. 

 

여기서 a = {1} 하나만 더 담아서 보내보자 ! 

props가 몇 개를 보내든 객체 안에 담겨서 오는 것을 확인할 수 있다. 

 

props를 Counter 컴포넌트에서 꺼내 쓰려면 점 표기법을 이용해서 사용할 수 있다. 

import React, {useState} from 'react'; 


const Counter = (props) => {
    console.log(props);

const [count, setCount] = useState(props.initialValue);

const onIncrease = () => {
    setCount(count + 1); 
};

const onDecrease = () => {
    setCount(count - 1); 
};

    return (
        <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

 

--> props을 여러 개 전달해도 잘 나오지만, <Counter a={1}, b={2}, c = {3} ,,,, 이런식으로 전달하면 너무 길고
보기가 불편하다. 이럴 때는 자식 컴포넌트에게 전달해야하는 props를 객체로 만든 후 객체를 

펼쳐서 전달하는 spread 연산자를 통해 전달해도 똑같은 결과를 확인할 수 있다. 

 

import React from 'react';
// import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter';

function App() {
  const number = 5;
  
  const counterProps = {
    a:1, 
    b:2, 
    c:3, 
    d:4,
    e:5,
    initialValue:5, 
  };

return (
  <div>
    <MyHeader />
    <Counter {...counterProps}/>
    </div>
  );
}

export default App;

 

그러면, 객체의 spread 연산자로 전달 했으니, 받는 쪽에서는 똑같이 객체로 받을 수 있으니 
비구조화 할당을 통해서 받을 수도 있다.  

 

비구조화 할당을 통해 이쪽 매개 변수로 전달 되는 props라는 객체에서 initialValue라는 값만 꺼내서 쓴 것 

 

IF) App.js의 counterProps에서 initialValue의 값이 누락되어 undefined 값이 전달되고, 버튼을 누르면 숫자가 아니라는 오류 발생 --> 명백한 bug! 

의도치 않게 undefined 값으로 전달될 것 같을 때를 방지하기 위한 방법

 

Props로는 자식 컴포넌트에게 정적인 데이터 뿐만아니라 동적인 데이터도 전달할 수 있다. 

-> State같은 것 

 

 

<count , State가 홀수인지 짝수인지 실시간으로 알려주는 기능>
OddEvenResult.js

React의 컴포넌트는 부모가 내려주는 Props가 변경 되면 다시 랜더해서 리랜더가 일어난다. 

 

 

<컴포넌트를 컴포넌트로 감싸서 미관상 여백주기>

Container.js

 

컴포넌트의 사이에 JSX요소를 배치하게 되면

컴포넌트 컨테이너에 자식으로 배치 된 

이 요소들은 컨테이너 컴포넌트의 children이라는 props으로 전달.

children을 값처럼 활용해서 div를 바깥에 감싸서 활용하는 것.