Learn React
React 기초 배우기
외우는 게 아니라 직접 눌러보며 이해해요. 각 레슨은 비유로 시작해, 만질 수 있는 라이브 데모와 깨끗한 코드로 React 핵심 개념 하나를 끝까지 설명해요.
이해 점검 퀴즈
레슨에서 배운 핵심을 8문제로 점검해 보세요.
- 01Rendering렌더링이 뭔가요?화면이 '다시 그려진다'는 게 무슨 뜻인지, 왜 일반 변수를 바꿔도 화면은 그대로인지 직접 눌러보며 이해해요.
- 02useStateuseState - 기억하는 상자화면이 다시 그려져도 값을 기억하는 상자. 한 번 클릭에 +3을 제대로 하려면 왜 함수형 업데이트를 써야 하는지까지.
- 03Events이벤트 - 사용자 동작에 반응하기버튼 클릭, 입력 변화 같은 사용자 동작 받기. onClick/onChange와 이벤트 객체, 핸들러에 값 넘기는 법.
- 04Conditional조건부 렌더링 - 상황 따라 다른 화면조건에 따라 다른 걸 보여주기. && 와 삼항 연산자, 로딩/비어있음/데이터 상태 나누기, 0이 새는 함정.
- 05propsprops - 부모가 건네는 쪽지부모가 자식에게 데이터를 내려주는 한 방향 통로. 자식은 읽기만 하고, 부모 값이 바뀌면 자식 화면이 따라 바뀌어요.
- 06Lists & key리스트와 key - 목록 그리기배열을 화면 목록으로 그리기. 왜 key가 필요한지, index를 key로 쓰면 무슨 버그가 나는지 직접 봐요.
- 07useEffectuseEffect - 화면 바뀐 뒤 할 일화면을 다 그린 뒤 실행되는 뒷정리 담당. 언제 다시 실행되는지(의존성)와 cleanup이 왜 필요한지 타임라인으로 봐요.
- 08useRefuseRef - 안 그려도 기억하는 메모바꿔도 화면을 다시 그리지 않는 메모장. DOM 요소를 직접 잡거나, 리렌더 없이 값을 보관할 때 써요.
- 09Custom Hook커스텀 훅 - 로직을 도시락처럼 싸기반복되는 state+effect 로직을 use 함수로 싸서 어디서나 꺼내 쓰기. 같은 훅을 써도 상태는 각자 따로 가져요.
- 10useContextuseContext - 깊은 곳에 바로 전달테마/로그인 같은 값을 중간 컴포넌트를 다 거치지 않고 깊은 곳에 바로 전달. props 줄줄이 넘기기(prop drilling) 해결사.
- 11useMemouseMemo - 비싼 계산 아껴쓰기매 렌더마다 다시 하던 무거운 계산을, 재료가 그대로면 계산해둔 답을 재활용. 계산 횟수로 효과를 눈으로 확인해요.
useState · props · useEffect · useRef · 커스텀 훅 레슨이 차례로 추가됩니다.