내눈내확 state변경과정

내 눈으로 직접 확인해보기로 했다. useEffect를 공부하는데 부모 state가 바뀌면 자식도 바뀐다는데 어떤 순서로 바뀌나 한번 확인해보기로 했다. 그래 맞다. 이것이 바로 노가다다.

예쁜걸 좋아하는 나는 간격없고 기본 버튼이 그대로 있는 꼴을 못보기 때문에 css 를 무적권 넣어야한다. 시간이 더 걸린다. 안그래도 시간이 걸리는데 더 걸린다. 어쩔수없다. 예쁜게 좋으니까 어쩔수없다. ㅎ

컴포넌트 구조

최상위 컴포넌트 App.js => Parent에 Props로 number 전달
plus minus 누르면 state변경

//App.js 
export default function App() {
  const [number, setNumber] = useState(0);
  return (
    <div>
     {console.log('App Rendering')}
      <h1>{number}</h1>
      <button onClick={() => setNumber(number+1)}>Plus</button>
      <button onClick={() =>setNumber(number-1)}>Minus</button>
      <Parent number={number} />
    </div>
  );
}

Parent.jsx => Children에 Props로 name전달
Change 누르면 state변경

const Parent = ({ number }) => {
  const [name, setName] = useState("Judy");
  const handleClick = () =>
    name === "Judy" ? setName("Bob") : setName("Judy");
  return (
     {console.log('Parent Rendering')}
    <div className="container">
      <h1>
        This is Parent Section <button onClick={handleClick}>Change</button>{" "}
      </h1>
      <h2>This is App's Props : {number}</h2>
      <Children name={name} />
    </div>
  );
};
export default Parent;

Children.jsx

const Children =({name}) =>{
  return(
    <div className="container">
     {console.log('Children Rendering')}
          <h1>This is Children Section</h1> 
          <h2>This is Parent's props :  {name}</h2>
          <GrandChildren / >
    </div>
  )
}
export default Children;

GrandChildren.jsx

const GrandChildren=() => {
  return (
    <div className="container">
     {console.log('GrnadChildren Rendering')}
          <h1>This is GrandChildren Section</h1>
    </div>
  )
}

export default GrandChildren;

실행 직 후 rendering 결과

App state 변경

Parent state 변경

랜더링 겁나많이 됨. 그래서 useEffect 필요.