React CreateRef

* Class 에서

①   함수로

- 얘를 쓰는 경우 :  함수여서 ref를 설정할 때 자유도가 조금 있다. 미세하게 조정가능한 장점이 있다.

inputRef;
onInputRef = (c) => { this.inputRef = c ; };

 

② 얘는 세팅시 current 필요

inputRef = createRef();

inputRef.current = "~~~";
inputRef.current.focus();

 

* Hooks에서

const React = require('react');
const { useState, useRef } = React;

const WordRelay = () => {
    const [word, setWord] = useState('aaa');
    
    const inputRef = useRef(null);

    const onSubmitForm = (e) => {
        e.preventDefault();
        setResult('딩동댕');
        setWord(value);
        setValue('');

        inputRef.current.focus();
    }

    const onChangeInput = (e) => {
        setValue(e.currentTarget.value);
        // currentTarget : 이벤트 생성 위치
        // target :  이벤트 발생 위치
    };

    
    return (
        <>
            <div>{ word }</div>
            <form onSubmit= { onSubmitForm }>
                <label htmlFor="wordInput">글자를 입력하세요</label>
                {/* controlled Input : value 와 onChange 가 있는거. */}
                {/* uncontrolled Input 은 이런거 없는것. react에서는 controlled Input을 권장 */}
                
                <input 
                    id="wordInput" 
                    className="wordInput" 
                    ref= { inputRef } 
                    value= { value } 
                    onChange= { onChangeInput }/>
                {/* value 와 onChange 세트로 넣을거 아니면 defaultValue 를 사용해야한다. */}
                <button>입력!!!!!!!!!!!!!!</button>
            </form>
            <div>{ result }</div>
        </>
    )
}

module.exports = WordRelay;// 이 줄을 추가해야 client.jsx 에서 불러올 수 있다.