리액트 예제 - KeyPress이벤트, ref 사용하기

코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/Contact

keypress 이벤트

phone에 값을 입력한후 "Enter"를 쳐서 Create 버튼을 클릭한 것과 같은 효과를 내고 싶어요.

이미 사용자 인터페이스는 그려진 상태에서 키보드의 Keypress 이벤트를 이용해
"엔터가 입력되면" create 메서드를 실행하게 하겠습니다.

이벤트를 달아줍니다.

render() {
    return (
      <div>
        <h2>Create Contact</h2>
        <div>
          <input
			...
          />
          <input
			...
            onKeyPress={this.handleKeyPress} <- 이렇게요.
          />
        </div>
        <button type="button" onClick={this.handleClick}>
          Create
        </button>
      </div>
    );
  }

addEventListener랑 똑같습니다.
핸들러 함수를 선업합니다.

  handleKeyPress = (e) => {
    // if(e.charCode === 13) { //  deprecated
    //   this.handleClick();
    // }

    if (e.key === "Enter") {
      this.handleClick();
    }
  };

ref

React.js에서 document.getElementById(id).focus()를 구현하는 방법입니다.

콜백 함수를 이용해서 focus를 사용합니다.

ref를 걸어놓을 DOM에 다음과 같이 ref를 할당합니다.

render() {
    return (
      <div>
        <h2>Create Contact</h2>
        <div>
          <input
			...
            ref={(ref) => {
              this.nameInput = ref; <- 이렇게 ref를 해주고
            }}
          />
          <input
			...
          />
        </div>
        <button type="button" onClick={this.handleClick}>
          Create
        </button>
      </div>
    );
  }

create한 값을 입력할때마다 input에 focus가 가게됩니다.

  handleClick = () => {
	...

    this.nameInput.focus(); <-
  };

ref는 DOM 엘리먼트 외에 컴포넌트에도 걸어놓고 ref를 통해 컴포넌트의 메서드를 호출할 수도 있습니다.

render메서드, contructor 내부에서는 ref에 접근할 수 없습니다.

localstorage

서버를 구현하지 않고 정말 간단하게 데이터를 저장하면서 테스트하고싶을때 사용하면 될것 같습니다.

세션 storage와 비슷하지만 만료기간이 없다네요.
MDN에 설명이 되어있습니다. 또한, string으로 저장해야하기 때문에 저장할 데이터를 JSON.stringify로 직렬화한 후 읽을때는 JSON.parse로 객체로 담으면 되겠습니다.

자 Contact 컴포넌트에 연락처 데이터를 저장해놨는데 hot devserver를 내릴때마다 데이터 사라지죠.

바꿔보겠습니다.
라이프 사이클 메서드를 이용합니다.
컴포넌트가 마운트되기 전에 즉 렌더 되기전에 ComponentWillMount에서 localstorage에 저장된 contactData를 읽어오려고 했는데요. deprecated 라고 경고가 떠서 contructor 위치에 코드를 추가하였습니다.

업데이트가 될때마다 실행되는 componentDidUpdate를 통해 중간중간 바뀐데이터는 localstorage에 저장합니다.

constructor(props) {
    super(props);
    this.state = {
      selectedKey: -1,
      keyword: "",
      contactData: [
        {
          name: "Abet",
          phone: "010-0000-0001",
        },
        {
          name: "Betty",
          phone: "010-0000-0002",
        },
        {
          name: "Charie",
          phone: "010-0000-0003",
        },
      ],
    };

    const contactData = localStorage.contactData;

    if (contactData) {
      this.state = {
        ...this.state,
        contactData: JSON.parse(contactData),
      };
    }
  }
	
  ...

  componentDidUpdate(prevProps, prevState) {
    if (
      JSON.stringify(prevState.contactData) !==
      JSON.stringify(this.state.contactData)
    ) {
      localStorage.contactData = JSON.stringify(this.state.contactData);
    }
  }

출처: [React.js] 강좌 4-7편: Contact 엑스트라 기능 구현 | KeyPress, ref