< 목차 >
- Hook
1. Hook
Hook이란?
Hook이란 함수 컴포넌트에서 React state와 생명주기 기능을 “연동"할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해준다. 하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않고 있다.
State Hook
ex)
import React, { useState } from 'react';
function Example() {
// "count"라는 새 상태 변수를 선언합니다
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}위의 예시 함수의 useState가 바로 Hook이다. Hook을 호출해 함수 컴포넌트 안에 state를 추가하였다. 이 state는 컴포넌트가 다시 렌더링 되어도 유지된다.
useState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다.
useState는 인자로 초기 state값을 하나 받아준다. 카운터는 0부터 시작하기 때문에 위 예시함수에서는 초기값을 0으로 넣어준 것이다. useState Hook의 state는 객체일 필요가없다.
state 변수 선언하기
클래스를 사용할때, constructor 안에서 this.state를 {count : 0}으로 설정하여 count을 0으로 초기화했다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}-
함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없다. 대신, useState Hook을 직접 컴포넌트에 호출한다.
-
useState를 호출하는것을 "state 변수"를 선언할 수 있다고 한다. -
useState의 인자로 무엇을 넘겨주어야 할까? =>useState의 인자로 넘겨주는 값은 state의 초기 값이다. 함수 컴포넌트와는 달리 객체일 필요가 없고, 숫자 타입과 문자 타입을 가질 수 있다. -
useState는 무엇을 반환할까? => state 변수, 해당 변수를 갱신할 수 있는 함수 이 두가지 쌍을 반환해준다.
ex)
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0); // => `count`라는state변수를 선언하고 0으로 초기화한다.
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>// 버튼을 클릭하면 `setCount`함수를 호출하여 state변수를 갱신한다. React는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링 해준다.
Click me
</button>
</div>
);
}2. 회고
어제 useState공부가 부족하다 생각하여 짧게나마 React공식문서를 학습하면서 다시한 번 기초를 다졌다. React가 재밌기는 하지만 알듯말듯하기도 하여 확실히 짚고 넘어가고 싶다! 오늘은 useState에 대해 다시한 번 복습을 해봤는데 useState는 중요하다 생각되서 내일 짧게나마 한 번 더 학습을하고 useEffect를 학습해봐야겠다!!
