20240522 다양한 React hook과 React Router DOM

RingKim1·2024년 5월 23일

React TIL

TIL

목록 보기

24/77

Today

1. Material Icon Theme 설치(VSCode extensin)

필요성
기존에는 바닐라 자바스크립트로 하던 프로젝트들이 리액트로 넘어오면서 패키지를 통해 계속 설치하니까 관리해야 할 파일들이 너무 많아졌다..

현재상황

사실 얼마 안되는 것 같아 보여도 저 src파일 안에 폴더를 또 열어보면 공부를 하려고 만든 jsx파일 3~4개씩 있다.

가끔 튜터님들께서 화면공유를 해주실 때 저 파일 이름 옆에 아이콘들이 있어 보기 편하겠다라고 생각했어서 찾아봤다.

구글링을 하니 Material Icon Theme를 설치하면 된다고 한다. 바로 설치하러..

설치 완료

2. React 공부(다양한 훅)

요즘 한창 공부를 하고 있는 라이브러리 React
다양한 훅들에 대해서 배우고 있다.
나중에 복습하면서 React를 다시 정리해서 하나의 게시물로 올리고 지금은 간단하게 정리만 해서 넘어가자!

1) useEffect

개념: 컴포넌트의 생명주기 메서드를 대체하는 훅
사용법:

useEffect(() => {
  // 부수 효과 로직
  return () => {
    // 정리 로직 (선택적)
  }
}, [의존성 배열])

용도: 데이터 가져오기, 구독 설정, 수동 DOM 조작 등 부수 효과 관리

2) useRef

개념: 컴포넌트의 수명주기에 걸쳐 유지되는 참조 객체 생성
사용법:

const ref = useRef(초기값);

용도: DOM 요소 접근, 이전 값 기억, 타이머 ID 관리 등

3)useContext

개념: 컴포넌트 트리 전체에서 공유되는 상태 관리
사용법:

const value = useContext(MyContext);

용도: 전역 상태 관리, 컴포넌트 간 데이터 공유

4)Memoization

개념: 함수 호출 결과를 캐싱하여 중복 계산을 방지하는 최적화 기법
React에서 사용:
- useMemo: 복잡한 계산 결과 캐싱
- React.memo: 컴포넌트 렌더링 결과 캐싱
용도: 불필요한 리렌더링 방지, 성능 향상

5)Custom Hook

개념: 재사용 가능한 Hook 함수를 직접 정의
사용법:

function useMyCustomHook(args) {
  // 커스텀 훅 로직
  return 값;
}

용도: 공통 로직 분리, 컴포넌트 간 상태 공유, 복잡한 기능 추상화

6) React Router DOM

리액트 애플리케이션에서 라우팅 기능을 제공하는 라이브러리

페이지 전환, URL 관리, 동적 라우팅
패키지 설치 필요 :
yarn add react-router-dom
or
npm install react-router-dom
주요 개념, 사용법

BrowserRouter
리액트 앱의 최상위 컴포넌트로, 브라우저의 히스토리 API를 활용하여 URL 관리
<BrowserRouter> 태그로 감싸줘야 함
Route
특정 URL에 매핑되는 컴포넌트를 렌더링
<Route path="경로" component={컴포넌트} /> 형태로 사용
Link
다른 페이지로 이동할 수 있는 링크 생성
<Link to="경로">링크 텍스트</Link> 형태로 사용
Switch
여러 개의 Route 중 가장 먼저 매칭되는 하나만 렌더링
<Switch> 태그로 감싸서 사용
useHistory
프로그래밍 방식으로 페이지 이동 가능
const history = useHistory(); history.push('/경로');
useParams
URL 파라미터 접근
const { id } = useParams();

Learn

정리

useEffect는 컴포넌트 생명주기 메서드를,
useRef는 컴포넌트 수명주기에 걸쳐 유지되는 참조 객체를,
useContext는 전역 상태 관리를,
memoization은 함수 호출 결과 캐싱을,
custom hook은 재사용 가능한 hook 함수 정의를,
RRD는 리액트 앱의 라우팅 기능을 제공