한눈에 보는 정의
화면을 컴포넌트라는 작은 조각으로 나눠 만들고, 데이터가 바뀌면 필요한 부분만 다시 그려 주는 자바스크립트 라이브러리.
이런 말로 들어요
- 상담 카드는 React 컴포넌트로 만들어서 페이지마다 재사용해요.
- 이 화면은 상태가 안 바뀌어서 다시 안 그려지는 문제예요.
그림으로 보기
React는 화면을 컴포넌트로 나눠 재사용하고, 데이터가 바뀐 부분만 다시 그립니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
React로 만들면 버튼, 카드, 메뉴 같은 화면 조각(컴포넌트)을 한 번 만들어 여러 곳에서 다시 씁니다. 장바구니 수량처럼 데이터(상태)가 바뀌면 React가 그 부분의 화면을 알아서 새로 그립니다. Next.js 같은 프레임워크가 React 위에서 동작하고, 바이브코딩 도구가 만드는 웹 화면도 React 기반인 경우가 많습니다. 처음 볼 때는 HTML과 비슷하게 생긴 JSX 문법이 낯설 수 있습니다.
실무 예시
예를 들어 "후기 카드" 컴포넌트를 하나 만들어 두면 이름·별점·문장만 바꿔 메인, 서비스, 사례 페이지에 같은 모양으로 반복해서 넣을 수 있습니다.
함께 살펴볼 점
React는 화면을 그리는 도구라 저장·로그인·결제 같은 기능은 서버나 다른 서비스가 필요합니다. 단순한 소개 페이지에 무거운 구조를 쓰면 오히려 관리가 복잡해질 수 있습니다.
AI에게 이렇게 요청해 보세요
후기 카드 React 컴포넌트를 만들어 줘. 이름·별점·문장·날짜를 props로 받고, 별점은 화면 낭독기가 "5점 만점에 4점"처럼 읽게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Quick Start - React 새 창
컴포넌트 만들기와 중첩, 데이터 표시, 이벤트에 반응해 화면을 갱신하는 React의 기본 개념을 확인했습니다.
자료 확인 - React 새 창
React 공식 사이트의 소개를 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정