BOOKSEEK READING GUIDE
리액트 입문 책 추천: 컴포넌트보다 먼저 데이터의 흐름을 질문하기
React의 첫 책은 프로젝트를 순서대로 만들지, 자바스크립트와 함수형 사고부터 연결할지에 따라 고를 수 있습니다. 소플의 3판과 『러닝 리액트 2판』을 비교하며 컴포넌트·상태·훅의 학습 범위와 판본 차이를 정리합니다.
컴포넌트보다 먼저 데이터의 흐름을 질문하기
React를 배우기 전에 HTML·CSS·자바스크립트의 역할을 구분할 수 있는지 확인해 보세요. 준비가 되었다면 다음 질문은 컴포넌트를 얼마나 작게 나눌지가 아니라 어떤 데이터가 어디에서 바뀌며 어떤 화면에 전달되는지입니다. 프로젝트로 개념을 연결하는 소플의 책과 언어 배경을 함께 읽는 『러닝 리액트』를 이 질문으로 비교할 수 있습니다.
책을 고르기 전에 공부할 핵심
지금 해결하려는 문제를 먼저 정하고, 다음 개념을 기준으로 각 책의 설명 범위를 비교해 보세요.
전달받는 값과 바뀌는 상태
props와 state를 같은 종류의 변수로만 보면 컴포넌트의 관계가 흐려집니다. 바깥에서 어떤 값을 받는지, 사용자 행동으로 어떤 값이 달라지는지 먼저 나누어 보세요. 작은 입력 화면 하나에서도 상태의 위치와 값의 전달 경로를 설명하는 연습이 가능합니다.
컴포넌트의 책임과 훅의 목적
코드를 짧게 나누었다고 역할까지 잘 나뉜 것은 아닙니다. 각 컴포넌트가 무엇을 보여 주며 어떤 정보를 필요로 하는지 적어 보세요. 훅을 배울 때도 이름의 개수보다 값을 기억하는 일과 외부 동작을 연결하는 일을 구별하는 것이 중요합니다.
예제 완성과 동작 확인
블로그나 데이터 요청 예제를 만들 때는 화면이 나온 순간만 확인하지 마세요. 입력이 바뀌거나 요청이 대기·실패하는 상황에서 무엇을 보여 줄지 질문해 보세요. 도구 설정과 패키지 사용은 책의 판본과 실제 환경을 대조해야 하며, 개념의 이해와 설치 성공은 별개입니다.
입문 개념을 미니 블로그로 연결하기
자바스크립트와 함수형 사고를 함께 정리하기
『러닝 리액트(2판)』는 자바스크립트 경험은 있지만 React 코드의 구성 이유가 궁금한 독자에게 골랐습니다. 함수형 사고를 바탕으로 컴포넌트와 훅, 데이터 요청과 라우팅을 연결해 읽을 수 있습니다.
예제의 배열 변환이나 함수 사용을 한 단계씩 풀어 설명하고, 상태가 달라질 때 어떤 결과가 나오는지 예상해 보세요. 테스트와 서버 렌더링 부분은 화면을 만드는 것 이후의 질문을 마련하는 범위로 활용할 수 있습니다.
다만 2021년 한국어판이므로 설치와 패키지 사용 절차는 현재와 다를 수 있습니다. 최근 환경의 예제를 그대로 따라가는 목적보다 개념과 데이터 흐름을 정리하려는 목적에 맞는 추천입니다.
선택 기준과 다음 독서 질문
프로젝트를 따라 개념을 처음 묶어 보고 싶다면 소플의 3판을 먼저 살펴보세요. 자바스크립트 표현과 함수형 사고까지 연결하고 싶다면 『러닝 리액트』의 설명 방식이 맞을 수 있습니다. 두 권을 모두 읽는 것보다 자신의 막힌 지점에 맞는 한 권을 고르는 편이 좋습니다.
다음 실습에서는 상태 하나를 고른 뒤 그 값을 누가 바꾸고 누가 사용하는지 그려 보세요. 다른 곳으로 옮겨도 역할이 분명한가요? 답하기 어렵다면 컴포넌트를 더 잘게 나누기 전에 데이터의 관계부터 다시 읽을 때입니다.
『소플의 처음 만난 리액트 3판』은 컴포넌트·props·state·훅·이벤트·폼을 배운 뒤 프로젝트로 묶어 보고 싶은 독자에게 골랐습니다. HTML·CSS·자바스크립트 기초를 갖춘 독자가 React 화면 구성에 집중하기 좋습니다.
미니 블로그를 완성한 다음에는 입력 하나가 어느 상태를 바꾸고 어느 화면에 영향을 주는지 적어 보세요. 컨텍스트도 값을 공유하는 범위가 실제로 어디까지인지 질문하며 읽으면 단순한 기능 암기를 피할 수 있습니다.
2026년 출간 3판은 React 19 예제와 Vite를 반영했습니다. 이는 판본의 내용 확인이며 현재 최신 버전이나 모든 패키지의 지원을 보장하는 표현은 아닙니다.