• useLocation훅은 현재 url의 위치 정보를 반환한다.

• 이 정보에는 경로명, 검색, 해시 등 다양한 url관련 정보가 표시된다. 

• useSearchParams 클래스: url의 쿼리 문자열을 쉽게 파싱하고 조작할 수 있는 웹 API이다. 얘를 통해서 쿼리 파라미터를 추출하고 값을 읽거나 설정할 수 있다. 

<useLocation 작동 원리>

1) const location = useLocation();
2) const queryParams = new URLSearchParams(location.search);
3) const release_date = queryParams.get('release_date'); //이때 이제 release_date를 가져오게 되는 것이다.

1) useLocation을 사용해서 현재 url의 위치 정보를 얻는다. 

const location = useLocation();
여기서 location 객체는 현재의 url정보를 포함한다. 

예를 들어서 url이 'http://example.com/movie/Inception?release_date=2010-07-16'인 경우, location 객체는 다음과 같은 정보를 포함한다.

{
  "pathname":"/movie/Inception",
  "search" : "?release_date = 2010-07-16",
  "hash": "",

....기타 정보들...
}

2) location.search를 사용하여 쿼리 문자열을 얻는다.

const queryParams = new URLSearchParams(location.search);

여기서 location.search는 url의 쿼리 문자열 부분을 포함한다. 
URLSearchParams 생성자에다가 location.search를 전달하여  'queryParams' 객체를 생성하는 것이다. 

3) queryParams.get('release_date')를 사용하여 특정 쿼리 파라미터 값을 추가한다. 

const release_date = queryParams.get('release_date');
여기서 queryParams.get('release_date')는 'release_date' 파라미터의 값을 반환한다. 

useState

• #state: 컴포넌트가 가질 수 있는 상태값.
• const[state, setState] = useState(초기값); 이런 식으로 선언한다. state는 컴포넌트가 가지고 있는 현재 상태값이고, setState는 state값을 변경할 때 사용하는 함수이다.
• setState함수를 사용해서 state를 변경하면, 해당 컴포넌트는 화면에 다시 렌더링 된다. 그래서 state가 변경될 때마다 화면에 바로바로 보이게 하고 싶을 때 useState를 쓰면 된다.

<예제: 클릭할 때마다 화면에서 시간이 1씩 업데이트되게 하는 함수>

import {useState} from 'react';

function App() {
    const [time, setTime] = useState(1);

    const handleClick = () => {
	let newTime;
	if (time >= 12) {
		newTime =1;
	}else {
		newTime = time+1;
	}
	setTime(newTime)k
   };

    return (
        <div>
            <span>현재 시각: {time}시</span>
            <button onClick={handleClick}>Update</button>
        </div>
    );
}

export default App;

useEffect

• 리액트에서 어떤 컴포넌트가 Mount, Update, Unmount되었을 때 특정 작업을 처리할 코드를 실행시켜주는 훅이다.

# Mount

컴포넌트가 DOM에 삽입되어 화면에 처음 렌더링되는 과정. 마운트 될 때는 초기 상태 설정, 초기 데이터 불러오기, 이벤트 리스너 등록을 할 수 있다. 함수형 컴포넌트에서는 useEffect 훅을 사용하여 마운트 시 실행할 코드를 지정할 수 있다.


# Unmount

컴포넌트가 DOM에서 제거되어 화면에서 사라지는 것. 이벤트 리스너 해제, 타이머 취소, 진행 중인 API 호출 중단, 구독 해제 등의 작업을 useEffect 훅의 clean-up 함수에서 수행할 수 있다.)

• useEffect 훅은 인자로 함수를 받는다. (이 함수는 콜백함수가 된다. 콜백함수란, 다른 함수의 인자로 전달된 함수를 말한다.) 이 콜백함수 내부에 우리가 원하는 작업을 처리하는 코드를 작성하면 된다.

1. useEffect는 인자로 하나의 콜백함수만 받을 수도 있다. 이렇게 하면 컴포넌트가 렌더링될 때마다 인자로 받은 콜백함수가 실행된다.
2. 첫 번째 인자로 콜백함수, 두 번째 인자로 배열을 받을 수도 있다. 이때 인자로 받는 배열은 depencdency array라고 한다. 이렇게 하면 컴포넌트가 맨 화면에 처음 렌더링(Mount)될 때 콜백함수가 실행되고, 그 뒤로는 두 번째 인자인 dependency array의 값이 바뀔 때만 콜백함수가 실행된다.
3. 만약 dependency array가 비었다면 화면에 컴포넌트가 맨 처음 렌더링될 때만 콜백함수가 실행된다.

• useEffect의 리턴값으로는 clean-up 함수를 받는다. 콜백함수에서 처리한 작업을 정리하는 코드가 이 안에 들어간다.

이벤트리스너를 설정하는 함수를 콜백함수로 받았다면, 클린업 함수 안에는 이벤트리스너를 제거하는 코드가 들어갈 수 있다. 구독 설정하는 게 useEffect의 내용이었다면 구독을 취소하는 코드가 클린업 함수 안에 들어간다.

<예제: 타이머 설정, 타이머 취소하는 useEffect Hook>

import React, {useEffect} from 'react';

const Timer = {props} => {
    useEffect(() => {
        const timer = setInterval(()=> {
            console.log('타이머 돌아가는 중..');
        }, 1000);

        return () => {
            clearInterval(timer);
            console.log('타이머가 종료되었습니다');
    
        };

    }, []);

    return (
        <div>
            <span>타이머를 시작합니다. 콘솔을 보세요!</span>
        </div>
    );
};

export default Timer;

내용 출처: React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈 (youtube.com)