원 투 훅 관중들은 나이스.

알면 강력해지는 Hook~

🪙 리액트 Hooks

• 리액트 16.8 버전에 추가된 기능이고, 클래스 컴포넌트와 생명주기
  메소드를 이용하여 작업을 하던 기존 방식에서 벗어나여 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업 할 수 있게 만든 기능이다.

🪙 HOOK 사용 규칙

• 훅은 최상위 레벨에서만 호출이 가능하다

  • 반복문, 조건문, 중첩된 함수에서 호출이 불가하다.
  • 사실 프로젝트 하면서도 최상위 레벨이 아닌 곳에서도 훅을 사용하려 했다..

• 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다.

규칙지켜야 하는 이유

• 리액트 훅 사용 규칙을 지킴으로써 컴포넌트가 무수히 렌더링 되어도 훅의 호출 순서를 동일하게 유지할 수 있어, 훅이 여러번 호출되어도 훅의 상태를 올바르게 유지할 수 있다.

• 컴포넌트의 모든 상태 관련 로직의 직관성을 높일 수 있다.

🪙 리액트 내장 훅 API

• 복싱은 말이야

🪝 useState()

const [test,setTest] = useState(init)

// string
const [str, setStr] = useState('')

// number
const [num, setNum] = useState(0)

function button() {
	setStr(더함)
    setNum(num + 1)
    }
    
button()

console.log(str) // 더함
console.log(num) // 1

• 상태를 설정할때 사용하는 훅 API 이다.

• 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화 하는것과 비슷한 역할을 한다.

• 인자로 초기상태(init)을 받고 반환 값으로 현재 상태(state)와 상태를 설정하는 함수(setState) 를 반환한다.

• [a , setA ] = useState() 이러한 방식은 전통이다.

• 초기상태에선 숫자 문자 배열 객체등을 이용하여 설정이 가능하다.

  • 콜백함수를 이용한다면 초기 렌더링 시에 콜백 함수가 반환하는 값을 초기상태로 갖게 된다.

  • 설정된 상태는 추후에 setA()를 이용하여 변경할 수 있으며, 훅을 통해 설정된 상태는 컴포넌트가 재 렌더링이 되어도 유지된다.

  이것이 중요한 이유

  var a = 0
  
  const [b,setB] = useState(0)
  
  function btn(){
  		a += 1;
    setB(b+1)
  }
  
  btn(); 
  
  console.log(a) // 0 
  console.log(b) // 1
   
  // 이러한 이유 재 렌더링 시에 반복적으로 a는 0으로 대입되기 때문

• 하나의 컴포넌트에 여러개의 상태가 선언 될 수 있다.

  • 권장하지 않는 방법이다

  • 매번 props를 전달해야 하여 불필요한 코드 중복이 발생할 수 있고 오류가 빈번하다는 단점이 있다.

  • 이러한 경우에는 Redux, Recoil와 같은 전역 상태 라이브러리를 사용하는 것을 권장한다.

• useState() 는 리액트의 기본..!

🪝 useEffect()

useEffect(callback,dependency)

• 클래스 컴포넌트 생명주기 메소드

  • componentDidMount() +

  • componentDidUpdate() +

  • componentDidWillUnMount()

  • = useEffect()

• Side Effect가 발생하는 작업을 수행하는 훅이다.

  • Side Effect란 다른 컴포넌트에 영향을 줄 수 있고 렌더링 하는 과정에서는 구현할 수 없는 작업을 말한다. 예로 컴포넌트 안에서 데이터 가져오기 , 구독하기 직접 돔 조작하기 등이 있다.

useEffect(()=>{

	// sideEffect를 발생하는 작업
    const timerId = setTimeout(() => console.log('useEffect'));
	
    // sideEffect를 발생하는 작업 지우기.
    return () => clearTimeout(timerId)
})

• componentDidMount() + componentDidUpdate()

  • 컴포넌트가 렌더링 될 때마다 sideEffect가 발생하는 작업을 수행하고

• componentDidUnMount()

  • 컴포넌트가 언 마운트 될대 이작업에 대한 정리 작업을 수행한다.

• 세 메소드를 합친 것과 같은 useEffect()는 첫번째 인자로 전달받은 콜백 함수 내부에서 side effect가 발생하는 작업 수행 , 그후 정리 작업을 하는 cleanup 함수를 반환한다.

• 또한 위와 같이 두번째 인자로 아무것도 넣지 않을 경우에는 랜더링 시 마다 콜백 함수를 실행하고, 다음 렌더링이 실행되기 전까지 cleanup 함수를 실행한다.

useEffect(() => {
	console.log('useEffect')
},[]);

• 두 번째 인자에 빈 배열을 넣는 경우, 마운트 될 때에 콜백 함수 내부를 실행하고 언마운트 될 때에 cleanup 함수를 실행한다.

• 이를 사용할 때에는 마운트 될 때의 state값과 props값이 언마운트될 때까지 유지된다는 점을 주의해야 한다.

useEffect(() => {
	console.log('useEffect')
}.[state])

• 특정 값이 업데이트 되었을 때만 실행하고 싶은 경우에는

  • 두번째 인자에 특정 값을 담은 배열을 넣어주면 된다.

  • 배열에는 여러개의 값을 넣을 수 있고 일반적으로는 콜백 함수 내에 사용된 지역 변수를 배열에 담는 편이지만

  • 넣을수도 있고 콜백 함수 내부에서 사용하지 않는 값을 넣을수도 있다.

  • 이땐 리액트에선 setState함수는 동일성이 보장되고 변경되지 않는다고 생각하므로 넣어줄 필요가 없다.

useEffect는 infinity loop를 해결할 수도 있는 기특한 친구