[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 12주차 (2): React Hooks, Router

Hooks

- 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 함수.

- Hook은 React의 함수형 컴포넌트 내에서만 사용 가능.

- custom Hook 이름은 "use"로 시작하는 것을 권장.

💻 주요 Hook 종류

1. useState: 컴포넌트에서 상태를 관리할 수  있게 해준다.

2. useEffect: 컴포넌트의 랜더링 이후에 특정 작업을 실행할 수 있게 해준다.

 useEffect(() => {
    console.log("location이 변경될 때 마다 실행됩니다. ✊🏻");
  }, [location]);

3. useMemo: 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화 한다.

  // [useMemo 사용!]
  // 특정 값이 변경되었을 때만 함수가 호출되도록
  // number 값이 변경될 때만 함수를 재실행하고 값을 저장
  const calc2 = useMemo(() => {
    console.log("calc 2");

    // return 이후의 number * 2 값이 memoization 됨.
    return number * 2;
  }, [number]);
  return (
    <>
      <input
        type="text"
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
      />
      <button onClick={() => setNumber(number + 1)}>+1</button>
      <p>number: {number}</p>
      <p>calc: {calc()}</p>
      <p>calc2: {calc2}</p>
    </>
  );
}

4. useCallback: 함수를 메모이제이션하여 불필요한 리렌더링을 방지.

5. useRef: DOM 요소에 접근하거나 변경 가능한 값을 저장하는 데 사용.

const inputRef = useRef(null);

6. useReducer: 복잡한 상태 로직을 관리하는 데 사용.

const [state, dispatch] = useReducer(reducer, initialState);

7. useContext: 컴포넌트 트리 전체에 데이터를 제공하는 데 사용.

🌍 React 공식 문서

📺 관련 강의

---

Router

- React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 표준 라이브러리.

💻 특징

1. 클라이언트 사이드 라우팅: 서버 요청 없이 URL에 따라 UI를 업데이트

2. 선언적 라우팅: Routes와 Route 컴포넌트를 사용하여 라우트를 정의

3. 중첩 라우트: 복잡한 계층 구조의 라우팅을 지원

4. 동적 라우팅: 렌더링 중에 라우트를 정의할 수 있어 더 복잡한 앱 개발이 가능

5. 상대 경로 지원: 자동으로 부모 라우트의 URL을 기반으로 경로를 설정

import { Link } from "react-router-dom";

export default function Header() {
  return (
    <header className="Header">
      <span>logo</span>
      <div>
        <Link to={"/"} className="menu-item">
          홈으로
        </Link>
        <Link to={"/test"} className="menu-item">
          테스트
        </Link>
        <Link to={"/products"} className="menu-item">
          Product
        </Link>
      </div>
    </header>
  );
}