랜더링 과정(브라우저 랜더링, 리액트 랜더링)

브라우저 렌더링을

CS 옴트리에게 DOM 을 합쳐서 만든게 렌더 트리 → 로 렌더링을 그려주고 있다.

리액트 렌더링

가상 돔을 만들어서 최적화 한다.

createElment를 통해서 JS문법을 함수형 컴포넌트로 바꾸는

app.js가 최상위에

하위로 푸시되면서

함수나 값들을 전달해서 리액트 렌더링이 발생된다.

APP.tsx

상품을 조회하고 각 아이템을 클릭했을 때 어떤 정보인지 보여주는 함수

콘솔 같은 렌더링이랑 마지막 아이템을 보여주게 만들었다.