[React] 2-10. class를 Hooks로 변환하기

1. state부분을 setState로 변경하기

class WordRelay extends Component{
    state = {
        word: '가나다',
        value: '',
        result: '',
    };

//////////////////////////////////////////

const WordRelay = () => {
    const [word, setWord] = useState('제로초');
    const [value, setValue] = useState('');
    const [result, setResult] = usetState('');

}
    

 

2. ref부분을 useRef로 변경하기, Ref를 사용할 때에는 current를 붙여서 사용해야한다.  

     input;

    onRefInput = (c) => {
        this.input = c;
    }

///////////////////    
    
    const inputRef = useRef(null);

3. render()만 지우기

render() {
        return(
            <>
            <div>{this.state.word}</div>
            <form onSubmit = {this.onSubmitForm}>
                <input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
                <button>입력!</button>
            </form>
            <div>{this.state.result}</div> 
            </>
        ); 
    }

/////////////////////////////////////////////////

return(
        <>
        <div>{word}</div>
        <form onSubmit = {onSubmitForm}>
            <input ref={inputRef} value={value} onChange={onChangeInput} />
            <button>입력!</button>
        </form>
        <div>{result}</div> 
        </>
    ); 

4. this부분 지워주기