useState - React Hooks

useState는 state와 setState를 배열 형태로 return 해 줍니다.

const [state, setState] = useState(초기값);

• state에는 현재 상태 값이 들어있습니다.
• setState로 상태 값을 업데이트시켜줄 수 있습니다.
• setState값이 변경 될 때마다 업데이트(렌더링) 됩니다.

 

State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다.

setState((prevState) => {
	return newState;
})

//배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다.

State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기에 한 번만 동작하게 할 수 있습니다.

useState(()=>{
	return heavyWorks();
})

• useState의 초기값은 숫자 타입과 문자 타입을 가질 수 있습니다.
• const [count, setCout] = useState(0); 은 JavaScript의 "배열 구조 분해" 문법을 사용합니다.

---

기존의 React 버전과 Hook을 사용한 버전의 차이점

state 가져오기

클래스 컴포넌트는 this.state.count를 사용.

<p>You clicked {this.state.count} times</p>

함수 컴포넌트는 count를 직접 사용.

<p>You clicked {count} times</p>

state 갱신하기

클래스 컴포넌트는 갱신을 위해 this.setState()를 호출.

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

함수 컴포넌트는 setCount 변수를 호출.

<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

 

 

Using the State Hook – React