React props에 관하여

React에서 props를 전달하는 방법

기본적으로 react에서는 props는 객체로 전달한다. spread 형태로 객체를 펼쳐서 전달 할 수도 있고 부모 컴퍼넌트에서 객체를 생성하여 객체로 전달 할수도 있다.
spread를 사용하여 값으로 전달하는 방식 객체의 object.asign()으로값을 전달하는 방식이다.

function App() {
  const countProps = {
    a:1,
    b:2,
    c:3,
  }
// spread연사를 사용하여 객체를 펼쳐서 값을 전달한다. 사용하는 counterprops를 사용해도 된다.
  return(
   		 <div>
        	<Counter {...countProps}/>
			<Counter countProps={countProps}/>
      	 </div>
		);
	}

export default App;

객체에서 특정 값만 뽑아쓴다. 비구조할당 만약 객체에 이름 이없으면 undefined 값이 할당이 된다.기존 객체의 점표기법으로도 사용이 가능하다.default props를 통해 빠진 Props를 방지 할 수 있다.

import {useState } from "react";
import OddEvenResult from "./OddEvenResult";
const Counter =  ({init})=>{// or (porps)
    //props.member형태로도 사용이 가능하다.
    console.log('리렌더링');
    const [count,setCount] = useState(()=>init);
    const onIncrese = ()=>{
        setCount(count+1);
    }
    const onDecrease = ()=>{
        setCount(count-1);
    }
    return(
        <div style={{backgroundColor:"yellow"}}>
            <h2>{count}</h2>
        <button onClick={onIncrese}>버튼</button> 
        <button onClick={()=>onDecrease()}>버튼</button> 
        <OddEvenResult count={count}/>
        </div>

    );
}

Counter.defaultProps = {
    init:0
}// 기본값 설정을 통해 빠진 Props를 방지 할 수 있다.


export default Counter;

1.자신 컴퍼넌트의 상태가 바뀌어도 렌더링 된다.
2.동적인 데이터가 props를 통해 다시 전달 받게 되면 다시 렌더링 된다.
3.부모 요소가 리렌더링이 되면 자식 요소도 리렌더링이 된다.

const OddEvenResult =({count})=>{
    // 내자신이 바뀌어도 리렌더링 된다.
    // 동적인 데이터를 props를 사용하여 다시 렌더가 된다.
    // 부모 요소가 리렌더링이 되면 자식 요소도 리렌더링이 된다.

    
    return(
        <>{1 %2 ===0? "짝수":"홀수"}</>
    )
};

export default OddEvenResult;