keyEvent / ref / LifeCycle

오늘은 keyEvent와 focusing을 주기 위해 사용하는 ref 그리고 LifeCycle에 대해서 설명드리도록 하겠습니다.

keyEvent란?

: 키보드에서 발생하는 이벤트로 charCode나 인자로 받는 event.key를 통해서 접근할 수 있습니다.

[예시]

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode

---

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

}

이벤트 객체의 charCode를 뽑아내면 13으로 나오는 정수 값이 Enter 키를 의미하기 때문에 엔터를 칠 경우 handleClick() 메소드가 발생하게 됩니다.

handleKeyPress(e) {
    // event
    if (e.key === "Enter") {
        // charCode >> 엔터
        this.handleClick();
    }
}

마찬 가지로 다음과 같이 진행하게 되면 Enter로 바로 인식하여 handleClick() 메소드가 발생하게 됩니다.

단! handleKeyPress를 사용하기 위해서는 생성자에서 binding 작업이 필요하며, 사용할 곳에서 onKeyPress 함수를 사용하여 본 메소드를 호출해야 합니다.

*** 바인딩 ***

export default class ContactCreate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            phone: "",
        };



        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleKeyPress = this.handleKeyPress.bind(this);
    }

*** Rendering ***

<input type="text"
       name="phone"
       placeholder="phone"
       value={this.state.phone}
       onChange={this.handleChange}
       onKeyPress={this.handleKeyPress}/>

이번엔 ref에 대해 설명드리도록 하겠습니다.

ref란?

 reference를 의미하며, DOM 요소에 이름을 달아주는 역할을 합니다.

 HTML의 id와 비슷하지만 다른 점은 ref는 id와는 다르게 DOM 요소 뿐만 아니라 컴포넌트에도 사용이 가능합니다. 

 또한 해당 컴포넌트가 가지고 있는 메소드 및 변수들을 사용할 수 있습니다.

[예시]

https://velopert.com/1148

constructor(props){

  ....

}

this.nameInput.focus();

....

render() {
    return (
        <div>
            <h2>Create Contact</h2>
            <p>
                <input type="text"
                       name="name"
                       placeholder="name"
                       value={this.state.name}
                       onChange={this.handleChange}
                       ref={(ref) => this.nameInput = ref}/>
            </p>

다음 코드를 보면 ref를 통해서 nameInput 변수를 그대로 가져다 쓰는 것을 볼 수 있을 것입니다.

이렇게 사용된 nameInput 변수는 생성자 쪽에서 focus() 함수로 포커싱 해주게 되면, 

해당 input 태그가 (컴포넌트가) 포커싱되게 됩니다. 

ref의 사용방법은 다음과 같이 callback 함수로 사용하는 방법이 있습니다. 

속성 값으로 ref를 주고 { (ref) => 컴포넌트가 가지고 있는 변수 및 메소드 = ref } 

이런 식으로 접근하여 사용하게 됩니다.

이렇게 하게 되면 DOM 요소에서 document.getElementById를 이용하여 id값을 찾아서 일일이 작업하지 않아도

되는 장점이 있습니다.

그렇지만 이렇게 작업하면 모두들 ref를 사용하시겠죠? 

ref의 단점을 말씀드리겠습니다.

ref는 state 및 props로 해결할 수 있는 부분에선 사용하지 않습니다.

state나 props로 해결할 수 없는 부분에서만 사용하는 것이 좋으며 유지보수에도 좋습니다.

ref는 컴포넌트에 의해 렌더링된 DOM에 직접 작업을 처리해야만 할 때 사용하거나 다른 웹프레임워크가 혼용될 때

즉, 큰 프로젝트에서 React 컴포넌트가 사용될 경우 주로 사용하게 됩니다.

마지막으로 LifeCycle에 대해 소개해드리겠습니다.

React.js에서 사용하는 LifeCycle에는 총 7가지의 상태가 존재합니다.

[예시]

https://velopert.com/1130

https://reactjs.org/docs/react-component.html

1. componentWillMount() 

- 컴포넌트가 DOM 위에 만들어지기 전에 실행됩니다. (렌더링 이 전에 실행)

2. componentDidMount() 

- 컴포넌트가 만들어지고 처음 렌더링을 한 다음에 실행되는 메소드입니다.

- 다른 자바스크립트 프레임워크를 연동하거나 setTimeout , setInterval 및 AJAX 처리 등을 사용할 수 있습니다.

3. componentWillReceiveProps(nextProps)

- 컴포넌트가 prop을 새로 받았을 때 실행됩니다.

- props에 따라 state를 업데이트 해야 할 때 사용하면 좋습니다.

- this.setState()를 사용해도 됩니다. (추가 렌더링을 하지 않음)

4. shouldComponentUpdate(nextProps,nextState)

- prop을 받은 뒤에 prop 혹은 state가 변경될 경우 re-rendering 할 지 말지를 정하는 메소드입니다.

- nextProps.id 와 this.props.id (기존 props의 id) 값이 동일할 경우 true를 반환하고 동일하지 않을 경우 
  false를 반환하게 됩니다. 

5. componentWillUpdate(nextProps,nextState)

- 컴포넌트가 업데이트 되기 전에 실행됩니다. (컴포넌트 변경 될 때)

- this.setState()를 사용할 수 없습니다. >> 업데이트 전에 변경하게 되면 무한 루프에 빠지기 때문

6. componentDidUpdate(prevProps,prevState)

- 업데이트가 완료된 뒤 , 즉 컴포넌트가 변경되어 re-rendering을 한 다음에 실행됩니다.

- this.setState()를 사용할 수 없습니다. 

7. componentWillUnmount()

- 컴포넌트가 DOM에서 사라진 후 실행되는 메소드입니다. 

다음에는 지금까지 한 내용을 바탕으로 출석부를 만들어 보겠습니다. 감사합니다.