React와 컴포넌트

앞에서 HTML, CSS, JavaScript를 배웠습니다. 이 세 가지를 효율적으로 조합해서 웹사이트를 만드는 도구가 바로 React입니다.

React란?

React는 페이스북(현 메타)에서 만든 웹사이트 제작 도구입니다. 전 세계에서 가장 많이 사용되는 도구 중 하나입니다.

React의 핵심 아이디어는 컴포넌트(Component)입니다.

컴포넌트를 가장 쉽게 이해하는 방법은 레고 블록에 비유하는 것입니다.

레고로 집을 만들 때, 하나의 거대한 덩어리로 만들지 않잖아요? 지붕 블록, 벽 블록, 문 블록, 창문 블록을 각각 만들어서 조립합니다.

웹사이트도 마찬가지입니다:

이렇게 만들어둔 블록(컴포넌트)을 조합하면 하나의 웹페이지가 완성됩니다.

왜 이렇게 나눠서 만들까요? 한 번에 만들면 안 될까요?

카드 컴포넌트를 한 번 만들어두면, 메뉴 페이지에서 커피 카드 5장, 디저트 카드 3장을 같은 블록을 재사용해서 만들 수 있습니다. 디자인을 바꾸고 싶으면 카드 컴포넌트 하나만 수정하면 됩니다.

마치 레고 블록 하나를 바꾸면 그 블록이 쓰인 곳이 전부 바뀌는 것과 같습니다.

우리가 이 코스에서 사용하는 것은 정확히는 Next.js입니다. Next.js는 React에 편리한 기능을 추가한 도구입니다.

Next.js의 가장 편리한 점은 파일이 곧 페이지라는 것입니다:

폴더를 만들고 그 안에 page.tsx 파일을 넣으면 자동으로 새 페이지가 생깁니다. 별도의 설정이 필요 없습니다.

.tsx는 TypeScript + React를 합친 파일 형식입니다. 이름이 낯설어도 걱정하지 마세요. AI가 이 파일을 자동으로 만들어 줍니다.

React와 컴포넌트를 알면 AI에게 이렇게 요청할 수 있습니다:

"헤더 컴포넌트를 만들어줘. 왼쪽에 로고, 오른쪽에 메뉴 세 개."

"메뉴 카드 컴포넌트를 만들어줘. 사진, 이름, 가격이 보여야 해."

"about 페이지를 추가해줘."

"컴포넌트", "페이지", "헤더", "카드" 같은 용어를 사용하면 AI가 더 정확하게 이해합니다.