리액트 19버전 강의(1. 리액트의 핵심 원리 단 하나)

리액트의 핵심 원리는 무엇인가요?

리액트는 기존의 명령형 방식과 달리, 개발자가 바뀔 자리를 미리 마련해두면 리액트가 값을 바꾸면 알아서 그 값이 바뀌는 '선언형 방식' 으로 작동합니다

리액트에서 '상태(State)'란 무엇인가요?

리액트에서 '상태'는 화면에서 바뀌는 데이터 를 의미하며, 이 상태에 따라 리액트가 화면을 다시 그려줍니다

리액트의 핵심 원리인 '선언형 프로그래밍'을 가장 쉽고 명확하게 이해할 수 있는 강의입니다. 기존 자바스크립트 방식과 리액트의 차이를 간단한 카운터 예제로 비교하며, 개발자가 직접 DOM을 조작하는 대신 '상태(State)'만 관리하면 리액트가 알아서 화면을 업데이트하는 방식을 설명합니다. 네이버와 같은 복잡한 웹사이트의 다양한 요소들이 어떻게 '상태'로 관리되는지 실전 예시를 통해 보여주며, 컴포넌트 기반 개발의 효율성과 용량 걱정 없는 리액트의 동작 방식을 알려줍니다. 리액트 입문자들이 반드시 알아야 할 JSX의 개념과 변환 과정까지 짚어주어, 다음 단계 학습을 위한 탄탄한 기반을 마련해 줍니다.

1. 리액트의 핵심 원리: 선언형 프로그래밍

1.1. 기존 자바스크립트 방식과 리액트 방식의 비교

1. 카운터 예제를 통한 비교
   1. 강의에서는 간단한 카운터 예제를 통해 리액트와 기존 자바스크립트 방식의 차이를 설명한다.
   2. 카운터는 숫자가 0에서 시작하여 플러스 버튼을 누를 때마다 1씩 증가하는 기능을 가진다.
   3. 이 간단한 예제를 직접 만들어보는 것은 리액트의 핵심 원리를 이해하는 데 중요하다.

1. 기존 자바스크립트(명령형) 방식
   1. 개발자가 직접 HTML 요소(DIV, SPAN)에 ID를 부여하고, 버튼에 onclick 이벤트를 달아 클릭 시 해당 ID를 선택하여 숫자를 파싱하고 1씩 더하는 방식으로 구현한다.
   2. 이는 개발자가 모든 동작을 직접 명령하는 명령형 방식에 해당한다.

1. 리액트(선언형) 방식
   1. 리액트 코드에서는 onclick 이벤트와 setCount 함수가 있지만, 특정 HTML 요소를 직접 조작하여 숫자를 바꾸는 코드는 명확하게 보이지 않는다.
   2. 개발자는 바뀔 자리를 미리 마련해두고 값을 변경하면, 리액트가 알아서 해당 값을 업데이트한다.
   3. 이는 개발자가 칸만 마련하면 알아서 채워지는 선언형 방식에 해당한다.

1.2. 리액트의 동작 원리 및 상태(State) 개념

1. 리액트의 역할: 라이브러리로서의 함수 호출
   1. 리액트는 자바스크립트 라이브러리이며, import 문법을 통해 가져다 사용한다.
   2. 개발자가 만든 함수를 리액트가 필요할 때 알아서 호출한다. 개발자가 직접 함수를 호출하는 것이 아니다.
   3. 개발자는 함수를 선언만 해두면, 리액트 라이브러리가 해당 함수를 호출하여 화면을 그린다.
   4. 화면 업데이트 과정:
      1. 리액트가 처음 화면을 그릴 때, 카운트의 초기값(0)을 바탕으로 "카운터 0"을 그린다.
      2. 카운트를 1 증가시키는 함수가 호출되면, 카운트 값이 1이 된다.
      3. 리액트는 변경된 카운트 값(1)으로 카운터 함수를 다시 실행하여 화면을 최신 값으로 업데이트한다.

