판주야 Redux는…#1

이제 막 자바스크립트를 배우기 시작한 친구에게 state 와 Redux 를 설명해 주려고 쓴 연재의 1편이다. Redux 로 바로 가지 않고 정적/동적 웹페이지의 차이, 자바스크립트가 하는 일, React 가 그중 무엇을 바꿔 놓는지를 같은 예제 코드로 단계별로 비교한다.

핵심 포인트

정적 페이지는 HTML 로 고정된 화면이고, 동적 페이지는 코드를 고치지 않아도 내용이 바뀌는 화면이다. 그 변화를 담당하는 게 자바스크립트다.
`document.getElementById('title').innerHTML = '수원 돈까스'` 를 "id 가 title 인 요소를 가져와 내용을 바꿔라" 로 읽어 보게 하는 식으로, 문법보다 문장 읽기를 먼저 시킨다.
React 는 자바스크립트를 짧게 만들어 주는 도구가 아니다. 오히려 전체 코드량은 늘 수 있고, 대신 화면에 보이는 부분이 명확해진다.
`useState` 로 만든 `title` 과 `setTitle` 을 쓰면 HTML 쪽에 id 와 DOM 조회가 사라져, 요소가 여러 개로 늘어날수록 차이가 확연해진다.
1편은 여기까지고, "React 가 자바스크립트의 동작 방식을 어떻게 바꿨는가" 는 다음 편으로 넘긴다.

상세 정리

출발 질문: "state 가 뭐야? Redux 는 뭐야?" 라는 초심자의 질문에, 답하는 쪽도 설명하려니 막히더라는 경험에서 글이 시작된다.
정적 예시: `목동 돈까스` 는 코드를 고치지 않는 한 바뀌지 않는다. 이것이 정적 페이지의 정의다.
동적 예시: `` 과 버튼을 두고 `onClick` 에 DOM 조작 코드를 넣어 글자를 바꾼다. 요소 하나를 바꾸는 데도 id 부여와 조회 코드가 필요하다는 점이 뒤 논의의 근거가 된다.
라이브러리 설명: 자주 쓰거나 길게 써야 하는 코드를 함수로 미리 만들어 모아둔 것이 라이브러리이고 React 도 그중 하나라고 정의한다.
왜 필요해졌나: 웹이 단순 정보 표시에서 엑셀·파워포인트 같은 '웹 앱' 수준으로 발전하며 사용자 상호작용이 늘었고, 그만큼 자바스크립트 코드가 많고 복잡해졌다.
React 버전 비교: `const [title, setTitle] = useState('목동 돈까스')` 와 `{title}`, `onClick={() => setTitle('수원 돈까스')}` 로 바꿔 놓고 "정말 단순해졌는가?" 를 되묻는다.
솔직한 단서: React 를 쓰기 위해 생략된 코드가 많고 구조상 더 복잡해 보일 수도 있다고 인정한 뒤, 화면에 보이는 부분만 놓고 보면 직관적이라는 쪽으로 논지를 좁힌다.
규모 비교: 제목·시·구·동 네 항목을 각각 버튼으로 바꾸는 예제를 DOM 방식과 React 방식으로 나란히 붙여, 요소가 늘수록 `getElementById` 반복이 커지는 것을 눈으로 보여준다.
읽는 법 연습: React 코드도 "setTitle 함수를 써서 title 변수를 '수원 돈까스' 로 바꿔라" 로 풀어 읽게 해, 변수·함수 개념을 미리 깔아둔다.