[React - Hook] React에서 변하는 데이터 처리하는방법 ( Hook이 뭐고 useState는 뭐야? )

 

버튼을 누를때마다  숫자가 증가하게 보이고 싶은데 ... 어떻게 해야하지 ...?

 

 

Hook을 알기위해 알아야 할 내용

 

컴포넌트에는 두가지 종류가 있다.

 

1. Class Compoent  2. Fuction Compoent

 

---

Class Compoent는 ?

 

-  생성자에서 State를 정의한다

 

-  setState() 함수를 통해 state를 업데이트 한다.

 

-  컴포넌트의 생명주기 함수가 명확히 정의되어 있어 가져다 사용하면 된다.

 

 

Q. state가 무엇인지 궁금하다면?

https://mandelina-code.tistory.com/79

[React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까?

 

---

 

BUT  Class컴포넌트와 다르게 Fuction Component는?

별도로 state를 정의해서 사용하거나 생명주기에 맞춰 코드를 실행할 수 없다

 

따라서 이런 기능을 지원하기 위해 나온것이 Hook!

 

Hook?

- React 16.8에서 새롭게 등장한 개념이다.

 

- Component에서 중요한 개념인 State는 렌더링에 필요한 데이터를 관리한다.

 

즉, 리액트의 state와 생명주기에 갈고리(Hook)를 걸어서 원하는 시점에 정해진 함수를 실행하도록 만드는것이다.

 

▷  이때 실행되는 함수가 Hook! 

 

 

Hook의 종류중 useState란? 

 

 

- Fuction Component에서 state를 사용하기 위한 Hook이다.

 

- return 값으로는 배열이 나오는데 첫번째항목은 state로 선언된 변수, 두번째 항목은 해당 State의 set함수이다.

 

const [변수명 , set함수명 ] = useState(초깃값) ;

 

 

[ 예제1 - 변수가 바뀌어도 재렌더링 X ]

function LikeBtn(props) {
  let like = 0;

  function hadleClickLike() {
    like += 1;
    console.log(like);
  }
  return (
  < >
      <button onClick={hadleClickLike}>
        like <span>{like}</span>
      </button>
    </div>
  </>
  );
}

export default LikeBtn;

위 코드를 사용하여 버튼을 누를때마다 like값을 증가 시켜보자!

console에는 증가하는 값이 제대로 찍히지만 웹브라우저 상에서는 그렇지 않음을 확인 할 수 있다.

 

왜일까?  변수가 변할때 마다 다시 그려줘야하는지 모르고 있기 때문이다!

 

---

 

따라서 useState를 사용하여 변수가 변할때마다 재렌더링 시켜주자!

 

 

[ 예제2 - useState를 사용 ]

 

import React, { useState } from 'react';

function LikeBtn(props) {
    const [like, setLike] = useState(0);  //초깃값을 0으로 초기화
  
   function hadleClickLike() {
    setLike(like + 1);
  }
  
    return(
        <>
            <button onClick={hadleClickLike}>like <span>{like}</span></button>
        </>
    );
}
export default LikeBtn;

 

1. 먼저 useState를 사용하기 위해 import구문에 {useState} 추가

 

2. useState를 사용하여 like에 초깃값 0할당

 

3. button을 클릭하면 hadleClickLike함수가 실행되고, 현재 like값을 렌더링 해준다.

    ( click할때마다 setLike(like+1) 로 1씩 증가시켜주고 렌더링 해준다. )

 

 

* 참고로 이벤트 관련 함수의 이름은 관례적으로 앞에 handle을 붙여주는 것이 좋다.

 

 

 

---

 

 

 

이렇게 버튼이 클릭되면 클릭 횟수가 화면에 렌더링 되도록 하는 코드를 짜보았다. 

Hook은 useState이외에 여러가지가 있다. 다른 종류들은 다음 포스팅에서 만나보자