인라인 스타일리액트 jsx 안에 style 프로퍼티로 스타일을 정의하는 것.장점동적 스타일링 용이 : state를 활용해 스타일을 다르게 주고 싶을 때 쉽게 조정 가능스코핑 자동화 : 인라인 스타일은 해당 컴포넌트에 직접 적용되므로 스타일의 충돌을 걱정할 필요가 없다.추가 설정 불필요 : CSS 파일을 별도로 관리하거나 로드할 필요가 없다.단점성능 이슈 : external CSS와 달리 별도의 컴파일 및 축소된 CSS 파일을 사용하지 않기 때문에 HTML 문서의 큰 부분을 차지하여 로드 시간이 늘어날 수 있다. 각 컴포넌트 인스턴스마다 스타일이 복제되어 DOM 요소가 많은 페이지에서는 성능 저하를 초래할 수 있다.재사용성 제한 : 같은 스타일을 여러 컴포넌트에서 사용하고 싶은 경우, 각 컴포넌트에 동일한..

(참고 : https://react-ko.dev/learn/render-and-commit) 리액트의 렌더링이란? 리액트에서 컴포넌트를 호출하는 것. 컴포넌트는 언제 렌더링되는가? 처음 화면에 등장할 때(초기 렌더링) 첫 렌더링에서 리액트는 루트 컴포넌트를 호출. 컴포넌트의 state가 업데이트되었을 때 이 경우 리액트는 state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트를 호출. 렌더링은 재귀적이다. 만약 렌더링되는 컴포넌트가 다른 컴포넌트를 반환할 경우, 리액트는 다음으로 해당 컴포넌트를 렌더링하며, 이는 중첩된 컴포넌트가 더 이상 없거나 리액트가 화면에 표시될 내용을 정확히 알 때까지 계속됨 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트도 렌더링된다. 리액트의 커밋이란? 컴포넌트의 렌더링 이..