[React] 리액트 Hook (훅)

🛜 useCounter() Custom Hook 만들기

• useCounter Hook은 초기 카운드 값을 파라미터로 받아서 카운트라는 이름의 state를 생성하여 값을 제공하고 카운트 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 Hook
• useCounter Hook을 사용하면 어떤 함수 컴포넌트에서든지 카운트 기능을 쉽게 사용 가능

🛜 Accommodate Component 만들기

• Accommodate 컴포넌트는 useCount 훅을 사용하여 카운트를 관리
• 최대 카운트 개수는 maxCapacity라는 이름의 상수로 정의되어 있고 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능
• useEffect 훅의 작동 방식을 사용하기 위해 일부러 두 개의 useEffect 훅을 사용
• 하나는 의존성 배열이 없는 형태이고 다른 하나는 있는 형태
• 의존성 배열이 없는 useEffectHook은 컴포넌트가 마운트 된 직후에 호출되며 이후 컴포넌트가 업데이트될 때마다 호출
• 의존성 배열이 있는 useEffectHook은 컴포넌트가 마운트된 직후에 호출되며 이후 카운트 값이 바뀔 때마다 호출되는데 이때 용량이 가득 찼는지 아닌지의 상태를 isFull이라는 스테이트에 저장
• 의존성이 없는 배열이 useEffect 훅이 호출된 이유는 컴포넌트가 업데이트 됐기 때문임
• 의존성 배열이 있는 useEffect 훅이 호출된 이유는 카운트 값이 변경되었기 때문임
• 정원이 가득 차면 isFull의 값이 true가 되기 때문에 입장 버튼이 비활성화되어 더 이상 누를 수 없게 되고 빨간 글씨로 경고 문구가 출력
• 로그에서 카운트 값이 10이 된 이후에 더 이상 변하지 않기 때문에 카운트를 의존성 배열에 갖고 있는 useEffectHook은 호출되지 않는 것을 볼 수 있음
• useCounterHook에서 Math.max 함수를 사용하여 카운트 값이 0 아래로 내려갈 수 없게 만들어놨기 때문에 값이 0이 되면 더 이상 useEffect Hook도 호출되지 않음

🛜 Hooks

• Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있음
• 원래 존재하는 어떤 기능에 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미
• React의 state와 생명주기 기능의 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것
• 실행되는 함수를 hook이라고 부르기로 정함
• hook의 이름은 use로 시작
• hook이 수행하는 기능에 따라 이름을 짓게 되었는데 각 기능을 사용하겠다는 의미로 use를 붙임
• 개발자가 직접 커스텀 훅을 만들어서 사용할 수 있는데 커스텀 혹은 개발자 마음대로 이름을 지을 수 있지만 뒤에서 배울 훅의 규칙에 따라 이름 앞에 use를 붙여서 훅이라는 것을 나타내 주어야 함
• state를 이용하여 렌더링에 필요한 데이터를 관리

🛜 useState()

• state를 사용하기 위한 hook
• 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에 class 컴포넌트처럼 state를 사용하고 싶으면 useState hook를 사용해야 함

import React, {useState} from "react";

function Counter(props) {
	var count = 0;
    
    return (
    	<div>
        	<p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => count++}>
            	클릭
            </button>
        </div>
    );
}

• 카운터 컴포넌트는 버튼을 클릭하면 카운트를 하나씩 증가시키고 현재 카운트를 보여주는 단순한 컴포넌트
• 카운터를 함수의 변수로 선언해서 사용하게 되면 버튼 클릭 시 카운트 값을 증가시킬 수는 있지만 재렌더링이 일어나지 않아 새로운 카운터 값이 화면에 표시되지 않게 됨
• state를 사용해서 값이 바뀔 때마다 재렌더링 되도록 해야 하는데 함수 컴포넌트에는 해당 기능이 따로 없기 때문에 useState를 사용하여 state를 선언하고 업데이트하여야 함

const [변수명, set함수명] = useState(초기값);

• useState를 노출할 때에는 파라미터로 선언할 state의 초기값이 들어감
• 클래스 컴포넌트의 생성자에서 state를 선언할 때 초기값을 넣어주는 것과 동일한 것 
• 초기값을 넣어 useState를 노출하면 return 값으로 배열이 나옴
• return 된 배열에는 두 가지 항목이 있는데 첫 번째 항목은 state로 선언된 변수이고 두 번째 항목은 해당 state의 set 함수

import React, {useState} from "react";

function Counter(props) {
	const [count, setCount] = useState(0);
    
    return(
    	<div>
        	<p>총 {count}번 클릭했습니다/</p>
            <button onClick={() => setCount(count + 1)}>
            	클릭
            </button>
        </div>
    );
};

