HOOK

Hook : 로직에 기반을 둔 작은 메서드 들로 컴포넌트의 기능을 나눌 수 있다
useState : 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구 (state를 관리할 때에 필요한 함수)

• react에서 useState를 import 받아야 한다

import { useState } from 'react';

• 변수 선언 / state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴

const [state, setstate] = useState(초기값);

• 변수 재선언 / state의 값을 변경하려면 setState 함수를 불러서 인자에 변경될 값을 넣으면 된다

setState(1); // state의 값을 1로 변경

-setState함수를 이용해서 state의 값을 변경하면 해당 컴포넌트는 화면에 다시 렌더링 되어서 state가 변경될 때마다 화면이 업데이트된다

useEffect : react component가 렌더링 될 때마다 특정 작업(side effect : component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과)을 실행할 수 있도록 한다

-state 변수만 변하는 것을 감지해서 렌더링 되도록 설정 해줄 수 있다

• componentDidMount / 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행

• componentDidUpdate / 리렌더링을 완료한 후 실행 (render()가 업데이트될 때마다 실행)

• componentWillUnMount / 컴포넌트를 DOM에서 제거할 때 실행

useEffect(function, deps)

function:실행하고자 하는 함수
deps: 배열 형태. function을 실행시킬 조건(deps에 특정값을 넣게 되면 컴포넌트가 mount될 때, 지정한 값이 업데이트될 때 useEffect를 실행)
-useEffect 함수 불러오기

import React, { useEffect } from "react";

• 한번만 실행

useEffect(() => {
	document.title = `You clicked ${count} times`;
}, []);

useEffect(함수, []) 이렇게 빈칸을 넣어놓으면 첫 렌더링 후 한 번만 렌더링 하도록 만들 수 있다

useRef : 원하는 DOM 혹은 컴포넌트에 접근 가능하게 해주는 시스템

import { useRef } from 'react';

-useRef는 current를 통해 값에 접근할 수 있다

• 컴포넌트의 참조값이 변경되어도 리랜더링 되지 않는다
• useRef 참조값이 존재하는 컴포넌트를 useState를 활용하여 리랜더링 시켜도 값은 초기화되지 않고 유지된다
• DOM에 직접 접근하기 위해서는 접근하고자 하는 태그에 ref를 사용하면 된다
• DOM에 직접 접근해 스타일 및 className을 조작하여 css를 변경하거나 value값을 추출하는 등의 작업을 진행할 수 있다
• video 등의 미디어 요소에도 활용할 수 있다
  (비디오 플레이어의 영상 경로를 변경하여 영상의 내용이 바뀌도록 활용할 수 있다)
• 보통 페이지 스크롤 등에 사용

useLayoutEffect : useEffect와 동일하지만, 모든 DOM 변경 후에 동기적으로 발생 ( DOM을 조작하는 코드가 존재하더라도, 사용자는 깜빡임을 보지 않는다) (useLayoutEffect 내에서 스케줄된 업데이트는 브라우저가 Paint하기 전에 동기적으로 실행(Flush)된다)

• useEffect와 useLayoutEffect의 차이는 Browser paints screen 전후로 실행되는 순서라고 볼 수도 있겠습니다