🎯 자바스크립트 라이브러리인 React에 대해 정리합니다.

📗 Today I Learned

React

react.js는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리입니다. 웹 애플리케이션(SPA)과 모바일 애플리케이션(React Native)을 개발할 때 주로 사용됩니다.

🤔 jQuery를 재치고, React가 등장한 이유는 뭘까?

기존의 웹 개발 방식( jQuery)에서는 사용자 상태가 바뀔 때마다 HTML 요소(DOM)를 직접 찾아 조작해야 했습니다. (즉, 값이 변해도 자동으로 UI가 바뀌지 않기 때문에 개발자가 직접 UI를 조작해야 했습니다.)

if (user.loggedIn) {
  document.getElementById("loginBtn").style.display = "none";
  document.getElementById("logoutBtn").style.display = "block";
  document.getElementById("welcomeMsg").textContent = "환영합니다!";
}

하지만 인터페이스가 점점 복잡해지면서 상태와 UI 간의 일치를 유지하기 어려워졌고, 성능 저하나 버그가 자주 발생했습니다.

---

React는 DOM을 직접 다루지 않아도 되게끔 추상화해줍니다. 개발자는 어떻게 바꿔야 할지가 아니라, 지금 상태라면 어떤 화면이어야 하는지만 선언적으로 표현하면 됩니다. (즉, 상태만 관리하면, 화면은 React가 자동으로 그려줍니다.)

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>환영합니다!</p>
      ) : (
        <button>로그인</button>
      )}
    </div>
  );
}

동작 원리

출처: https://ninefloor.tistory.com/118

1. 초기 렌더링

컴포넌트가 처음으로 화면에 그려질 때, React는 전체 UI 구조를 한 번에 렌더링합니다.

2. 가상 DOM 변경

만약 사용자가 버튼을 클릭해서 상태가 바뀌면, 가상 DOM(Virtual DOM)을 먼저 업데이트합니다.

🤔 가상 DOM이란?

실제 화면이 아닌, 메모리 속에 존재하는 가상의 구조입니다. 실제로 그리기 전에 빠르게 계산하고 실험할 수 있다는 장점이 있습니다.

3. 재조정

변경된 가상 DOM과 이전 가상 DOM을 비교하여
어떤 부분이 달라졌는지를 계산합니다.

4. 실제 DOM 업데이트

브라우저 화면(DOM)에 필요한 부분만 효율적으로 업데이트합니다.

---

React 앱 만들기

ℹ️ 현재는 사용이 권장되지 않는 구버전 문서 (React 17 이하)를 참고해서 앱을 만드는 점을 참고해주세요.

🔥 CRA(Create React App) vs Vite
👉 더 이상 CRA(Create React App)을 사용하지 않는 이유 / Vite로 마이그레이션 하는 방법

항목	Create React App (CRA)	Vite
명령어	npx create-react-app my-app	npm create vite@latest my-app -- --template react
기술 기반	Webpack	ESBuild + Rollup
초기 설정	자동 설정, 숨겨진 설정 (eject 필요)	템플릿 기반, vite.config.js로 쉽게 커스터마이징 가능
개발 서버 속도	느릴 수 있음	빠르게 반응함
빌드 속도	비교적 느림	빠름
기본 번들러	Webpack	Rollup
서버 사이드 렌더링(SSR)	기본 미지원	일부 SSR 가능 (Next.js보단 제한적)

Create React App을 통해 개발 환경을 설정

typescript를 활용하여 개발할 것이기 때문에 typescript 템플릿을 설정하여 설치합니다.

npx create-react-app 프로젝트명 --template typescript
cd 프로젝트명
npm start

---

JSX

JavaScript XML의 줄임말로, React에서 사용자 인터페이스를 만들 때 사용하는 문법입니다. React 컴포넌트의 return 문 안에서 사용됩니다.

👉 HTML을 JSX로 변환해주는 사이트

1. JSX 안에 JS 코드는 {} 안에 작성

중괄호 {} 안에 JavaScript 표현식을 넣을 수 있습니다.

function Greeting() {
  const name = "Yuna";
  return <h1>Hello, {name}!</h1>;
}

2. 하나의 최상위 태그로 감싸야 함

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome</p>
    </div>
  );
}

3. 태그는 반드시 닫아야 함

HTML에서는 일부 태그를 닫지 않아도 되지만, JSX에서는 모든 태그를 닫아야 합니다.

function Logo() {
  return <img src="logo.png" />;
}

4. class 대신 className 사용

class 대신 className을 사용합니다.

function Container() {
  return <div className="container">내용</div>;
}

5. jsx 내부에서 주석을 작성할 때는 {/* */} 를 사용

jsx 외부에서는 // 또는 /* */로 js와 동일하게 사용하지만 jsx 내부에서는 {/* */}를 활용하여 주석을 작성합니다.

function Home({ isLoggedIn }) {
  return (
    <div>
      {/* 여기는 제목입니다 */}
      <h1>Hello, world!</h1>

      {/* 조건부 렌더링 예시 */}
      {isLoggedIn ? <LogoutButton /> : <LoginButton />}
    </div>
  );
}

6. 인라인 스타일 : style 속성에 객체 형태로 전달

JSX에서는 JavaScript 객체 형식으로 스타일을 정의합니다. 그래서 중괄호 두 개({{ ... }})로 표현합니다. css 속성 이름도 camelCase를 사용하여 정의합니다.

function StyledBox() {
  return (
    <div style={{ 
      padding: '20px', 
      backgroundColor: 'lightgray', 
      borderRadius: '8px' 
    }}>
      인라인 스타일로 꾸며진 박스입니다.
    </div>
  );
}

---

✏️ 회고

JSX의 문법이 아직 헷갈리지만 잘 정리해서 익숙해지도록 해야겠다.