코드 읽는 법
초보자가 가장 많이 하는 실수는 코드를 소설책처럼 첫 줄부터 마지막 줄까지 순서대로 읽으려는 것입니다. 코드는 '위에서 아래로'가 아니라 '흐름을 따라' 읽어야 합니다.
-
Import 구문 (준비물 확인): 코드의 가장 윗부분에는
import문들이 있습니다. "이 화면을 만들기 위해 어떤 부품(다른 파일이나 라이브러리)들을 가져왔구나" 정도만 파악하고 빠르게 넘어갑니다. -
컴포넌트/함수 이름 (주인공 찾기):
function Header()또는const UserProfile = () =>처럼 이 파일의 주인공이 되는 메인 블록을 찾습니다. -
Return 구문 (결과물 확인): 코드가 복잡해 보여도, 화면에 최종적으로 그려지는 것은
return (...)안에 있는 HTML(JSX) 코드입니다. 화면에 무엇이 나타나는지 먼저 파악한 뒤, 위로 올라가서 그 데이터가 어떻게 만들어졌는지 역추적하는 것이 훨씬 빠릅니다.
폴더 구조
폴더 구조는 프로젝트의 설계도와 같습니다. 표준적인 웹 개발 프로젝트의 뼈대는 보통 다음과 같습니다.
-
src/또는app/(핵심 소스): 우리가 작성하는 대부분의 코드가 들어가는 심장부입니다. 화면을 구성하는 페이지들이 위치합니다. -
components/(부품 창고): 여러 페이지에서 재사용할 수 있는 버튼, 네비게이션 바, 모달 창 등의 조각(컴포넌트)들을 모아두는 곳입니다. -
public/(공공재 창고): 이미지, 폰트, 파비콘 등 코드가 아닌 원본 파일들이 그대로 저장되는 곳입니다. -
package.json(명세서): 이 프로젝트가 어떤 라이브러리를 사용하고 있는지, 어떻게 실행하는지 적혀 있는 문서입니다.
Component
컴포넌트는 '레고 블록'입니다.
웹사이트를 하나의 통짜 코드로 만들면 나중에 수정하기가 너무 어렵습니다. 그래서 화면을 여러 개의 조각으로 나눕니다. 예를 들어 화면 상단의 '헤더', 중간의 '게시글 목록', 하단의 '푸터'를 각각의 레고 블록(컴포넌트)으로 만들어 조립하는 방식입니다. AI에게 지시할 때도 "이 페이지 통째로 수정해 줘" 보다 "여기 '헤더 컴포넌트'에 로그인 버튼을 추가해 줘"라고 하는 것이 훨씬 정확한 결과물을 얻을 수 있습니다.
Props
Props는 컴포넌트의 '주문제작 옵션'입니다.
똑같은 모양의 '버튼 컴포넌트' 레고 블록이 있다고 가정해 보겠습니다. 어떤 곳에서는 파란색 '확인' 버튼으로, 어떤 곳에서는 빨간색 '취소' 버튼으로 쓰고 싶을 것입니다. 이때 외부(부모 컴포넌트)에서 내부(자식 컴포넌트)로 전달해 주는 설정값이 바로 Props입니다.
-
예시:
<Button color="blue" text="확인"/>-> 여기서color와text가 Props입니다. 자식은 부모가 준 Props를 읽을 수만 있고, 마음대로 바꿀 수 없습니다.
State
State는 컴포넌트가 가진 '자체 기억력'입니다.
Props가 밖에서 주어지는 옵션이라면, State는 컴포넌트 내부에서 스스로 관리하며 변하는 데이터입니다. 화면에서 무언가 동적으로 바뀌는 요소는 대부분 State로 관리됩니다.
-
예시: 버튼을 누를 때마다 올라가는 '좋아요 개수', 사용자가 키보드로 입력하고 있는 '검색어', 클릭하면 열리고 닫히는 '드롭다운 메뉴의 상태(열림/닫힘)'. 이런 것들이 모두 State입니다. State가 변하면 컴포넌트는 그 변화를 반영하여 화면을 새로 그립니다(렌더링).
