프로그래밍 언어와 프레임워크
리액트(React)
리액트(React)은(는) 바이브 코딩 중 자주 마주치는 핵심 개념입니다. 정의만 외우기보다 실제 작업 흐름에서 어떤 역할을 하는지 이해하는 것이 중요합니다.
쉬운 설명
화면을 컴포넌트 단위로 만드는 자바스크립트(JavaScript) 라이브러리.
배경과 쓰임까지 이해하기
조금 더 자세히
리액트(React)는 웹 화면을 작은 컴포넌트 단위로 나누어 만드는 자바스크립트(Javascript) 라이브러리입니다. 보통 웹앱 화면은 버튼, 검색창, 카드, 목록, 모달처럼 반복되는 조각이 많습니다. 리액트(React)를 쓰면 이런 조각을 따로 만들고 조합해서 화면을 구성할 수 있습니다.
예를 들어 검색 UI, 대시보드 카드, 로그인 폼, 댓글 목록, 관리자 화면, 인터랙티브 도구 등을 만들 때 자주 사용됩니다. 같은 화면 요소를 여러 곳에서 재사용하기 좋지만, 상태 관리가 복잡해지면 구조를 잘 나눠야 합니다. 한마디로, 리액트(React)는 웹 화면을 재사용 가능한 조각으로 만드는 도구입니다.
실제로는 이렇게 만나요
검색창은 `SearchInput`, 용어 카드는 `TermCard`, 전체 목록은 `DirectorySection`처럼 작은 조각으로 나눌 수 있습니다.
- 이런 거 할 때 나와요 AI에게 화면을 만들어달라고 하면 리액트(React) 컴포넌트 형태로 결과가 나오는 일이 많습니다. 컴포넌트 구조를 이해하면 AI가 만든 코드를 고치기 쉬워집니다.
- 이렇게 생겼어요 리액트(React)은(는) JavaScript, TypeScript, Next.js 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 프로그래밍 언어와 프레임워크 작업을 하다가 JavaScript, TypeScript, Next.js를 확인하는 화면
헷갈리기 쉬운 점
상태가 어디에 있어야 하는지 정하지 않으면 컴포넌트가 복잡해집니다. 표시만 하는 컴포넌트와 상태를 관리하는 컴포넌트를 구분하세요.
왜 알아두면 좋을까요?
AI에게 화면을 만들어달라고 하면 리액트(React) 컴포넌트 형태로 결과가 나오는 일이 많습니다. 컴포넌트 구조를 이해하면 AI가 만든 코드를 고치기 쉬워집니다.
Checklist
실제로 볼 때 확인할 것
- 01
컴포넌트 이름이 역할을 설명하는지 본다
- 02
props가 너무 많아지면 분리한다
- 03
반복 UI는 데이터 배열로 렌더링한다