React Hooks system

• Hook은 함수형 컴포넌트를 이용하고 클래스형 컴포넌트보다 코드가 더 간단하고 코드의 재사용이 더 쉽다.
• 원하는 기능을 함수로 만든 후 원하는 위치에 넣어서 사용이 가능하다.
• Hooks : useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue.

useState

import React, { useState } from 'react';

const Search = () => {
  const [term, setTerm] = useState('');

1. term : state 값
2. setTerm : state값을 업데이트 하는 setter
3. useState('') : ()안에 있는 값은 state값의 기본값

검색 위젯으로 사용 예시:

//Search.js
import React, { useState } from "react";

const Search = () => {
	const [term, setTerm] = useState("");

	return (
		<div>
			<div className="ui form">
				<div className="field">
					<label>Enter Search Term</label>
					<input
						value={term}
						onChange={(e) => setTerm(e.target.value)}
						className="input"
					/>
				</div>
			</div>
		</div>
	);
};

export default Search;

• <input value={term} onChange={(e) => setTerm(e.target.value)} className="input" />
  
  - input이 업데이트가 되는 동시에 setTerm 함수가 그 값을 value로 보내고, value가 {term}임으로 state 값을 업데이트.

useEffect

• 함수 컴포넌트가 lifecycle method와 비슷한 기능을 사용하게 하는 hook.

//1.
useEffect(() => {
	console.log("rendered");
}, []);
//2.
useEffect(() => {
	console.log("rendered");
});
//3.
useEffect(() => {
	console.log("rendered");
}, [data]);

1. [] 첫번째 render 시 실행
2. X[] 첫번째 render 시 실행, re-render될때마다 실행
3. [data] 첫번째 render 시 실행, re-render 시 []배열 안에 있는 data가 변경 됐을때 실행

Cleanup function

• useEffect 함수를 반환 해주는 함수

useEffect(() => {
	const timeoutId = setTimeout(() => {
		if (term) {
			search();
		}
	}, 500);

	return () => {
		clearTimeout(timeoutId);
	};
}, [term]);

1. 첫번째 render 시 clearTimeout는 실행되지 않는다
2. 검색 value값인 term이 업데이트 되면 ren-render가 되면서 0.5초 후에 search()가 실행되는 카운트다운이 시작된다
3. 0.5초가 끝나기 전에 term에서 변화가 감지되면 clearTimeout가 실행되면서 0.5초가 리셋되고 다시 0.5초가 끝나면 search()를 실행한다.

Debouncing

• 렉 또는 시간 조건을 걸어서 실행을 늦추는 기능
• 보통 event 마다 (예: 클릭, 키보드 입력) 즉각적인 API call을 방지하기 위해 사용됨.

검색 위젯에서 사용 예시:

const Search = () => {
  const [term, setTerm] = useState('programming');
  const [debouncedTerm, setDebouncedTerm] = useState(term);
  const [results, setResults] = useState([]);

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(term);
    }, 1000);

    return () => {
      clearTimeout(timerId);
    };
  }, [term]);

  useEffect(() => {
    const search = async () => {
      const { data } = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query',
          list: 'search',
          origin: '*',
          format: 'json',
          srsearch: debouncedTerm,
        },
      });

      setResults(data.query.search);
    };
    search();
  }, [debouncedTerm]);

Cleanup function + debouncing = useDebounce

const debouncedSearchTerm = useDebounce(searchTerm, 500);

useRef

• DOM element에 대한 reference 기능을 주는 hook. document.getElementById.

import React, { forwardRef, useRef } from "react";

const User = () => {
	const idReferenece = useRef();
	const passwordReference = useRef();

	// ...

	return (
		<form>
			<LabelInput text="id:" type="text" ref={idReference} />
			<LabelInput text="password:" type="password" ref={passwordReference} />
		</form>
	);
};

Event bubbling

• 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미.
• 예: 특정 child
  에서 클릭이 되면 각각 parent 까지 전달되면서 까지 클릭 이벤트가 전달 된다.

React-router

• Navigation header

//Route.js
const Route = ({ path, children }) => {
	return window.location.pathname === path ? children : null;
};

export default Route;

//App.js
import Route from "./components/Route";

return (
	<div>
		<Route path="/">
			<Accordion items={items} />
		</Route>
		<Route path="/list">
			<Search />
		</Route>
		<Route path="/dropdown">
			<Dropdown
				label="Select a color"
				options={options}
				selected={selected}
				onSelectedChange={setSelected}
			/>
		</Route>
		<Route path="/translate">
			<Translate />
		</Route>
	</div>
);