react 5단계 핵심 개념

1. 컴포넌트 (Component): 레고 블록식 개발

React의 가장 큰 특징은 UI를 독립적이고 재사용 가능한 '레고 블록' 단위로 쪼개는 것입니다.

• 기존 방식: 하나의 거대한 HTML 파일에 모든 내용을 다 적음.
• React 방식: 헤더, 게시판 목록, 버튼 등을 각각의 파일(.js)로 만든 뒤 조립함.
• 장점: 한 번 만든 Button 컴포넌트를 사이트 곳곳에서 재사용할 수 있고, 수정할 때도 해당 파일만 고치면 됩니다.

---

2. JSX (JavaScript XML): JS 안의 HTML

React에서는 자바스크립트 파일 안에서 직접 HTML 태그를 작성합니다. 이것을 JSX라고 부릅니다.

• 특징: HTML처럼 보이지만 실제로는 자바스크립트입니다.
• 장점: 자바스크립트 변수를 HTML 태그 안에 바로 넣거나, 반복문(map)을 돌려 리스트를 만드는 작업이 매우 직관적입니다.

JavaScript

 

function Welcome() {
  const name = "사용자";
  return <h1>안녕하세요, {name}님!</h1>; // JS 변수를 바로 사용
}

---

3. Props & State: 데이터의 흐름

React 컴포넌트가 살아 움직이게 만드는 두 가지 핵심 데이터 개념입니다.

• Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 전달하는 '읽기 전용 데이터' (마치 함수에 인자를 전달하는 것과 같습니다).
• State (상태): 컴포넌트 '내부에서 변할 수 있는 값' (예: 입력창의 텍스트, 좋아요 클릭 수).
  • 핵심: State가 변경되면 React는 화면을 자동으로 다시 그립니다(Rendering). 우리가 직접 DOM을 조작할 필요가 없습니다.

---

4. 가상 DOM (Virtual DOM): 스마트한 업데이트

우리가 앞서 jQuery나 Vanilla JS로 게시판을 만들 때, 데이터가 바뀌면 innerHTML 등으로 화면을 직접 갈아끼웠습니다. 하지만 React는 다릅니다.

1. 데이터가 바뀌면 메모리에 **'가상 화면(Virtual DOM)'**을 먼저 그립니다.
2. 이전 화면과 비교해서 진짜 바뀐 부분이 어디인지 찾아냅니다.
3. 그 바뀐 부분만 실제 브라우저 화면에 업데이트합니다.

• 결과: 화면 깜빡임이 적고 성능이 매우 효율적입니다.

---

5. Hook (훅): 기능의 확장

과거에는 복잡한 클래스 문법을 써야 했지만, 이제는 Hook이라는 기능을 통해 함수형 컴포넌트에서도 모든 기능을 구현합니다.

• useState: 상태(State)를 만들고 관리할 때 사용.
• useEffect: 화면이 처음 나타날 때(Loding), 혹은 사라질 때 특정 동작(데이터 불러오기 등)을 수행할 때 사용.

---

💡 전체적인 맥락 요약 (Workflow)

1. 설계: 만들고 싶은 화면을 컴포넌트 단위로 쪼갭니다.
2. 구현: JSX를 사용해 각 컴포넌트의 모양을 만듭니다.
3. 데이터 정의: 변하지 않는 데이터는 Props로 넘기고, 변하는 데이터는 State로 정의합니다.
4. 반응: 사용자가 버튼을 눌러 State를 바꾸면, React가 가상 DOM을 통해 바뀐 부분만 화면에 다시 그려줍니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.