1. DOM 조작의 주체: 리액트
   1. 개발자는 직접 DOM(Document Object Model)을 조작하지 않는다.
   2. 개발자는 화면에서 바뀔 부분을 미리 칸으로 마련해두는 역할을 한다.

1. 상태(State)의 개념
   1. 리액트에서 상태(State)는 바뀌는 데이터를 의미한다.
   2. 카운터 예제에서 숫자가 바뀌는 부분이 바로 상태(State)이다.
   3. 개발자는 바뀌는 데이터를 상태(State)로 만들어 관리한다.
   4. 복잡한 웹사이트에서의 상태:
      1. 네이버와 같은 복잡한 웹사이트에서도 버튼 클릭 시 바뀌는 영역(예: 탭, 뉴스 목록)들이 모두 상태이다.
      2. 웹사이트의 거의 모든 요소는 바뀔 수 있는 데이터이므로 상태로 간주된다.
      3. 심지어 페이지 전체도 상태가 될 수 있다. 예를 들어, 검색어 입력 시 페이지 전체가 다시 렌더링되는 것은 페이지 자체가 상태이기 때문이다.
      4. 리액트는 URL 주소에 따라서도 다른 화면을 그려줄 수 있으며, 이 개별 화면들도 모두 상태가 된다.
      5. if 문을 사용하여 URL 상태에 따라 메인 페이지나 검색 페이지를 리턴하는 방식으로 화면을 다르게 처리할 수 있다.

1.3. 컴포넌트 기반 개발과 용량 관리

1. 리액트 웹사이트 개발의 본질
   1. 리액트로 웹사이트를 만든다는 것은 화면에 보이는 모든 요소들을 미리 만들어 놓는 것을 의미한다.
   2. 특정 상태에 따라 미리 만들어 놓은 화면 중 어떤 것을 보여줄지 결정하는 방식이다.

1. 컴포넌트 분할을 통한 용량 효율성
   1. 모든 화면을 미리 만들어 놓으면 용량이 너무 커질 것이라는 우려가 있을 수 있다.
   2. 리액트에서는 JSX가 포함된 함수를 컴포넌트라고 부르며, 이 컴포넌트 함수를 쪼갤 수 있다.
   3. 상태가 바뀔 때 필요한 컴포넌트만 그때그때 불러오므로, 처음에는 현재 상태에 필요한 것만 화면에 그리고, 이후 상태 변화에 따라 다른 페이지들을 불러온다.
   4. 따라서 리액트는 용량 걱정 없이 효율적으로 동작한다.

1. 이번 시간의 핵심 요약
   1. 리액트는 미리 선언하는 선언형 방식이다.
   2. 화면에서 바뀌는 부분인 상태(State)에 따라 리액트가 알아서 화면을 다시 그려준다.

2. 다음 학습 내용: JSX와 실행 환경

1. JSX의 개념과 변환 필요성
   1. 리액트 파일의 확장자는 .js가 아닌 .jsx를 사용한다. (필수는 아니지만 일반적으로 사용된다.)
   2. 브라우저는 HTML, CSS, 자바스크립트만 실행할 수 있으며, JSX는 이해하지 못한다.
   3. JSX는 자바스크립트 안에 HTML을 쓰는 문법으로, 개발자가 임의로 만들어낸 것이다.
   4. 따라서 JSX 코드는 브라우저가 이해할 수 있는 자바스크립트 코드로 변환(트랜스파일링)되어야 한다.

1. 다음 시간에 다룰 내용
   1. 리액트를 브라우저에서 실제로 실행하는 방법 (Vite 툴 사용).
   2. useState와 같이 use로 시작하는 함수들을 배우며 리액트 컴포넌트를 만들고 리액트 원리를 더 깊이 알아볼 예정이다.

리액트 19버전 강의(2. 리액트 실행하기 with Vite, Node.js) 바로가기

리액트 19버전 강의(2. 리액트 실행하기 with Vite, Node.js) - 하나이프 블로그