코드스테이츠(React Hooks)

React Hooks

렌더링 직후 작업을 설정하는 useEffect등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 하게 해줍니다.

useState 는 가장 기본적인 Hook으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야되는 일이 발생하면 이 hook을 사용하시면 됩니다

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

useState를 사용 할 땐 코드의 상단에서 import 구문을 통하여 불러오고, 다음과 같이 사용합니다.

const [value,setValue] = useState(0);

이러한 문법입니다 주의사항은 아래와 같습니다.
1. 최상위에서만 Hook을 호출해야하며, 반복문, 조건문, 중첩된 함수 내에서 실행하면 안됩니다.
2.React 함수 컴포넌트내에서만 Hook을 호출해야합니다.

유익한 React정리

• 하나의 컴포넌트는 한기지 일만 한다.
• 컴포넌트는 컴포넌트 바깥에서 props를 데이터를 인자와 속성으로 전달 받는다.
• 단 방향 (위에서 아래로) 데이터 흐름 하향식 흐름이다.
• 데이터를 전달하는 주체는 부모 컴포넌트이다.
• state가 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트에서도 접근할 수 없다.
• 기존의 상태를 참고 할 필요가 있는 경우에 setState인자로 함수를 받아서 써도 됩니다.