[React] JSX, State, onClick

React

[React] JSX, State, onClick

yo09 2024. 10. 7. 22:21

1. JSX

1.1 className 짓기

1.2 데이터 바인딩

1.3 HTML 요소에 style 넣기

2. state

2.1 useState hook

2.2 state vs 일반 변수

3. onClick 이벤트 사용하기

3.1 함수 선언 방식

1. JSX

1.1 className

JSX는 React에서 UI를 작성하기 위한 자바스크립트 확장 문법이다. 기본적으로 HTML과 비슷하지만, 주의해야 할 점이 있다. 예를 들어, HTML에서는 class라는 속성을 사용하지만, JSX에서는 JavaScript의 키워드와 겹치지 않도록 'className'을 사용해야 한다. 즉, JSX는 일종의 JavaScript라서 JS에서 사용하는 예약어인 'class' 키워드를 막 사용하면 안된다. class=' '를 넣고 싶다면 className=' '이라고 써야한다.

React에서는 JSX를 사용하여 UI를 작성할 때, 간편하게 HTML처럼 보이는 코드를 작성할 수 있다. 이는 React.createElement와 같은 JavaScript 함수를 직접 사용하는 번거로움을 줄여준다. 따라서 JSX는 UI를 보다 직관적이고 효율적으로 작성할 수 있도록 도와준다.

1.2 데이터 바인딩

JSX에서는 자바스크립트 변수를 HTML에 손쉽게 넣어줄 수 있다. 이를 데이터 바인딩이라 부르며, JSX에서는 중괄호 { }를 사용해 변수를 HTML 요소 안에 삽입할 수 있다.

function App() {
  let post = '인천 돈까스 맛집';
  return (
    <div className="App">
      <div className="nav">
        <div>블로그 제목</div>
        <div>{post}</div> {/* 변수를 중괄호로 감싸서 삽입 */}
      </div>
    </div>
  );
}

post라는 변수를 { post }형태로 <div> 태그 안에 넣어주면, 화면에는 '인천 돈까스 맛집'이 출력된다.

이렇게 JSX에서 변수를 중괄호 { }로 감싸면, 해당 변수의 값이 HTML 태그 안에 자연스럽게 삽입된다. 예전 자바스크립트 방식인 document.getElementById().innerHTML를 사용할 필요 없이, 간단하게 값을 표현할 수 있다.

function App() {
  var color = 'red';
  return (
    <div className="App">
      <div className="nav">
        <div>개발 blog</div>
        <div className={color}>안녕하세요</div> {/* className 속성에 변수를 넣어줌 */}
      </div>
    </div>
  );
}

className={color}라고 작성해 color 변수가 가진 red를 className 속성에 넣어준다.

이처럼 JSX에서는 { } 중괄호를 사용하여 변수뿐만 아니라, 여러 HTML 속성에도 데이터를 바인딩할 수 있다.

1.3 JSX에서 HTML 요소에 style 속성 넣기

<div style="color: blue;">글씨</div>

HTML에서는 위의 코드처럼 style 속성을 넣지만,

<div style={{ color: 'blue', fontSize: '30px' }}>글씨</div>

JSX에서는 style 속성에 객체 형태로 스타일을 지정해야 한다.

style = {{}} 형태로 사용되는데, 여기서 중요한 것은 style 속성 값이 객체라는 것이다. 객체의 속성명은 자바스크립트의 객체 표기법을 따라 작성해야 하므로, color: 'blue'처럼 속성명과 속성값을 모두 문자열로 정의해야 한다.

속성명 표기법
- CSS에서 font-size처럼 대시(-)가 포함된 속성은 JSX에서 사용할 수 없다.
- 대신 fontSize와 같이 **카멜 표기법(CamelCase)**으로 작성해야 한다.
속성값 표기법
- 모든 속성값은 문자열로 넣어야 하므로, '30px', 'blue'와 같은 형태로 작성해야 한다.

정리하면, JSX에서는 style 속성을 사용할 때 style={{ 속성명: '속성값' }} 형태로 작성하고, 대시(-)가 포함된 속성명은 카멜 표기법을 사용해야 한다.

2. state

React에서는 컴포넌트 내에서 데이터를 관리하고, 화면에 반영될 상태(state)를 저장할 수 있다. 일반적인 변수와는 다르게, state는 값이 변경되면 자동으로 화면을 다시 렌더링해준다. state는 상품명, 글, 제목, 가격 등 자주 변할 것 같은 데이터를 저장하는 것이 좋다. 바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없다.

2.1 useState 훅(hook) 사용하기

React에서 state를 사용하려면 useState라는 **훅(hook)**을 사용해야 한다.

