시리즈 · 총 8편
React 기초
JSX와 컴포넌트부터 State·Effect·Context, 그리고 렌더링 최적화까지 — React를 이루는 핵심 개념을 웹 개발 경험에 빗대어 하나씩 짚습니다.
- 01React란 무엇인가 — 선언형 UI와 컴포넌트라는 발상React가 해결하려 한 문제는 무엇이고, '명령형에서 선언형으로'라는 전환은 왜 중요한가. 웹 개발 경험에 빗대어 React의 핵심 발상을 짚습니다.
- 02JSX — HTML처럼 생겼지만 사실은 JavaScriptReact가 화면을 적는 문법 JSX의 정체를 짚습니다. HTML과 닮았지만 왜 다른지, 중괄호로 무엇을 하는지, class 대신 className을 쓰는 이유까지 웹 경험에 빗대어 정리합니다.
- 03Props — 부모가 자식에게 건네는 속성React의 Props를 웹의 속성(attribute)에 빗대어 정리합니다. 함수 인자처럼 동작하는 원리, 구조 분해, children, 그리고 'Props는 읽기 전용'이라는 규칙이 왜 존재하는지까지 짚습니다.
- 04State와 useState — 컴포넌트가 스스로 기억하는 값React의 State를 Props와 대비해 정리합니다. 일반 변수로는 왜 안 되는지, useState를 왜 const로 받는지, 값을 반드시 setter로 바꿔야 하는 이유까지 짚습니다.
- 05useEffect — 렌더링 바깥의 일을 다루기React의 useEffect를 '사이드 이펙트'라는 개념부터 짚습니다. 렌더링과 무엇이 다른지, 의존성 배열의 세 가지 형태가 각각 언제 실행되는지, 그리고 흔한 오해까지 정리합니다.
- 06useEffect 정리 함수(cleanup) — 켠 것을 끄는 대칭의 기술useEffect의 정리 함수가 언제, 왜 실행되는지 생명주기로 정리합니다. 흔히 오해하는 '개발 모드 이중 실행'의 진짜 이유(StrictMode)까지 명확히 짚습니다.
- 07useRef — 화면을 건드리지 않고 값을 기억하기State와 달리 바뀌어도 리렌더를 일으키지 않는 useRef를 정리합니다. 일반 변수·전역 let과 무엇이 다른지, 왜 렌더링 중엔 읽고 쓰면 안 되는지, 그리고 DOM에 손대는 대표 쓰임까지 다룹니다.
- 08Context — 멀리 떨어진 컴포넌트에 값을 건네는 길Props를 계단처럼 넘기는 prop drilling의 피로를 Context로 푸는 법을 정리합니다. createContext·Provider·useContext 3단계, 그리고 언제 쓰고 언제 아껴야 하는지까지 짚습니다.