React.js | 입문 | React hook

1. 등장 배경

    - 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 클래스형 컴포넌트가 가지는 단점인

       코드가 길고 복잡하며, Logic의 재사용이 어렵다는 점 때문에 사용하기 힘들다는 의견이 많았다.

    - 그 때 Hooks의 등장으로 인해 함수형 컴포넌트들이 클래스형 컴포넌트들의 작업을 할 수 있게 되었다.

 

 

2. 예제

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

 

보통의 자주 쓰는 hook은 useState와 useEffect 인데, 

컴포넌트 내에 객체나 변수가 필요할 때 useState로 선언을 해주고, JQuery에서 Object를 썼던 방식과 같이 컴포넌트에서도 객체를 다룰 수 있다. ( json 형태도 가능 )

 

사용 방법도 정말 간단하며, JQuery에서 썼던 방식보다 객체를 다루기 쉬우며, 클래스형 컴포넌트처럼 코드가 많이 복잡하지도 않다. 

 

useEffect같은 경우는 useState로 선언한 변수들의 변함에 따른 Logic을 구성할 수 있다.

useEffect(()=> { //페이지가 바뀔 때마다 설정값 바꿔줌
      let emptyArray = [];
      let start = (currentPage-1) * postNumber;
      let end = ((currentPage-1) * postNumber) + postNumber;
      
      for(var i = start ; i < end; i ++) {
            if(!listArrayall.array[i]) { //더이상 값이 없을 때의 조건문
              emptyArray.push("")
            }
            else {
              emptyArray.push(listArrayall.array[i]);
            }
          }
          
      setListArraypost(emptyArray);
      
      let emptyJson = {};
      let j = 0;
      for (var i = start; i < end; i ++) {
        if(listArrayall.array[i] !== undefined) {
          emptyJson[j] = {indexid : j, rowsid : listArrayall.array[i]._id, checked : false}
        }
        j++;
      }
      j = 0;
      setCheckedArray(emptyJson);
  } ,[currentPage]);

 

해당 코드는 내가 Next.js로 개발하면서 썼던 구문인데,  간단하게 말하자면 두번째 인자값으로 [] 배열 안에 변경이 감지될 변수( currentPage )를 넣어주고, 첫번째 인자로 변경이 감지되었을 때 로직( arrow 함수 )이 실행되도록 구현하였다.

 

 

 

참조

https://codingbroker.tistory.com/23