• useState를 사용하여 카운트 값을 state로 관리하도록 만든 것
• state 변수명과 set 함수가 각각 count, setCount로 되어 있는 것을 볼 수 있음
• 버튼이 눌렸을 때 setCount 함수를 호출해서 카운트 1 증가
• 카운트의 값이 변경되면 컴포넌트가 제렌더링 되면서 화면에 새로운 카운드 값이 표시
• 클래스 컴포넌트에서 setState 함수를 홏출하여 state가 업데이트되고 이후 컴포넌트가 재렌더링 되는 과정과 동일
• 클래스 컴포넌트에서는 setState 함수 하나를 사용하여 모든 state 값을 업데이트할 수 있었지만 useState를 사용하는 방법에는 변수 각각에 대한 set 함수가 따로 존재

🛜 useEffect()

• 사이트 이펙트(side effec) t를 수행하기 위한 Hook
• 사이트 이펙트는 부작용이라는 의미를 가지고 있음
• 개발자가 의도치 않은 코드가 실행되면서 버그가 나타나면 side effect가 발생했다고 말함
•  리액트에서 말하는 side effect는 효과 혹은 영향을 뜻하는 의미에 가까움
•  서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미
•  다른 컴포넌트에 영향을 미칠 수 있으며. 렌더링 중에는 작업이 완료할 수 없기 때문임
• useEffect는 리액트의 함수 컴포넌트에서 side effect를 실행할 수 있게 해주는 Hook

useEffect(이펙트 함수, 의존성 배열);

• 의존성 배열을 의존하고 있는 배열인데 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 Effect 함수 실행
• Effect 함수는 처음 컴포넌트가 렌더링 된 이후와 업데이트로 인한 재렌더링 이후에 실행

useEffect(이펙트 함수, []);

• 이펙트 함수가 mount와 unmount에 단 한 번씩만 실행되게 하고 싶다면 빈 배열을 넣으면 됨
• 해당 이펙트가 props나 state에 있는 어떤 값에도 의존하지 않는 것이 되므로 여러 번 실행되지 않음

useEffect(이펙트 함수);

• 의존성 배열은 생략할 수 있지만 생략하면 컴포넌트가 업데이트될 때마다 호출
• 컴포넌트가 처음 렌더링 될 때를 포함해서 매번 렌더링 될 때마다 Effect가 실행

import React, {useState, useEffect} from "react";

function Counter(props) {
	const [count, setCount] = useState(0);
    
    useEffect(() => {
    	document.title = `you clicked ${count} times`;
    });
    
    return (
    	<div>
        	<p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>
            	클릭
            </button>
        </div>
    );
}

• useEffect를 사용해서 클래스 컴포넌트에서 제공하는 componentDidMount, componentDidUpdate와 같은 생명주기 함수의 기능을 동일하게 수행하도록 만듦
• useEffect 안에 있는 이펙트 함수에서는 브라우저에서 제공하는 API를 사용해서 도큐먼트의 타이틀을 업데이트
• 도큐먼트의 타이틀은 브라우저에서 페이지를 열었을 때 창에 표시되는 문자열
• 의존성 배열 없이 useEffect를 사용하면 React는 DOM이 변경된 이후에 해당 이펙트 함수를 실행하라는 의미
• 기본적으로 컴포넌트가 처음 렌더링 될 때를 포함해서 매번 렌더링 될 때마다 이펙트가 실행된다고 보면 됨
• 이펙트 함수가 처음 컴포넌트가 마운트 되었을 때 실행되고 이후 컴포넌트가 업데이트될 때마다 실행
• 결과적으로 컴포넌트 디드 마운트. 컴포넌트 다드 업데이트와 동일한 역할을 하게 됨
• Effect는 함수 컴포넌트 안에서 선언되기 때문에 해당 컴포넌트의 props와 state에 접근 가능
• count라는 state에 접근하여 해당 값이 포함된 문자열을 생성해서 사용하는 것을 볼 수 있음

import React, [useState, useEffect) from "react";

function UserStatus(props){
	const [isOnline. setIsonline] = useState(null);
    
    function handleStatusChange(status){
    	setIsOnline(state.isOnline);
    }
    
    useEffect(() => {
    	ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
        return () => {
        	ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
        };
    });
   	
    if (isOnline === null) {
    	return '대기 중.....';
    }
    return isOnline ? '온라인' : '오프라인';
}