useState는 React에서 상태를 관리하기 위해 제공하는 함수이며, 이를 통해 컴포넌트가 가진 데이터를 관리할 수 있다.

import { useState } from 'react';

먼저, 컴포넌트 상단에 useState를 import 해야 한다.

let [state, setState] = useState('초기값');

그리고 컴포넌트 내부에서 useState를 호출하여 state를 생성한다.

state: 현재 상태 값을 담고 있는 변수. 이 값은 직접 수정할 수 없으며, 컴포넌트에서 사용하고자 하는 데이터를 나타낸다.
setState: state의 값을 변경하기 위한 함수. 이 함수로 상태를 변경하면, React가 자동으로 해당 컴포넌트를 다시 렌더링해준다.
'초기값': state의 초기값을 지정. 문자열, 숫자, 배열, 객체 등 다양한 데이터 형태를 초기값으로 지정할 수 있다.

import React, { useState } from 'react';
import './App.css';

function App() {
  // state 생성: [현재 상태 값, 상태를 변경하는 함수] = useState(초기값)
  let [postTitle, setPostTitle] = useState('돈까스 맛집 추천');
  let otherPost = '인천 우동 맛집';

  return (
    <div className="App">
      <div className="nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ postTitle }</h4> {/* state를 화면에 출력 */}
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h4>{ otherPost }</h4> {/* 일반 변수 출력 */}
        <p>2월 18일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;

위 코드에서는 let [postTitle, setPostTitle] = useState('돈까스 맛집 추천'); 을 통해

postTitle이라는 상태와 setPostTitle이라는 상태 변경 함수를 생성했다.

JSX 코드에서 { postTitle } 를 사용해 postTitle의 값을 화면에 출력할 수 있다.

2.2 state와 일반 변수의 차이

일반 변수(let post = '인천 우동 맛집')는 값을 변경해도 화면이 자동으로 업데이트되지 않는다.
반면, state는 값이 변경될 때마다 자동으로 화면을 렌더링해준다.

3. React에서 onClick 이벤트 사용하기

React에서 특정 HTML 요소를 클릭할 때 원하는 코드를 실행하려면 onClick 이벤트 핸들러를 사용해야 한다. 일반 HTML에서의 onclick 속성과 비슷한 역할을 하지만, JSX에서는 조금 다른 문법을 사용한다.

<div onClick="alert('클릭')">안녕하세요</div>

일반 HTML에서는 다음과 같이 onClick 속성을 사용해 이벤트를 처리한다.

<div onClick = { 실행할 함수명 }>안녕하세요</div>

JSX에서는 위와 같이 작성한다.

**중괄호 { }**를 사용하여 자바스크립트 코드를 전달해야 한다.
onClick={} 내부에는 실행할 함수를 넣어야 한다. 단순한 자바스크립트 코드를 바로 작성할 수는 없다.

import React from 'react';

function App() {
  // 클릭할 때 실행할 함수 정의
  function handleClick() {
    console.log('버튼이 클릭되었습니다!');
  }

  return (
    <div className="App">
      {/* onClick 이벤트에 함수 전달 */}
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

button 태그에 onClick={handleClick}을 설정하여 버튼을 클릭했을 때 handleClick 함수가 실행된다.

3.1 함수 선언 방식 - 함수명 사용하기

function App() {
  function sayHello() {
    alert('안녕하세요!');
  }
  
  return <div onClick={sayHello}>클릭해보세요</div>;
}

미리 정의한 함수를 onClick 속성에 전달한다. 함수명을 전달하거나, 함수 본문을 직접 작성해도 된다.

3.2 함수 선언 방식 - 익명 함수 작성하기, arrow function

function App() {
  return <div onClick={() => alert('익명 함수 실행!')}>클릭해보세요</div>;
}

함수명을 만들지 않고, 바로 onClick 속성에 함수 코드를 작성한다.

function () {} 대신 () => {} 문법(arrow function)을 사용하여 간결하게 작성할 수 있다.

주의사항

// 올바른 사용법
<button onClick={() => console.log('클릭!')}>올바른 클릭</button>

// 잘못된 사용법 (실행할 코드가 함수가 아니므로 에러 발생)
<button onClick={console.log('잘못된 클릭')}>잘못된 클릭</button>

onClick 내부에는 반드시 함수가 들어가야 한다. 단순한 코드나 값을 넣으면 실행되지 않는다.

// 올바른 사용법: 함수명만 전달
<button onClick={handleClick}>클릭</button>

// 잘못된 사용법: 함수 호출(괄호)하면 컴포넌트 렌더링 시점에 바로 실행됨
<button onClick={handleClick()}>클릭</button>

onClick에 함수를 바로 전달할 때, 괄호를 붙이지 않도록 주의한다.