[React] 이벤트 처리와 조건부 렌더링

이번에는 리액트에서 사용자 인터랙션을 다루는 핵심 기능인 이벤트 처리(Handling Events) 와 UI를 상황에 따라 다르게 표현하는 조건부 렌더링(Conditional Rendering) 에 대해 정리했다. 실제로 버튼 클릭, 입력값 변경 등 사용자와 상호작용할 때 매우 자주 사용하는 개념들이다.

---

Handling Events - 이벤트 처리

Event의 정의 및 다루기

이벤트(Event)는 사용자로부터 발생하는 상호작용을 의미한다. 예를 들어 버튼 클릭, 키보드 입력, 마우스 이동 등이 모두 이벤트에 해당된다.

리액트에서는 DOM 이벤트를 처리할 때 HTML과 약간 다른 방식으로 이벤트 핸들러를 설정한다.

• camelCase를 사용한다 (예: onClick, onChange)
• 문자열이 아닌 함수를 핸들러로 전달한다

function ClickButton() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return <button onClick={handleClick}>클릭</button>;
}

이벤트 객체 사용하기

이벤트 핸들러 함수는 이벤트 객체(event)를 매개변수로 받을 수 있다. 이 객체에는 이벤트에 대한 정보가 담겨 있다.

function InputLogger() {
  function handleChange(e) {
    console.log(e.target.value);
  }

  return <input onChange={handleChange} />;
}

---

Conditional Rendering - 조건부 렌더링

조건부 렌더링의 정의

조건부 렌더링은 말 그대로 어떤 조건에 따라 다른 UI를 보여주는 것이다. 리액트에서는 자바스크립트 표현식과 JSX를 조합해서 조건에 따라 컴포넌트를 다르게 렌더링할 수 있다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

인라인 조건 표현식 (Inline Conditions)

조건에 따라 일부 JSX만 보여주고 싶을 때, 삼항 연산자 또는 AND 연산자 (&&)를 사용할 수 있다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <p>읽지 않은 메시지가 {unreadMessages.length}개 있습니다.</p>
      )}
    </div>
  );
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      {props.isLoggedIn ? '로그아웃' : '로그인'}
    </button>
  );
}

이처럼 조건부 렌더링은 UI 흐름을 제어하는 데 핵심적인 역할을 한다.

---

리액트에서 이벤트를 처리하고, 조건에 따라 UI를 다르게 보여주는 방식은 매우 직관적이다. 하지만 JSX 안에서 자바스크립트를 적절히 조합하는 감각을 익히는 데는 연습이 필요하다.