[React] Hook

Hook

클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수를 의미한다.

hook의 특징

• 함수 컴포넌트에서만 사용이 가능하다.
• hook의 이름은 반드시 use-로 시작한다.
• 내장 hook이 존재한다. ex) useState, useEffect
• 직접 hook을 만드는 것도 가능하다.

사용 규칙

• hook은 함수 컴포넌트 or custom hook 안에서만 호출 할 수 있다.
• hook은 함수 컴포넌트 내의 최상위 에서만 호출해야 한다.
  최상위 => 함수 컴포넌트의 첫 번째 중괄호 내부
  return 아래에서는 호출 할 수 없다.

import React, { useState } from "react";

const La =() => {
const [color, setColor] = useState("red");
	if(4 > 2) {
    console.log("hi");
    }
	return <div onClick={setColor("blue")}>HELLO {color}</div>;
};

export default La;