프로그래밍 언어와 프레임워크
리액트(React)
React는 화면을 컴포넌트로 나누고 데이터 변화에 맞춰 표시할 내용을 구성하는 JavaScript 라이브러리입니다.
쉬운 설명
AI에게 웹 앱을 만들어 달라고 했을 때 React로 작성한 코드를 받을 수 있어요. React에서는 신청 폼이나 모임 카드처럼 화면의 일부를 컴포넌트라는 단위로 만들어요. 같은 컴포넌트에 다른 값을 전달해 여러 항목을 표시할 수도 있어요. 서버에 데이터를 저장하거나 앱을 배포하는 일은 프로젝트의 다른 구성과 함께 처리해요.
이런 상황에서 만나요
스터디 목록에 같은 모양의 카드가 반복돼요. AI가 StudyCard라는 컴포넌트를 만들었다면 카드마다 코드를 복사하기보다 다른 제목을 전달해 표시할 수 있어요.
같은 카드에 다른 제목을 전달해요
<StudyCard title="AI 입문" /> <StudyCard title="앱 만들기" />
AI 입문
앱 만들기
- 1StudyCard를 두 번 사용하고 서로 다른 제목을 전달해요.
- 2첫 번째 title 값을 표시해요.
- 3같은 컴포넌트라도 전달한 값에 따라 내용이 달라져요.
“카드 모양은 그대로 두고 각 스터디의 제목을 전달해서 보여 줘”처럼 요청해 보세요. 새 항목을 추가했을 때도 같은 모양으로 나타나는지 확인해요. 클릭과 입력이 있는 화면이라면 표시만 보지 말고 동작도 시험해요.
헷갈리기 쉬운 점
React만 설치하면 완성된 앱이 되나요?
React는 화면을 구성하는 라이브러리예요. 어떤 페이지를 열지, 데이터를 어디에 저장할지, 어디에 배포할지는 별도 구성이 필요해요. Next.js 같은 프레임워크가 React와 함께 이런 구성을 제공하기도 해요.
화면이 바뀌어야 할 값을 일반 변수에만 저장하면 기대한 대로 갱신되지 않을 수 있어요. AI에게 어떤 값이 바뀌고 어느 화면이 그 값을 사용하는지 함께 설명해 주세요.
왜 알아야 할까요?
AI가 만든 파일에서 화면의 어느 부분을 고쳐야 하는지 찾기 쉬워져요. 같은 모양의 요소를 여러 개 만들거나 데이터에 따라 화면을 바꾸는 요청도 더 구체적으로 할 수 있어요.
조금 더 자세히
React 컴포넌트는 다른 컴포넌트를 포함해 화면을 구성할 수 있습니다. 함수 컴포넌트는 JSX라는 문법으로 표시할 내용을 표현하는 경우가 많습니다. JSX는 HTML처럼 보이지만 JavaScript 안에서 쓰는 문법입니다.
사용자 입력 등으로 달라지는 값을 state로 관리하면 React가 새 상태에 맞는 화면을 계산할 수 있습니다. 화면에 사용하는 데이터를 어디에서 관리하고 어떤 컴포넌트에 전달할지 구분하면 수정 범위를 이해하기 쉽습니다.
직접 사용할 때 확인해 보세요
- 화면을 구성하는 컴포넌트를 찾는다
- 표시할 값과 바뀌는 상태를 구분한다
- 데이터를 바꾼 뒤 화면과 동작을 확인한다
관계 지도
