React Hook(useState)

React Hook은 React 내에서 Function component를 Class component 와 비슷하게 사용할 수 있도록 도와주는 기능이에요.

지난 포스트에서 언급한것 처럼

hook을 사용하면 Class component에서만 사용할 수 있었던 state와 lifecycle을 Function component에서도 이용 가능해요.

이로인해 Class와 Function의 경계가 불분명해지고 있습니다.

 

Hook을 통해 Function에서 state와 lifecycle을 사용할 수 있다고 크게 2가지를 언급했는데 

state는 userState, lifecycle은 useEffect로 가능합니다.

 

지난 내용을 모르신다면

cnwnsdms.tistory.com/entry/React-class-vs-function

React class vs function

을 클릭해주세요

 

 

useState

 

useState를 사용하기 위해서는 먼저 import를 하셔야하는데 

 

import React, {useState} from 'react';

 

로 (또는 React.useState로) useState 기능을 쓸 수 있습니다.

 

React.s useState

useState(); 는 배열로 2개의 값을 가져옵니다.

첫번째 값은 초기 state를 설정해주는 것이고

두번째 값은 함수의 상태를 바꾸는 함수가 내장되어있습니다.

 

위의 코드를 풀어서 해석해보면

 

var [_state, setState] = useState(0);

은 _state 의 값이 초기에는 0 이고

초기의 0인 _state의 값을 setState 라고 명명된 함수를 통해 바꾸어 주겠다는 뜻입니다.

 

해당 코드를 실행해서 +1 버튼을 누르면 _state값이 +1, -1 버튼을 누르면 -1이 되는 것을 알 수 있습니다.

 

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.