react 시각적으로 이해하기

UI 구조를 자바스크립트 안에 선언적으로 적는 React 문법

JSX는 React에서 UI 구조를 자바스크립트 코드 안에 선언적으로 적는 문법입니다. 브라우저가 그대로 이해하는 HTML은 아니며, 빌드 도구가 이를 React가 읽는 객체 형태로 바꾼 뒤 렌더링에 사용합니다.

UI를 독립된 책임 단위로 나누는 React의 기본 구조

컴포넌트는 React에서 화면을 구성하는 기본 단위입니다. 하나의 컴포넌트는 특정 역할을 맡고, 입력으로 props를 받아 JSX를 반환하며, 필요하면 자신의 state와 이벤트 처리도 함께 가집니다.

부모 컴포넌트가 자식 컴포넌트에 내려주는 입력값

Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 입력값입니다. 자식은 props를 읽어 어떤 UI를 보여줄지 결정하지만, 그 값을 직접 바꾸지는 않습니다.

컴포넌트가 다음 렌더까지 기억해 두는 현재 값

State는 컴포넌트가 렌더 사이에 기억하는 값입니다. 버튼 클릭, 입력, 네트워크 응답 같은 변화가 생기면 state를 바꾸고, React는 그 새 값을 기준으로 다음 UI를 다시 계산합니다.

사용자 입력을 React 로직과 state 변화로 연결하는 방식

Event Handling은 사용자의 클릭, 입력, 제출 같은 브라우저 이벤트를 React 코드에 연결하는 방식입니다. React에서는 JSX 속성에 핸들러 함수를 넘겨 어떤 입력에 어떻게 반응할지 선언합니다.

현재 값에 따라 다른 UI 가지를 선택해 보여주는 렌더링 방식

Conditional Rendering은 현재 조건에 따라 서로 다른 UI를 선택해 보여주는 방식입니다. React에서는 별도 템플릿 문법보다 자바스크립트의 분기 표현식을 그대로 활용해 어떤 화면을 남길지 결정합니다.

배열 데이터를 반복해서 UI 항목으로 만들고 key로 식별하는 방식

List Rendering은 배열 데이터를 반복해서 여러 UI 항목으로 만드는 패턴입니다. 이때 key는 각 항목이 어떤 데이터와 연결되는지 React가 안정적으로 추적하게 해 주는 식별자입니다.

이전과 다음 렌더 결과를 비교해 실제 DOM 갱신을 최소화하는 React의 내부 모델

Virtual DOM은 React가 렌더 결과를 메모리 안의 트리로 표현하고, 이전 결과와 비교해 실제 DOM에 필요한 변경만 반영하는 방식입니다. 개발자는 전체 UI를 다시 그리는 것처럼 코드를 쓰지만, React는 바뀐 지점만 골라 화면에 적용합니다.

렌더링이 끝난 뒤 외부 시스템과 동기화하는 React의 후처리 단계

Effect는 렌더링이 끝난 뒤 React 바깥 세계와 동기화할 때 쓰는 단계입니다. 네트워크 구독, 타이머, DOM API, 외부 라이브러리 연결처럼 화면 계산만으로 끝나지 않는 작업을 여기서 다룹니다.

깊은 컴포넌트 트리에 공통값을 직접 공급하는 공유 통로

Context는 여러 단계 아래의 컴포넌트가 공통값을 직접 읽을 수 있게 해 주는 React 기능입니다. 부모가 props를 한 단계씩 전달하지 않아도, Provider가 공급한 값을 필요한 위치에서 useContext로 꺼낼 수 있습니다.

재렌더 없이 값을 보관하거나 실제 DOM 노드에 직접 닿는 React의 탈출구

Ref는 React가 렌더 사이에 유지해 주는 mutable한 보관 상자입니다. 이를 통해 실제 DOM 노드를 직접 가리키거나, 화면에 바로 반영될 필요가 없는 값을 기억할 수 있습니다.

입력 요소의 현재 값을 React state가 단일 기준으로 관리하는 패턴

Controlled Components는 input, textarea, select 같은 폼 요소의 현재 값을 React state가 관리하는 패턴입니다. 사용자가 입력하면 onChange가 state를 바꾸고, 그 state가 다시 value나 checked로 입력 요소에 주입됩니다.