리액트에서의 이벤트

이벤트란 사용자의 행동에 반응하는 기능을 정의하는 것을 의미한다. 이벤트의 종류는 다음과 같으며, 이 외의 다양한 이벤트가 존재한다.

• Keyboard Events
• Focus Events
• Mouse Events
• Touch Events
• UI Events

React에서 이벤트를 처리할 때 몇가지 유의사항이 있다.

• React의 이벤트는 카멜 케이스로 정의 해야한다.
  • onClick={buttonclickevent}(X)
  • onClick={buttonClickEvent}(O)
• 문자열이 아닌 JSX 함수명으로 전달 해야한다.
  • onClick="함수명()" (X)
  • onClick={함수명} (O)

이벤트 등록 방법

1. function키워드를 사용해 이벤트 함수를 작성한다.
2. onClick={함수명}으로 등록한 이벤트를 호출한다.

function ActionLink() {
  function handleClick(e) {
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}
Copy

handleClick(e)
: 클릭 시, console창에 문구를 출력하는 이벤트 함수

하이퍼링크 Default 설정
: React에서 이벤트가 실행될 때, 페이지가 자동으로 새로고침이 된다. 이를 방지하기 위해서 e.preventDefault()를 명시적으로 호출해야 한다.

아래 코드를 보시면 클릭 시, href로 이동하라는 동작이 있다.

<a href="#" onClick={handleClick}>
    Click me
</a>
Copy

위 코드를 동작하지 않고 onClick에 넘겨준 것만 실행되게 하기 위해선 preventDefault를 사용해야 한다.

function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
}
Copy

<a href ="#">는 링크를 설정하지 않은 상태이기 때문에 현재 페이지로 이동하여 새로고침 된다. 이를 방지하는 것이 e.preventDefault()이다.

---

Lists and Keys

여러가지 컴포넌트를 리스트로 구성하는 방법에 대해 학습해보자. 여기서 주의할 점은 여러가지 컴포넌트가 동시에 렌더링이 되기 때문에 컴포넌트를 구분하기 위해서는 key값이 필요하다. 여기서 key가 무엇이고 어떤 역할을 하는지 알아보겠다.

Keys

key는 리스트의 각 아이템이 추가되거나, 수정, 삭제될 때 리액트의 입장에서 빠르게 알아차릴 수 있도록 도와주는 역할을 한다.

key는 map()이 실행될 때 주어져야 한다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>/*map() 실행*/<li key={number.toString()}> /*key값 부여*/
    {number}
  </li>
);

가장 좋은 key값을 부여하는 방법은 다른 엘리먼트들과 다른 UNIQUE한 string값을 부여하는 것이다. 대부분, 데이터의 id값을 key값으로 부여한다.

const todoItems = todos.map((todo) =>
// <li>의 key값 id값을 부여
  <li key={todo.id}>
    {todo.text}
  </li>
);

만약, 변하지 않고 고정적인 key 값을 부여하는 것이 정말! 어렵다면 index를 사용하여 부여해도 된다. 하지만, 그럴 경우 array내 아이템의 순서가 바뀔 수도 있기 때문에 주의해서 사용해야 한다.

function ListItem(props) {
// 배열값을 반환하지 않으니, 키 값을 지정하지 않음
	return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
// 배열값을 반환하므로, 키 값을 지정
  	<ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);