React Hooks

🔔 Hooks 규칙

♟ 규칙1 최상위 레벨에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

import React, {useState} from "react"

function Hooks(props) {
}

리액트는 랜더한 순서 대로 state순서를 인식함
조건에 따라 다르게 실행되면 state순서를 혼동함

♟ 규칙2 react 함수 컴포넌트 내에서만 Hook을 호출해야 함. 일반 JS함수에서는 Hook을 호출해서는 안됩니다.(custom Hook 안에서는 가능함)

useState

const arr = ["a", "b"]
const [first, second] = arr

// const [state, useState] = [값, 함수]

setState(2)
// state => 2 비동기로 작동
// 랜더할 때 한꺼번에 바뀌는 것은 기존 setState와 같음. 

this.setState() // 차이점1 : 함수형 컴포넌트 내에서는 `this`쓰지 않음
setState()

this.setState({키 : 값} ) // 차이점2 : 클래스형 컴포넌트에서는 객체로 씀
setState(값) // 클래스형에서는 값만 넣음. 
setState({key : value}) // 객체로 쓸 수도 있음
setState.key // 대신 불러올 때 key값 불러와야 함

const [count, setCount] = useState(0);
const [isModalActive, setIsModalActive] = useState(false);

// styled components를 SASS처럼 쓰는 것처럼, 함수형을 클래스형처럼 쓸 수도 있음. 하지만 권장되지 않음.

function Box() {
    const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 }); // 이렇게 합쳐서 쓰지 말고 아래와 같이 관심사 분리를 해서 쓰길 권장함
}
  
function Box() {
	const [position, setPosition] = useState({ left: 0; top: 0 });
	const [size, setSize] = useState({ width: 100, height: 100 });
  
  useEffect(() => {
  	function handleWindowMouseMove(e) {
    	setPosition({ left: e.pageX, top: e.pageY});
    }})
  
}

// 객체로 여러가지 값이 들어갈 때, 원하는 내용만 변경해주고 싶다면 spread 연산자 사용
setSize({...size, width: "100"}) 


this.setState({abc}, () => console.log())
setState(5)// 이것의 결과값을 보고 싶다면
const [state, setState] = useState(1)
1234


const [state, setState] = useState()

useEffect

useEffect(() => {
	console.log("hi")
}, [])

useEffect(() -> {함수
} [state]) // state를 감지하고 있다가 이전이후가 달라졌을 때만 함수를 실행함

useEffect(() => {
  window.addEventListener("click", foo)
return () => window.removeEventListener()
},[]) // 컴포넌트 willUnmount 리턴과 빈배열 선언. 매번 해제를 해줘야 함.

//원래는 아래처럼 했음. 두개로 나눠서 했던 걸 하나로 합쳐서 관리할 수 있음. 로직을 관심사분리를 해서 쓸 수 있음. useEffect 하나만 지우면 해당 기능을 지울 수 있음
componentDidMount() {
window.addEventListener("click", foo)
}

componentWillUnmount() {
window.removeEventListener()
}