리액트(React)는 페이스북이 만든 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리입니다.
하지만 이렇게 말해도 아직 감이 안 올 수 있어요. 그래서 차근차근 풀어볼게요.

---

👀 웹사이트는 어떻게 동작할까?

웹사이트는 기본적으로 아래와 같은 흐름으로 동작해요:

1. 사용자가 버튼을 누른다
2. 화면의 어떤 내용이 바뀐다
3. 이걸 위해 HTML/CSS/JavaScript가 협력한다

여기서 문제가 생깁니다.

• 버튼을 누를 때마다 화면을 직접 조작(DOM 조작) 해야 해요.
• 상태가 많아질수록 코드가 복잡해지고 실수하기 쉬워요.

---

😓 전통적인 방식

• 사용자가 버튼을 누름
• JavaScript가 직접 <div>의 텍스트를 바꿔줌
• 여러 개의 상태를 일일이 추적해야 함

---

🎉 그래서 나온 게 리액트!

리액트는 이걸 훨씬 깔끔하고 효율적으로 처리할 수 있게 해줘요.

• 데이터(state)가 바뀌면
• 리액트가 자동으로 UI를 다시 그려줘요

“데이터 중심”으로 UI를 만드는 방식이라고 생각하면 돼요.

---

🔁 비유로 이해해보자

리액트를 처음 배우는 사람에게 가장 좋은 비유는 ‘자동 계산기’예요.

• 계산기에 숫자를 입력하면 자동으로 결과가 갱신되죠?
• 우리가 버튼을 누를 때마다 결과를 다시 계산할 필요는 없어요.
• 리액트는 화면도 이렇게 자동으로 다시 계산해주는 도구예요.

---

🧩 리액트의 핵심 요소 3가지

리액트는 크게 아래 3가지로 구성돼요:

요소	설명
컴포넌트 (Component)	재사용 가능한 UI 조각
상태 (State)	변할 수 있는 데이터
렌더링 (Rendering)	데이터를 기반으로 화면을 그리는 일

---

📦 간단한 예제 코드

function Welcome() {
  return <h1>안녕하세요, React!</h1>;
}

이건 “Welcome”이라는 이름의 컴포넌트를 정의한 거예요.
<Welcome />이라고 쓰면 화면에 “안녕하세요, React!”가 나타나죠.

👉 마치 내가 HTML 태그를 새로 만든 것처럼 쓸 수 있어요.

---

1. 사용자 입력 →
2. 상태(state)가 바뀜 →
3. 리액트가 새로운 UI를 계산 →
4. 화면이 자동으로 업데이트됨

이 모든 걸 리액트가 자동으로 해주는 게 핵심이에요.

---

✅ 정리

• 리액트는 데이터 중심으로 UI를 만드는 도구예요.
• 복잡한 화면도 더 예측 가능하고 효율적으로 만들 수 있어요.
• 컴포넌트와 상태를 기반으로 작동하며, 변화에 따라 UI를 다시 그려줘요.