리액트 기초: JSX 문법과 State 활용하기

JSX 문법

1. 클래스 지정하기

• 기존 HTML에서는 클래스명을 추가할 때 class=""를 사용하지만, JSX에서는 className=""으로 작성해야 합니다. 그 이유는 JSX가 자바스크립트의 문법을 기반으로 하기 때문인데, 자바스크립트에서 class는 예약어로 사용되기 때문에 이를 직접 사용할 수 없습니다. 따라서 JSX에서는 class 대신 className을 사용하여 클래스를 지정해야 합니다.

function App() {
  return (
    <div className="App">
      <div className="logo">
        <h1>블로그</h1>
      </div>
    </div>
  );
}

2. 변수 삽입하기

• HTML 중간에 자바스크립트 변수를 삽입하고 싶을 때는 중괄호 {}를 사용해 데이터 바인딩을 할 수 있습니다. 원하는 변수명을 중괄호 안에 넣기만 하면 됩니다.
• 이 방법은 href, id, className, src 등 다양한 HTML 속성에도 적용할 수 있습니다.

🙋‍♀️ 데이터 바인딩이란?
데이터 바인딩은 변수에 저장된 값을 UI에 동적으로 연결하는 과정입니다. 이 방식을 통해 코드의 재사용성을 높이고, 상태 변화에 따라 UI를 자동으로 업데이트할 수 있습니다. 쉽게 말해, 변수의 값이 변하면 그에 따라 화면도 자동으로 변화하는 것입니다.

function App() {
  const titleText = "리액트 왕초보";
  const buttonLabel = "Click Me!";
  const buttonClass = "btn-primary";

  return (
    <div className="App">
      <h1>{titleText}</h1>
      <button type="button" className={buttonClass}>{buttonLabel}</button>
    </div>
  );
}

3. style 속성 적용하기

• JSX에서 style 속성을 적용하려면, style을 {}로 감싸고 객체 형태로 속성과 값을 지정해야 합니다.
• 스타일 속성은 { 속성명: '속성값' } 형태로 넣어야 합니다.
• font-size와 같은 대시(-)가 포함된 속성명은 사용할 수 없습니다. 대신, 모든 단어를 붙여 쓰고 첫 글자를 대문자로 바꿔야 합니다. 예를 들어, fontSize처럼 작성해야 합니다.

function App() {
  return (
    <div style={{ color: 'red', fontSize: '20px' }}>
      리액트 왕초보
    </div>
  );
}

State 기본 개념과 활용 방법

React에서는 UI의 상태를 관리하기 위해 데이터를 일반 변수 대신 state라는 개념을 사용합니다.
State는 컴포넌트의 현재 상태를 나타내며, 데이터가 변경될 때 UI도 자동으로 업데이트됩니다. 이를 통해 사용자와의 상호작용이 더 원활하고 동적인 경험을 제공합니다.

React에서 State 만들기

1) State 가져오기
컴포넌트의 맨 위에 다음을 추가합니다.

import { useState } from 'react';

2) State 생성하기
원하는 곳에서 useState를 사용하여 state를 생성합니다. 여기서 likes는 state 이름, setLikes는 state를 업데이트하는 함수입니다. 나중에 원하는 대로 이름을 정할 수 있습니다.

const [likes, setLikes] = useState(0);

3) State 적용하기
생성한 state를 UI에 적용합니다. 예를 들어, 좋아요 수를 표시하고 버튼 클릭 시 수를 증가시키는 코드는 다음과 같습니다.

function App() {
  const [likes, setLikes] = useState(0);
  
  return (
    <div className="App">
      <h1>좋아요 수: {likes}</h1>
      <button onClick={() => setLikes(likes + 1)}>Click Me!</button>
    </div>
  );
}

State와 변수의 차이점

• 자동 업데이트
  State는 값이 바뀌면 UI도 자동으로 업데이트됩니다. 반면, 변수는 값이 바뀌어도 UI는 자동으로 변경되지 않습니다.

• 사용 목적
  State는 자주 변하는 데이터(예: 사용자 입력, API 데이터)를 관리할 때 사용합니다. 변수는 변하지 않는 값이나 한 번만 사용할 데이터에 적합합니다.

State를 사용하는 이유

• 동적인 UI와 상태 관리
  State를 사용하면 사용자 인터페이스가 쉽게 변하고, 컴포넌트의 상태를 효과적으로 관리할 수 있습니다. 예를 들어, 버튼을 클릭하면 텍스트가 바뀌고, 이때 UI가 자동으로 업데이트되어 편리합니다.

• 데이터 공유
  State는 보통 컴포넌트 안에서 사용되지만, 여러 컴포넌트가 같은 데이터를 사용할 수도 있습니다. 이를 통해 여러 곳에서 동일한 정보를 쉽게 표시할 수 있습니다.