React Hooks란?

함수형 컴포넌트에서 다양한 기능을 사용하게 만들어 주는 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트만 사용할 수 있습니다.

React Hooks 규칙

1. 최상위에서만 Hook을 호출합니다.

• 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안됩니다.
• Reack Hooks는 호출되는 순서에 의존하기 때문에 조건문, 반복문 안에서 실행할 경우 해당 부분 건너뛰면 버그가 발생한다.
• 그래서 최상위로 Hook을 호출하는 규칙을 따르면 useState와 useEffect가 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있다.

2. 리액트 함수 내에서만 Hook을 호출합니다.

• Hook은 일반적인 js 함수에서는 호출하면 안됩니다.
• 함수형 컴포넌트나 custom hook은 호출이 가능합니다.

자주 사용하는 React Hook 알아보기

1. useState
   useState는 상태 관리하는 Hook으로 특징이 있는데

• 함수형 컴포넌트 안에 state를 추가해 사용합니다.
• 현재 상태를 나타내는 state 값과 이 상태를 변경하는 setState 값을 한쌍으로 제공합니다.
• state는 초기 값을 설정할 수 있으며, 초기 값은 첫 렌더링일 때 한번 사용합니다.
• state는 객체일 필요 없이 문자열, boolean, 배열, null, 객체 등 여러가지 다양한 값을 넣을 수 있습니다.

import React, { useState } from 'react';

function Example () {
	const [count, setCount] = useState(0);
    
    return (
    	<div>
        	<p>You clicked {count} times</p>
            <button onClick={ () => setcount(count + 1)}>
            	click me!
            </button>
        </div>
    );
}

2. useEffect

• useEffect는 기존 클래스형 컴포넌트에서 사용한 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합했습니다. 특징이 있는데
• useEffect는 기본적으로 useEffect(function , deps)의 형태를 사용합니다.
• function에는 실행할 함수를 넣고 deps는 의존성 배열을 담습니다.
• 의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과 함수가 실행됩니다.
• 가장 먼저 의존성 배열 없이 useEffect를 실행하면 페이지가 렌더링 할 때 마다 데이터를 불러옵니다.

예시 1

import React from 'react';

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
});

import React from 'react';

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
}, []);

└▷ 두번째로 의존성 배열에 빈 배열을 담아주게 될 경우에는 첫 렌더링 시에만 함수를 실행합니다.

import React from 'react';

const [page, setPage] = React.useState(1)

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
}, [page]);

└▷ 마지막으로 의존성 배열의 state 값이나 props로 상속 받은 데이터 값을 담아주면 해당 값이 변할 때마다 함수를 실행합니다.

import React, { useState, useEffect, useRef } from 'react';

useEffect(() => {
	dispatch(getActions.getFundingAC(fundId));
    return () => {
    	dispatch(getActions.clean())
    }
}, []);

└▷ 이 외에도 useEffect는 언마운트 시 cleanup 함수를 적용할 수 있습니다.

Q_2. 클래스 컴포넌트와 함수형 컴포넌트의 차이점에 대해 설명해주세요.

Q_3. 아래는 상품 가격이 담긴 객체 배열입니다.

• 1. price가 높은 순으로 정렬 된 List를 반환하는 함수를 작성해주세요.
• 2. price가 6000 이상인 제품들의 인덱스를 찾아, 해당 제품들의 이름을 배열로 반환하는 함수를 작성해주세요.>

const products = [
{ id: 1, product: 'Laptop', price: 7200 },
{ id: 2, product: 'HeadPhone', price: 6000 },
{ id: 3, product: 'Mouse', price: 2000 },
{ id: 4, product: 'Keyboard', price: 4200 },
{ id: 5, product: 'Desktop', price: 10800 },
]