[ React ] Hook - state

Hook

React v16.8에 추가된 기능으로, Class Component를 작성하지 않고도 state와 다른 React

의 기능들을 사용할 수 있게 해주는 기능이다. React Hook 나오기 전에는 Component의 상태를 관리하기 위해서는 Class Component를 작성하여 관리해 주어야 했다. 

 

Class Component state 관리 - this.state

React Hook 나오기 이전에 Class component로 state 관리를 하였다.

class component는 function component에 비해 복잡하고 오류 발생이 쉬우며 유지 보수가 힘들다. 

import React, { Component } from "react";

class UserFormClass extends Component{
	state = { name : "", email : "" };
    handleClick = ( { target : { name, value } } ) => {
    	this.setState({ [name] : value } );
    };
    
    render() {
    	const { name, email } = this.state;
        
        return(
        	<>
            	<label>
                	Name :
                    	<input type = "text" name ="name" value = {name} onChange={this.handleClick}/>
                </label>
                
                <label>
                	Email :
                    	<input type = "email" name = "email" value = {email} onChange = {this.handleClick}/>
                </label>
            </>
        );
    }
}

 

Function Component State 관리 - setState()

React Hooks에서 제공하는 useState() 함수를 사용하면 현재의 state 값과 이 값을 update하는 함수를 쌍으로 반환한다. state 값을 update해주는 함수를 event handler나 다른 곳에서 호출하여 state 값을 관리할 수 있다. 

 

// const [ < 상태 값 저장 변수 > , < 상태 값 갱신 함수 > ] = useState( < 상태 초기 값 > );
const [ UserName , setUerName ] = useState("");

※ 상태 값 갱신 함수를 사용하여 state를 변경하지 않고 state를 직접 다른 값으로 할당하거나 변경하면 해당 화면에 반영되지 않는다. state 값을 변경하려면 반드시 상태 값 갱신 함수를 사용하여 변경해주어야 한다. 

import React, { useState } from "react";

function UserFormFunction(){
	const [ name, setName ]= useState("");
    const [ email, setEmail ] = useState("");
    
    return (
    	<>
        	<label>
            	Name : 
                	<input
                    	type = "text"
                        name = "name"
                        value = {name}
                        onChange = { ( {target : {value} }) => setName(value)}/>
            </label>
            
            <label>
            	Email :
                	<input 
                    	type = "email"
                        name = "email"
                        value = {email}
                        onChange = { ( {target : { value } ) => setEmail(value)}/>
            </label>
        </>
    );
}

 

---

What Hook?

Hook은 function component에서 React State와 생명주기 기능 ( Lifecycle features ) 을 "연동(hook into)"할 수 있게 해주는 함수이다. 

- Hook은 class 안에서는 작동하지 않는다. 

- Hook은 class 없이 React를 사용할 수 있게 해준다.

 

1. 장점

- logic의 재사용 유연

- class component의 복잡성, 재사용성의 단점 해결

 

2. Hook API

- usetState

- useEffect

- useContext

- useRef

- useMemo

- useCallback..... 등등

 

 

 

 

출처 : https://ko.reactjs.org/docs/hooks-overview.html