• 함수를 하나 리턴하는데 해당 함수 안에는 구독을 해지하는 api를 호출하도록 되어 있음
• useEffect에서 리턴하는 함수는 컴포넌트가 mount 해제, 즉 unmount 될 때 호출   
• useEffectHook은 하나의 컴포넌트의 여러 개를 사용할 수 있음
• useState 훅과 useEffect 훅을 각각 두 개씩 사용하는 것을 볼 수 있음

useEffect(() => {
	// 컴포넌트가 마운트 된 이후,
    // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
    // 의존성 배열에 빈 배열을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행됨
    // 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
    ...
    
    return () => {
    	// 컴포넌트가 마운트를 해제되기 전에 실행됨
        ...
    }
}, [의존성 변수1, 의존성 변수2,....]);

• Effect 함수와 의존성 배열이 들어가고 컴포넌트가 마운트 된 이후 의존성 배열에 있는 변수 중에 하나라도 값이 변경되었을 때 실행
• 의존성 배열에 빈 배열을 넣으면 마운트와 원마운트 시에 단 한 번씩만 실행
• 의존성 배열 생략 시에는 컴포넌트 업데이트 시마다 실행

🛜 useMemo()

• useMemo 혹은 memoized value를 리런 하는 훅
• memoized value는 useMemo 훅과 바로 뒤에 나올 useCallback 훅을 이해하기 위해서는 memoized value에 대해 알고 있어야 함
• useMemo와 useCallback 훅에서는 memoization이라는 개념이 나옴
• memoization은 최적화를 위해 사용하는 개념
• 비용이 높은, 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력 값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환하는 것
• 이러한 방식을 사용하면 결과적으로 함수 호출 결과를 받기까지 걸리는 시간도 짧아지고 불필요한 중복 연산을 하지 않기 때문에 컴퓨터의 자원을 적게 사용
• 메모이제이션의 메모는 우리가 흔히 메모하다라고 표현하는 것과 비슷한 맥락이라고 생각하면 쉽게 이해 가능
• 메모를 해두었다가 다시 사용하는 것

const memoizedValue = useMemo(
	() => {
    	// 연산량이 높은 작업을 수행하여 결과를 반환
        return computeExpensiveValue(의존성 변수1. 의존성 변수2);
    },
    [의존성 변수1. 의존성 변수2]
);

• 메모이제이션의 개념처럼 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 노출하여 결괏값을 반환하며 그렇지 않은 경우에는 기존함수의 결과값을 그대로 반환
• useMemo 훅을 사용하면 컴포넌트가 다시 렌더링 될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있음
• 결과적으로 빠른 렌더링 속도를 얻을 수 있음
• useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행
• 렌더링이 일어나는 동안 실행되서는 안될 작업을 useMemo의 함수에 넣으면 안 됨
• 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등은 렌더링이 일어나는 동안 실행되서는 안되기 때문에 useMemo 훅 함수에 넣으면 안 되고 useEffect 훅 사용

const memoizedValue = useMemo(
	() => computerExpensiveValue(a, b)
);

• 의존성 배열을 넣지 않을 경우 렌더링이 일어날 때마다 매번 create 함수 실행
• useMemo 훅에 의존성 배열을 넣지 않고 사용하는 것은 아무런 의미가 없음

const memoizedValue = useMemo(
	() => {
    	return computeExpensiveValue(a, b);
    },
    []
);

• 의존성 배열에 빈 배열을 넣게 되면 컴포넌트가 마운트 될 때만 create함수가 호출
• 마운트 이후에는 값이 변경되지 않음
• 대부분 useMemo 훅에 의존성 배열의 변수들을 넣고 해당 변수들의 값이 바뀜에 따라 새로 값을 계산해야 할 경우에 사용

🛜 useCallback()

• useMemoHook과 유사한 역할을 하지만 값이 아닌 함수를 반환한다는 점에서 다름
• 컴포넌트가 렌더링 될 때마다 매번 함수를 새로 정의하는 것이 아니라 의존 배열의 값이 바뀐 경우에만 함수를 새로 정의하여 리턴

