JSX에서 변수와 이벤트 핸들링

JSX는 리액트(React)를 사용할 때, UI를 정의하는 데 사용되는 문법 확장입니다. JSX는 자바스크립트 코드를 HTML과 비슷한 형태로 작성할 수 있게 도와주어 개발자가 더욱 직관적으로 코드를 작성할 수 있도록 합니다. 이번 글에서는 JSX 내에서 변수를 선언하고 사용하는 방법과 다양한 이벤트를 핸들링하는 방법을 구체적인 예제로 설명하겠습니다.

JSX 내에서 변수 사용하기

JSX 내에서 변수를 사용하는 것은 매우 간단합니다. 기본적으로 우리는 자바스크립트 코드를 JSX 내에 중괄호 {}를 사용하여 삽입할 수 있습니다. 예를 들어, 다음은 간단한 변수 선언과 JSX 내에서의 사용법입니다.

javascript
const name = 'John Doe';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {name}!</h1>;
  }
}

위 코드에서 보듯이, name 변수를 중괄호 {name}로 감싸서 JSX 내에서 사용하고 있습니다. 이를 통해 JSX는 Hello, John Doe!를 출력하게 됩니다.

동적 변수와 함수 사용

JSX 내에서는 정적 변수뿐만 아니라 동적 변수도 사용할 수 있습니다. 동적 변수는 주로 함수나 조건문과 함께 사용됩니다.

javascript
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'John',
  lastName: 'Doe'
};

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
}

여기서는 formatName이라는 함수를 정의하고, user 객체를 함께 사용하여 Hello, John Doe!를 출력합니다. 이 방법은 더 복잡한 데이터를 처리할 때 유용합니다.

이벤트 핸들링

JSX 내에서 이벤트를 핸들링하는 것은 HTML에서의 이벤트 핸들링과 매우 유사하지만, 자바스크립트 코드를 JSX 내에 포함시켜야 합니다. 다음은 클릭 이벤트를 처리하는 간단한 예제입니다.

javascript
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 이 바인딩은 콜백에서 `this`가 작동하려면 필요합니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

위 코드에서 handleClick 메서드는 버튼이 클릭될 때마다 state를 업데이트합니다. 이 업데이트는 버튼의 텍스트를 ON에서 OFF로, 또는 그 반대로 전환합니다.

이벤트 핸들링과 매개변수

이벤트 핸들러에 매개변수를 전달해야 하는 경우가 발생할 수 있습니다. 이를 위해서는 화살표 함수나 Function.prototype.bind 메서드를 사용할 수 있습니다.

javascript
class LoggingButton extends React.Component {
  handleClick(id, event) {
    console.log('Button clicked: ', id);
  }

  render() {
    return (
      <button onClick={(e) => this.handleClick(this.props.id, e)}>
        Click me
      </button>
    );
  }
}

위 코드에서 handleClick 메서드는 id와 이벤트 객체 event를 매개변수로 받습니다. 이벤트 핸들러가 호출될 때, this.props.id와 이벤트 객체가 handleClick 메서드에 전달됩니다.

조건부 렌더링

JSX 내에서 조건부 렌더링을 사용하는 것은 매우 중요합니다. 이는 특정 조건에 따라 다른 UI 요소를 보여줄 수 있게 합니다.

javascript
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false};
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <button onClick={this.handleLogoutClick}>Logout</button>;
    } else {
      button = <button onClick={this.handleLoginClick}>Login</button>;
    }

    return (
      <div>
        <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</h1>
        {button}
      </div>
    );
  }
}

위 예제에서 LoginControl 컴포넌트는 로그인 상태에 따라 다른 버튼을 렌더링합니다. 이처럼 조건부 렌더링을 통해 매우 유연한 UI를 만들 수 있습니다.

결론

이 글에서는 JSX 내에서 변수를 선언하고 사용하는 방법과 다양한 이벤트를 핸들링하는 방법을 구체적인 예제로 설명했습니다. 이러한 기술들은 리액트로 웹 애플리케이션을 개발할 때 매우 유용하며, 코드의 가독성을 높이고 유지보수를 쉽게 해줍니다. 앞으로도 꾸준히 연습하며 자신만의 노하우를 개발해 나가길 바랍니다.