React - 부모, 자식 관계

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
let AppCallCount = 0;
let SubCallCount = 0;

const Sub = () => {
	SubCallCount++;
	console.log(`Sub ${SubCallCount}번 실행됨`);

	const [no, setNo] = useState(0);

	return (
		<>
			<button onClick={() => setNo(no + 1)}>Sub 버튼 : {no}</button>
		</>
	);
};

const App = () => {
	AppCallCount++;
	console.log(`App ${AppCallCount}번 실행됨`);

	const [no, setNo] = useState(0);

	return (
		<>
			<div style={{ border: "5px solid red", padding: 10 }}>
				<Sub />
				<hr />
				<button onClick={() => setNo(no + 1)}>App 버튼 : {no}</button>
			</div>
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• App 안에 Sub가 있는 구조 Sub이 App의 자식이라고 보면 된다
• 특징) 자식 안에서 리랜더링되면 부모 컴포넌트에 영향을 안주는데 부모가 리랜더링되면 자식에게도 영향을 준다!
• 그래서 위에 코드처럼 실행하면
  • App 버튼 클릭 시에는 console.log(`App ${AppCallCount}번 실행됨`),console.log(`Sub ${SubCallCount}번 실행됨`) 이 모두 실행되고 
  • Sub 버튼 클릭 시에는 console.log(`Sub ${SubCallCount}번 실행됨`)만 실행되는거지~