React - Event Handling, List & Key

이소라·2022년 8월 2일
0

React

목록 보기
4/23

Event Handling

React에서 이벤트 처리하기

  • HTML의 DOM 요소에서 이벤트를 처리하는 방식과 매우 유사함

  • React에서 이벤트 이름은 소문자 대신 camelCase를 사용함

    • HTML에서의 클릭 이벤트의 이름은 onclick이고, React에서의 클릭 이벤트의 이름은 onClick임

  • React에서는 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달함

    • HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, React에서는 함수 형태의 객체를 전달함

  • React에서는 DOM 요소에만 이벤트를 설정 가능함

    • div, button, input, form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음
    • 전달받은 props를 컴포넌트 내부의 DOM 이벤트로는 설정 가능함
// Error
<MyComponent onClick={doSomething} />

// Good
function MyComponent(props){
  return (<div onClick={props.onClick}>
      {/* (...) */}
    </div>)
}
  • 기본 동작을 방지하기 위해서 preventDefault를 명시적으로 호출해야 함
    • HTML에서는 이벤트 핸들러에서 false를 반환해서도 기본 동작을 방지할 수 있음
// JavaScript
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>
// React
function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

  • React에서는 요소가 처음 렌더링될 때 리스너를 제공하면 됨

    • HTML에서는 DOM 요소가 생성된 후 리스너를 추가하기 위해 addEventListner를 호출해야 함

  • 클래스형 컴포넌트에서 이벤트 핸들러를 등록할 때는 this 바인딩을 해주어야 함

    • JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않음
    • 그러므로 이벤트 핸들러 메서드를 바인딩하지 않고 사용한다면, 메서드가 실제 호출될 때 this가 undefined를 가리키게 됨
    • 해결 방법
      1. 클래스 필드나 constructor 함수 내에서 this 바인딩을 함
      2. 핸들러 함수를 화살표 함수로 작성함
      3. 콜백 함수를 화살표 함수로 작성함
// 해결 방법 1
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

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

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

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

// 해결 방법 2
class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  handleClick = () => {
    console.log('this is:', this);
  }

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

// 해결 방법 3
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}
  • 콜백 함수를 화살표 함수로 작성하는 방법의 문제점
    • 컴포넌트가 렌더링될 때마다 다른 콜백이 생성됨
    • 콜백이 하위 컴포넌트에 props로서 전달된다면 하위 컴포넌트들도 리랜더링될 수 있음
    • 그러므로 constructor 함수 내에서 바인딩하거나 메서드를 화살표 함수로 선언할 것을 권장함

이벤트 핸들러에 인자 전달하기

  • 화살표 함수를 사용하여 인자를 전달하는 방법
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  • bind 함수를 사용하여 인자로 전달하는 방법
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  • 두 경우 모두 React 이벤트를 나타내는 e 인자가 id 뒤에 두 번째 인자로 전달됨
    • 화살표 함수를 사용하면 명시적을 인자를 전달해야 하는 반면에, bind를 사용할 경우 추가 인자가 자동으로 전달됨



List & Key

  • React에서는 중괄호에 배열을 받아서 요소 리스트로 출력할 수 있음
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</li>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root');
);
  • 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고창이 뜸

Key

  • React에서 key는 컴포넌트 리스트를 렌더링 했을 때 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움

    • key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지함
    • key가 있으면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있으므로 key 값을 설정해야함

  • key는 요소에 안정적인 고유성을 부여하기 위해 리스트 내부의 요소에 지정해야 함

    • 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋음
    • 대부분의 경우 데이터의 ID를 key로 사용함
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
  • 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있음
    • 항목의 순서가 바뀔 수 있는 경우, 인덱스를 key로 사용하는 것을 권장하지 않음
    • 리스트 항목에 명시적으로 key를 지정하지 않으면, React는 기본적으로 인덱스를 key로 사용함
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

Key로 컴포넌트 추출하기

  • key는 주변 배열의 context에서만 의미가 있음
    • 예) ListItem 컴포넌트를 추출한 경우, ListItem 안에 있는 <li> 요소가 아니라 <ListItem /> 요소가 key를 가져야 함
// bad
function ListItem(props) {
  const value = props.value;
  return (
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

// good
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')
);
  • map() 함수 내부에 있는 요소에 key를 넣어주는 것이 좋음

Key는 형제 사이에서만 고유한 값이어야 함

  • key는 배열 안에서 형제 사이에서 고유해야 하지만, 전체 범위에서는 고유할 필요 없음
    • 두 개의 다른 배열을 만들 때 동일한 key를 사용 가능함
function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);
  • React에서 key는 힌트를 제공하지만 컴포넌트로 전달되지 않음
    • key와 동일한 값이 필요하다면 다른 이름의 prop로 명시적으로 전달해야 함
const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
  • 위 예시에서 Post 컴포넌트는 props.id는 읽을 수 있지만, props.key는 읽을 수 없음

JSX에 map() 포함시키기

  • JSX를 사용하면 중괄호 안에 모든 표현식을 포함시킬 수 있으므로, map() 함수의 결과를 인라인으로 처리 가능함
function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}
  • map() 함수가 너무 중첩된다면 컴포넌트로 추출하는 것이 좋음



profile
이소라
이전 포스트

React - State

다음 포스트

React - Code Splitting, Suspense, Lazy

0개의 댓글