컴포넌트가 화면에 표시되는 과정은 다음의 3단계로 이루어집니다.  1. 렌더링 트리거렌더링은 React에서 컴포넌트를 호출하는 것입니다. 이러한 렌더링은 다음 두 경우에서 트리거됩니다. (1) 컴포넌트의 초기 렌더링인 경우createRoot()에 화면에 보일 DOM 노드(루트 노드)를 인수로 넣어 호출 -> 객체에 할당할당된 객체로 render() 메서드를 호출 -> 렌더링 트리거import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'))root.render(); (2) 컴포넌트의 state가 업데이트된 경우set 함수를 통해 state를 업데이트하여 추가적인 렌더링을 트리거합니다...

컴포넌트가 상호 작용의 결과로 화면의 내용을 변경해야 할 때(렌더링해야 할 때)가 있습니다. 이때 필요한 데이터를 저장하는 컴포넌트별 메모리를 State라고 합니다. 왜 이 데이터를 일반 변수에 저장하지 않을까요? 일반 변수(지역 변수)는 렌더링 간에 유지되지 않고, 변수를 변경해도 렌더링이 일어나지 않기 때문입니다. 때문에 저희는 컴포넌트를 새로운 데이터로 업데이트하기 위해 useState 훅을 사용합니다. useState처럼 "use"로 시작하는 모든 함수는 훅(hook)이라고 부릅니다. 훅의 특징은 다음과 같습니다.React가 렌더링 중일 때만 사용할 수 있는 함수입니다.  컴포넌트의 최상위 또는 커스텀 훅에서만 호출할 수 있습니다. useState 훅은 우리가 필요한 두 가지 기능을 제공합니다. ..

이벤트 핸들러란 무엇일까요? 사용자 상호작용에 따라 실행되는 사용자 정의 함수 입니다. 이를 사용하기 위해서 다음 단계를 거칩니다. 1. 사용할 함수를 컴포넌트 내에 선언한다.2. 함수 내부 로직을 구현한다.3. JSX의 onClick 속성에 함수를 추가한다.  이러한 이벤트 핸들러에는 중요한 특징이 몇가지 있습니다. 1. 컴포넌트 내부에서 선언합니다.따라서 이벤트 핸들러는 해당 컴포넌트의 prop에 접근할 수 있습니다.이벤트 핸들러를 선언할 때 JSX와 구분하거나, JSX 내에서 인라인으로 사용하거나, 화살표 함수를 사용할 수 있습니다. 2. "handle" 로 시작한 명명법이 일반적입니다.  3. 이벤트 핸들러로 전달한 함수들은 호출이 아닌 "전달"입니다.만약 과 같이 괄호를 붙인다면, 렌더링 과정..