const memoizedCallback = useCallback(
	() => {
    	doSomething(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

• 함수와 의존성 배열을 파라미터로 받음
• 의존성 변수에 있는 변수 중 하나라도 변경되면 메모이제이션된 콜백 함수를 반환
• 의존성 배열에 따라 메모이즈드 값을 반환한다는 점에서는 유즈 메모 훅과 완전히 동일

useCallback(함수, 의존성 배열);

useMemo(() => 함수, 의존성 배열);

• 유즈 콜백 훅을 사용하지 않고 컴포넌트 내에 함수를 정의한다면 매번 렌더링이 일어날 때마다 함수가 새로 정의
• useCallbackHook을 사용하여 특정 변수의 값이 변한 경우에만 함수를 다시 정의하도록 하여 불필요한 반복 작업을 없애줌

🛜 useRef()

• Reference를 사용하기 위한 Hook
• React에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미
• 레퍼런스 객체를 반환
• 레퍼런스 객체의 current 속성은 현재 레퍼런스 하고 있는 엘리먼트를 의미

const refContainer = useRef(초깃값);

• 파라미터로 초기값을 넣으면 해당 초기값으로 초기화된 레퍼런스 객체를 반환
• 반환된 레퍼런스 객체는 컴포넌트의 라이프타임 전체에 걸쳐서 유지
• useRefHook은 변경 가능한 current라는 속성을 가진 하나의 상자라고 생각

function TextInputWithFocusButton(props) {
	const inputElem = useRef(null);
    
    const onButtonClick = () => {
    	inputElem.current.focus();
    };
    
    return (
    	<>
        	<input ref={inputElem} type="text" />
            <button onClick={onButtonClick}>
            	Focus the input
            </button>
        </>
    );
}

• useRefHooks을 사용하여 버튼 클릭 시 input에 포커스를 하도록 하는 코드
• 초기값을 null을 넣었고 결과로 반환된 inputEI이라는 레퍼런스 객체를 input 태그에 넣어 줌
• 버튼 클릭 시 호출되는 함수에서 inputElim.current를 통해 실제 엘리먼트에 접근하여 포커스 함수를 호출하고 있음

<div ref={myRef} />

• 레퍼런스와 관련된 DOM에 접근하기 위해 사용하는 ref 속성에 익숙할 수 있음
• 리액트에서는 코드를 작성하면 노드가 변경될 때마다 myRef의 current 속성에 현재 해당하는 DOM 노드를 저장
• ref 속성과 기능은 비슷하지만 useRef Hook은 클래스의 instance 필드를 사용하는 것과 유사하게 다양한 변수를 저장할 수 있다는 장점이 있음
• useRef Hook이 일반적인 자바스크립트 객체를 리턴하기 때문임
• useRef 훅은 매번 렌더링 될 때마다 항상 같은 레퍼런스 객체를 반환
• useRef() Hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않음
• 커런트 속성을 변경한다고 해서 재렌더링이 일어나지 않음

🛜 Callback ref

• 돈노드의 변화를 알기 위한 가장 기초적인 방법으로 콜백 레프를 사용하는 방법이 있음
• React는 ref가 다른 노드에 연결할 때마다 Callback를 호출

function MeasureExample(props) {
	const [height, setHeight] = useState(0);
    
    const measureRef = useCallback(node => {
    	if (node !== null) {
        	setHeight(node.getBoundingClientRect().height);
        }
    }, []);
    
    return (
    	<>
        	<h1 ref={measuredRef}>안녕, 리액트</h1>
            <h2>위 헤더의 높이는 {Math.round(height)}px 입니다.</h2>
        </>
    );
}

• 레퍼런스를 위해서 useRefHook을 사용하지 않고 useCallback 훅을 사용하는 callbackRef 방식을 사용
• useRefHook을 사용하게 되면 레퍼런스 객체가 current 속성이 변경되었는지를 따로 알려주지 않음
• callback-ref 방식을 사용하게 되면 자식 컴포넌트가 변경되었을 때 알림을 받을 수 있고 이를 통하여 다른 정보들을 업데이트할 수 있음
• useCallback 훅 의존성 배열로 비어있는 배열, 즉 empty array를 넣었는데 h1 태그가 mount, unmount 될 때만 callback 함수가 호출되며 재렌더링이 일어날 때에는 호출되지 않음

🛜 Hook의 규칙

• Hook은 무조건 최상위 레벨에서만 호출해야 함
• 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook을 호출하면 안 됨
• Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함
• React가 다수의 useState hook와 useEffect hook에 호출하여 컴포넌트의 state를 올바르게 관리할 수 있게 됨

function MyComponent(props) {
	const [name, setName] = useState('Inje');
    
    if (name !== ' ') {
    	useEffect(() => {
        	...
        });
    }
    
    ....
}

• 이 코드는 if문이 들어간 조건문의 값이 참인 경우에만 useEffect 훅을 호출하도록 되어 있음
• 중간에 name의 값이 빈 문자열이 되면 조건문의 값이 false가 되어 useEffect 훅이 호출되지 않음
• 결과적으로 렌더링 할 때마다 훅이 같은 순서대로 호출되는 것이 아니라 조건문의 결과에 따라 호출되는 Hook이 달라짐으로 잘못된 코드
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 함
• 일반적인 JavaScript 함수에서 Hook을 호출하면 안 됨
• Hook은 React 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 Hook에서만 호출할 수 있음
• React 컴포넌트에 있는 state와 관련된 모든 로직은 소스 코드를 통해 명확하게 확인이 가능해야 함

🛜 eslint-plugin-react-hooks

• Hook의 규칙을 따르도록 강제해 주는 플러그인
• eslint는 JavaScript 코드에서 발견되는 문제 패턴을 식별하기 위한 정적 코드 분석 도구
• 이 플러그인을 사용하면 React 컴포넌트가 Hook의 규직을 따르는지 아닌지 분석할 수 있음
• 이 플러그인은 의존성 배열이 잘못되어 있는 경우에 자동으로 경고 표시를 해주며 고칠 방법을 제안해 주기도 함

const memoizedValue = useMemo(
	() => {
    	// 연산량이 높은 작업을 수행하여 결과를 반환
        return computeExpensiveValue(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

• useMemo에서 의존성 배열에 넣은 변수들은 create함수의 파라미터로 전달되지 않음
• useMemoHook의 원래의 의미가 의존성 배열에 있는 변수 중 하나라도 변하면 create 함수를 다시 호출하는 것이기 때문에 create 함수에서 참조하는 모든 변수를 의존성 배열에 넣어주는 것이 맞음
• 컴파일러가 개선되어 의존성 배열을 자동 생성할 수 있게 될 것
• 현재는 직접 의존성 배열을 잘 만들어주는 것이 중요
• eslint 플러그인 react-hooks 패키지를 사용하면 도움이 됨

🛜 Custom Hook 만들기

• 여러 컴포넌트에서 반복적으로 사용하는 로직을 Hook으로 만들어 재사용하기 위함

• userStatus라는 컴포넌트는 isOnline이라는 state에 따라서 사용자의 상태가 온라인인지 아닌지를 텍스트로 보여주는 컴포넌트
• 동일한 웹사이트에서 연락처 목록을 제공하는데 온라인인 사용자의 이름은 초록색으로 표시하고 싶음

• userStatus와 useState, useEffect을 사용하는 부분이 동일한 것을 볼 수 있음
• 여러 곳에서 중복되는 코드
• 기존 리액트에서는 보통 스테이트와 관련된 로직이 중복되는 경우에 renderProps 또는 HOC라고 불리는 higher order component를 사용
• 여기에서는 중복되는 코드를 추출하여 커스텀 훅으로 만드는 새로운 방법을 사용해 보도록 함
• 중복되는 로직을 custom hook으로 추출

🛜 Custom Hook 추출

• 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

• 중복되는 로직을 useUserStatus라는 커스텀 훅으로 추출
• 두 개의 컴포넌트에서 중복되는 로직을 추출하여 가져옴
• 다른 컴포넌트 내부에서와 마찬가지로 다른 훅을 추출하는 것은 무조건 커스텀 훅의 최상위 레벨에서만 해야 함
• 파라미터로 무엇을 받을지 어떤 것을 리턴해야 할지를 개발자가 직접 정할 수 있음
• 커스텀 훅은 그냥 단순한 함수와도 같음
• 이름은 use로 시작하도록 해서 이것이 단순한 함수가 아닌 리액트 훅이라는 것을 나타내 줌
• 훅이기 때문에 위에 있는 훅의 두 가지 규칙이 적용

🛜 Custom Hook 사용

• 유저 스테이터스와 유저 리스트 아이템 컴포넌트로부터 중복된 로직을 제거하는 것

• 동작에 변경이 없고 중복되는 로직만을 추출하여 커스텀 Hook으로 만든 것
• 커스텀 Hook은 리액트 기능이 아닌 Hook의 디자인에서 자연스럽게 따르는 규칙
• Custom Hook의 이름을 use로 시작하는 것을 중요한 규칙임
• 이름이 use로 시작하지 않는다면 특정 함수의 내부에서 hook을 호출하는지를 알 수 없기 때문에 hook의 규칙 위반 여부를 자동으로 확인할 수 없음
•  state와 연관된 로직을 재사용이 가능하도록 만든 것
• 여러 개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리
• 각 Custom Hook 호출에 대해서 분리된 state를 얻게 됨

• ChatUserSelector라는 컴포넌트는 select 태그를 통해 목록에서 사용자를 선택할 수 있도록 해주고 있으며, 사용자를 선택할 경우 해당 사용자가 온라인인지 아닌지를 보여주게 됨
• 각 Custom Hook의 호출 또한 완전히 독립적임

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런