이벤트에 응답하기

이벤트 핸들러에 함수를 전달하기

• 파라미터가 없을 경우 (올바른 예시)

function handleClick(string) {
    alert('Hi');  
}

<button onClick={handleClick}>Click Me</button>

• 파라미터가 존재할 경우

=> 이 경우 함수는 컴포넌트가 렌더링 될 때마다 실행 (잘못된 예시)

function handleClick(string) {
    alert(`${string}`);  
}

<button onClick={handleClick('Hi')}>Click Me</button>

=> 추가적인 파라미터가 필요할 경우 화살표 함수를 사용 (올바른 예시)

function handleClick(string) {
    alert(`${string}`);  
}

<button onClick={() => handleClick('Hi')}>Click Me</button>

이벤트 전파

전파를 차단하는게 좋은 습관일까?

• 이벤트 전파를 차단하는 이유

1. 특정 이벤트에 대한 처리를 하나의 컴포넌트에서만 하고 싶을 때
2. 부모와 자식 간의 이벤트 충돌 방지
3. 전파를 차단하면 이벤트 핸들링의 흐름이 명확 > 명확한 코드 흐름 유지

• 이벤트 전파를 차단하지 않는 이유

1. 부모 컴포넌트에서 하나의 핸들러를 작성하여 자식 컴포넌트의 여러 이벤트를 한꺼번에 처리 > 코드의 재사용 유지보수 쉬워짐
2. 부모 컴포넌트에서 상태 관리를 중앙 집중식으로 처리 가능

전파 차단은 특정 상황에서 유용.
But 남용하면 코드가 덜 유연해지고, 애플리케이션의 동작을 추적하기 어려울 수 있음.

State: 컴포넌트의 기억 저장소

React는 이런 종류의 컴포넌트별 메모리를 state라고 부름.

첫 번째 훅 만나기

React에서 useState와 같이 “use”로 시작하는 다른 모든 함수를 훅이라고 함

1. 갤러리 완성하기

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);
  const [active, setActive] = useState(true);

  function handleNextClick() {
    if(index >= sculptureList.length - 1) {
      // handleActivate();
      setIndex(index - sculptureList.length + 1);
    } else {
      setIndex(index + 1);
    }
  }

  function handlePreviousClick() {
    if(index <= 0) {
      // handleActivate();
      setIndex(sculptureList.length - 1);
    } else {
      setIndex(index - 1);
    }
  }

  function handleActivate() {
    if(index >= sculptureList.length - 1) {
      setActive(!active);
    }
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      {
        active &&
        <button 
          onClick={handleNextClick}>
          Next
        </button>
      }
      <button 
          onClick={handlePreviousClick}>
          Previous
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        by {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} of {sculptureList.length})
      </h3>
      <button onClick={handleMoreClick}>
        {showMore ? 'Hide' : 'Show'} details
      </button>
      {showMore && <p>{sculpture.description}</p>}
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
    </>
  );
}

2. 폼 입력 불가 문제 고치기

import { useState } from 'react';
export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  function handleReset() {
    setFirstName('');
    setLastName('');
  }

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input
        placeholder="First name"
        value={firstName}
        onChange={handleFirstNameChange}
      />
      <input
        placeholder="Last name"
        value={lastName}
        onChange={handleLastNameChange}
      />
      <h1>Hi, {firstName} {lastName}</h1>
      <button onClick={handleReset}>Reset</button>
    </form>
  );
}