Hooks / useState

목차

 

 

드디어 훅을 포스팅하게 되었다.

훅이 좀 개수가 되니깐

한동안은 포스트 아이템 걱정을 안해두 되겠다

Hooks란

Hooks란 함수컴포넌트의 state(컴포넌트 안의 자료형)을 Lifecycle과 연동해주는 함수이다.

클래스형 컴포넌트에서는 작동하지 않는데, 그도 그럴게

클래스형에서는 state와 lifecycle 함수가 있어 그냥 직접 사용하면 된다.

life Cycle

또한 if / while 등 분기문에서 사용할 수 없다.

 

useState

useState는 클래스형 컴포넌트에서 state 부분을 담당하는 훅스로

const [state,setState] = useState('초기값');
// state 변수 명
// setState(값변환)
// useState(초기값)

이렇게 세가지로 구성되어 있다.

 

일단 const(변화불가능한 데이터 종류)로 정의한 뒤,

변수명을 정하고, (예시에선 state)

해당 변수를 변화시킬 함수명을 정한다 (예시에선 setState)

마지막으로 훅스를 사용한다는 useState와 괄호 안에 초기값을 넣는다.('') 이렇게 null도 가능하다.

 

사용

import React, { useState } from 'react';

export default function App(){
  const [count, setCount] = useState(0);

  function handleOnClick(){
    setCount(count+1);
  }

  return(
    <>
      <button onClick={handleOnClick}>{count}</button>
    </>
  );
}

해석

import React, { useState } from 'react';

export default function App(){
  const [count, setCount] = useState(0);
  // count라는 변수를 선언
  // setCoount 함수로 count를 변화시킬 수 있음
  // 초기값 0

  function handleOnClick(){ // 버튼을 누를시 실행
    setCount(count+1); // setCount 함수안에 변경할 값을 기입
  }

  return(
    <>
      <button onClick={handleOnClick}>{count}</button>
      // 버튼을 누르면 handleOnClick함수가 실행됌
    </>
  );
}

끝