사용자 검수 전 — React를 읽을 때 가장 먼저 만나는 단어를 짧게 정리한다. JSX, Props, 이벤트 핸들링, State를 따로 외우는 대신 “데이터를 받아 화면을 계산하고, 사건이 생기면 상태를 바꿔 다시 계산한다”는 한 흐름으로 연결한다.
§ 00 · React와 컴포넌트
React는 사용자 인터페이스를 만드는 JavaScript 라이브러리다. 새로운 프로그래밍 언어가 아니라, 화면을 작고 재사용 가능한 컴포넌트로 나누고 그 컴포넌트를 조합하는 방법을 제공한다. 버튼처럼 작은 조각도, 페이지처럼 큰 조각도 컴포넌트가 될 수 있다.
함수 컴포넌트는 Props·State·Context 같은 입력을 읽고 화면의 다음 모습을 반환한다. React는 입력이 달라지면 컴포넌트를 다시 호출해 새 화면을 계산(render)하고, 실제 DOM에 필요한 차이만 반영(commit)한다. 그래서 컴포넌트의 렌더링 코드는 같은 입력에 같은 결과를 내는 순수한 계산이어야 한다.
§ 01 · JSX — JavaScript 안의 화면 문법
JSX는 JavaScript 파일 안에 HTML과 닮은 마크업을 쓰게 하는 문법 확장이다. JSX 자체가 React도 아니고 HTML도 아니다. 빌드 과정에서 JavaScript로 변환되며, 중괄호 안에는 JavaScript 표현식을 넣을 수 있다.
HTML보다 엄격하다. 태그를 닫아야 하고, 여러 형제 요소를 반환하려면 하나의 부모나 Fragment로 묶어야 하며, 사용자 컴포넌트 이름은 대문자로 시작한다. class 대신 className을 쓰는 것처럼 브라우저 DOM 속성과 이름이 다른 항목도 있다.
§ 02 · Props — 부모가 자식에게 건네는 입력
Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 값이다. 문자열뿐 아니라 숫자, 객체, 배열, 함수, JSX도 전달할 수 있다. 자식은 받은 Props를 그 렌더의 읽기 전용 입력으로 취급한다. 바꾸고 싶다면 부모가 새 Props를 내려주게 해야 한다.
§ 03 · 이벤트와 State — 행동을 다음 화면으로 바꾸는 연결
이벤트 핸들러는 클릭, 입력, 제출처럼 사용자의 행동에 반응하는 함수다. onClick={handleClick}처럼 함수를 전달해야 한다. onClick={handleClick()}처럼 호출 결과를 넣으면 클릭을 기다리지 않고 렌더링 중 즉시 실행된다.
State는 컴포넌트가 렌더 사이에 기억해야 하고 화면에도 영향을 주는 데이터다. useState는 현재 값과 그 값을 갱신하는 setter를 반환한다. setter는 지금 실행 중인 변수 자체를 바꾸는 것이 아니라 다음 렌더를 요청한다. 객체와 배열 State는 직접 변형하지 말고 새 값으로 교체한다.
§ 04 · 조합해서 화면을 만든다
children은 컴포넌트의 여는 태그와 닫는 태그 사이에 넣은 내용을 받는 특별한 Prop이다. 상자, 대화상자, 레이아웃처럼 내부 내용을 바꿔 끼우는 컴포넌트를 만들 때 쓴다. 상속보다 작은 컴포넌트를 조합하는 방식이 React의 기본이다.
조건에 따라 다른 JSX를 반환할 때는 if, 삼항 연산자, &&를 쓴다. 배열은 map으로 JSX 목록으로 바꿀 수 있다. 이때 각 형제 항목에 안정적이고 유일한 key를 주어야 React가 추가·삭제·이동 뒤에도 같은 항목을 식별한다. 배열 인덱스나 매 렌더마다 달라지는 임의 값은 좋은 key가 아니다.
Read this note at sass.studio.