1. React의 이벤트 처리

웹 애플리케이션에서 사용자와의 상호작용은 필수적입니다. 버튼을 클릭하거나, 폼에 데이터를 입력하거나, 마우스를 움직이는 등의 모든 사용자 동작을 '이벤트'라고 합니다. React에서는 이러한 이벤트를 처리하는 독특한 방식을 가지고 있으며, 이를 통해 사용자와 상호작용하는 동적인 UI를 만들 수 있습니다.

1.1 React 이벤트의 특징

React의 이벤트 처리 방식은 HTML의 이벤트 처리 방식과 유사하지만 몇 가지 차이점이 있습니다.

1. React에선 이벤트 이름은 카멜케이스(camelCase)를 사용합니다. DOM의 이벤트는 소문자를 사용합니다.

2. React에선 이벤트 핸들러를 함수로 전달합니다. DOM은 문자열로 이벤트 핸들러를 전달합니다.

// HTML
<button onclick="handleClick()">클릭</button>
<button onclick="console.log('clicked')">클릭</button>

// React
<button onClick={handleClick}>클릭</button>
<button onClick={() => console.log('clicked')}>클릭</button>

1.2 이벤트 핸들러 작성 방법

관습적으로 handle로 시작하며 이벤트명을 이어 붙인 이벤트 핸들러 명명법이 일반적입니다. 예) event + click

function Button() {
  // 1. 함수 선언식
  function handleClick() {
    console.log('클릭되었습니다!');
  }

  // 2. 화살표 함수
  const handleMouseEnter = () => {
    console.log('마우스가 들어왔습니다!');
  };

  return (
    <>
      <button onClick={handleClick} onMouseEnter={handleMouseEnter}>
        클릭하세요
      </button>

      {/* JSX 내에서 인라인으로 정의 */}
      <button
        onClick={() => {
          alert('클릭!');
        }}
      >
        클릭하세요
      </button>
    </>
  );
}

{/* 잘못된 예 */}
<button onClick={handleClick()}>click<button>
<button onClick={alert('alert')}>

{/* 옳은 예 */}
<button onClick={handleClick}>click<button>
<button onClick={() => alert('alert')}>

2. 실습 (1)

2.1 이벤트 사용해보기

p태그에 마우스 이벤트를 추가하여 다음 동작을 구현해보세요.

[요구 사항]

• 마우스 이벤트(onMouseEnter, onMouseLeave) 핸들러 구현합니다.
• p태그에 마우스를 올리면 콘솔에 "안녕하세요!" 메시지를 출력합니다.
• p태그에서 마우스를 내리면 콘솔에 "안녕히가세요!" 메시지를 출력합니다.

function App() {
  return (
    <div>
      <p>여기에 마우스를 올려보세요!</p>
    </div>
  );
}

export default App;

2.2 상태관리 추가하기

[요구 사항]

• message라는 상태를 생성하고 초기값을 "아직 방문하지 않았습니다."로 설정합니다.
• p태그에 마우스를 올리면 message 상태를 "안녕하세요!"로 변경합니다.
• p태그에서 마우스를 내리면 message 상태를 "안녕히가세요!"로 변경합니다.
• message 상태값을 p태그 아래에 새로운 div 태그를 만들어 보여줍니다.
• 최종적으로 마우스를 올리고 내릴 때마다 message가 화면에서 실시간으로 변경되어야 합니다.

function App() {
  const handleOnMouseEnter = () => {
    console.log('안녕하세요!');
  };

  const handleOnMouseLeave = () => {
    console.log('안녕히가세요!');
  };

  return (
    <div>
      <p onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
        여기에 마우스를 올려보세요!
      </p>
    </div>
  );
}

export default App;

3. 실습 (2)

로그인 기능이 있는 간단한 애플리케이션을 만들어보세요.

[요구사항]

1. 파일 구조

src/components/Login.jsx
src/components/Homepage.jsx
src/App.jsx

2. Login.jsx 구현사항

   • id와 password의 입력값을 각각 상태로 관리합니다.
   • 로그인 버튼 클릭 시 입력된 정보와 전달받은 user 정보를 비교합니다.
   • 아이디 입력란이 비어있다면 "아이디를 입력하지 않았습니다." 알림을 표시합니다.
   • 비밀번호 입력란이 비어있다면 "비밀번호를 입력하지 않았습니다." 알림을 표시합니다.

3. App.jsx 구현사항

   • 로그인 여부를 상태를 생성하여 관리합니다.
   • user 객체를 Login 컴포넌트에 props로 전달합니다.
   • Login 컴포넌트에서 로그인 성공 시 isLogin 상태를 true로 변경합니다.
   • isLogin 값에 따라 조건부 렌더링을 수행합니다.
     • false일 때: Login 컴포넌트 렌더링
     • true일 때: Homepage 컴포넌트 렌더링

4. Homepage.jsx 구현사항

   • "환영합니다!" 메시지를 표시합니다.
   • 로그아웃 버튼을 만들고, 클릭 시 화면에는 Login 컴포넌트가 렌더링됩니다.

function Login() {
  return (
    <form>
      <label>
        아이디 : <input type="text" />
      </label>
      <br />
      <label>
        비밀번호 : <input type="password" />
      </label>
      <button type="submit">로그인</button>
    </form>
  );
}

export default Login;

const user = {
  idUser: 'jaehyun@weniv.com',
  pwUser: 1234,
};