[React] 함수형 프로그래밍을 가능하게 하는 React Hook (부재 : useState가 이렇게 쉬운 것일 줄은...)

리액트 공식문서의 순서도 이제 변경해야 할 것 같다.

React Hook을 먼저 설명하고 나머지 내용을 설명하는 게 오히려 낫겠다 싶을 정도다. 초심자일 경우, class 구문을 익히기 전에 아예 리액트훅을 먼저 익히고 나서 class 구문을 익히도록 하자.

나도 초심자라 그런지 react 자체가 잘 이해가 가지 않아서 처음에 많이 헤맸다. 헤메었던 것을 잊지 않기 위해 기록해둔다. 이 글을 보고 있는 동지여 힘내라.

 

hook.jsx

import React, { useState } from "react";

function Hook() {
  const [item, setItem] = useState(0);   

  function plusItem() {
    setItem(item + 1);
  }

  function minusItem() {
    setItem(item - 1);
  }

  return (
    <>
      <div>Hello {item}</div>
      <button onClick={plusItem}>더하기</button>
      <button onClick={minusItem}>빼기</button>
    </>
  );
}

export default Hook;

리액트 훅 구문을 설명 시작합니다.

import React, { useState } from "react"; 부분은 Create React App을 실행하고나서, node_modules > react에 있는 React 코드와 useState 함수를 가져와서 쓰겠다는 표현입니다.  (import = 수입, export = 수출 정도로 이해하면 편하다)

const [item, setItem] = useState(0) 이 부분은 item, setItem의 명칭 자체는 아무거나 써도 된다. setItem을 apple, samsung 같은 거로 정의해도 관계 없다. 다만, 관용적으로 첫번째는 상수, 두번째는 상수의 값을 update하는 setState 구문을 넣기 때문에 위 내용처럼 작성한다.

function Hook() <-- 이 것이 클래스를 대체한다고 보면 된다. 이렇게 함수를 하나씩 하니씩 app.jsx 에서 끌어다 쓰는 것이다. (알고나면 간단한 React World... class부터 익숙해지지 말고 React hook 부터 익히고, React에서 사용하는 Class 문법을 익히는 게 낫다.)

plusItem, minusItem 은 임의로 처리할 함수명을 적는 것이다. 단 여기서 item에 변경을 줄 때, setItem을 사용해서 변경시켜야 한다. (예를 들어 setItem(item + 1) 구문 대신에 item = item -1 이런 구문으로 변경하지 않아야 한다. 되지도 않는다.)
그래야, 상위 component에서 상태 값의 변경을 인지할 수 있다.
(여기 경우에는 app.jsx에서 App Component가 Hook의 상태 변경을 알고 관리할 수 있게 되는 것)

*return 내용은 생략

 

app.jsx 

import React from "react";
import Hook from "./components/hook";  //만든 hook component를 IMPORT

function App() {
  return (
    <>
      <Hook />  // 만든 react hook을 사용하는 구문. 여러개를 써도 무방하다.
    </>
  );
}

export default App;

 

 

참조 1 ko.reactjs.org/docs/hooks-overview.html#state-hook

참고2 nomadcoders.co/react-hooks-introduction