[React] Props&Element&PrevState 원리

Props 원리

// 02-child.tsx

export default function ChildPage(props: any) {
  return <div>{props.count}</div>;
}



// 01-parent.tsx

import ChildPage from "./02-child";

export default function ParentPage() {
  return (
    <>
      <ChildPage count={15} />
      {ChildPage({ count: 123 })}
    </>
  );
}

// 함수형 컴포넌트는 그냥 함수와 같아요

Element 원리

// 콜백함수

function map(qqq) {
    const child1 = "짱구";
    const candy = 10;

    qqq(child1, candy)
    
}

const zzz = (a,b) => {
    console.log(`${a}는 사탕을 ${b}개 가지고 있습니다.`)
}

map(zzz) // 짱구는 사탕을 10개 가지고 있습니다.

prevState 원리

// 1. 화살표함수
setCount((prev) => prev + 1);

// 2. 함수 선언식
setCount(function (prev) {
	// 로직 추가 가능
	// if() 등
	// for() 등
	return prev + 1;
});

// 3. 매개변수 바꾸기
setCount((asdf) => asdf + 1);

prev도 매개 변수므로 안에 값은 변경이 가능하고 로직도 추가 가능해요