React 훑기

📙 목차

1. 왜 React를 사용하는가?
2. React의 전역 상태관리
3. React의 서버 데이터 요청
4. React Hooks

왜 React를 사용하는가?

기술 스택이 프로젝트에 미치는 영향

기술 스택의 선택은 프로젝트의 성공과 직결됩니다. 우리는 모든 것을 다시 개발하지 않고 기존에 존재하는 기술 스택 위에 우리가 필요한 만큼 개발하게 됩니다. 우리가 선택한 기술스택의 질에 따라서 개발 능률이 향상되고, 유지 보수를 용이하게 하며, 팀원 간의 협업을 원활하게 합니다.

무엇보다 기술 스택은 프로젝트의 확장성과 미래의 성장 가능성에 큰 영향을 미칩니다. 사용하는 기술이 커뮤니티에서 널리 지원되고, 지속적으로 업데이트 된다면, 프로젝트는 시간이 지남에 따라 발전할 수 있습니다. 반면, 지원이 점차 줄어들거나 개발자 커뮤니티에서 외면받는 기술을 선택할 경우, 프로젝트는 기술적 부채와 유지 보수의 어려움에 직면할 수 있습니다. 따라서 현재와 미래의 트렌드를 예측하고, 프로젝트가 장기간에 걸쳐 지속 가능하도록 하는 것이 중요합니다.

프론트엔드 기술 스택에서의 React

1. 시장에 영향을 미치는 거대한 커뮤니티와 리소스
GitHub에서 상위 5개 리포지토리 중 하나이며, 대규모 커뮤니티의 지원을 받고 있습니다. 또한 Fortune 500대 기업( Netflix, Uber, Amazon, Airbnb 등)에서도 선호하는 기술입니다.

2. 가독성 및 유지 보수
JSX 문법을 사용하여 컴포넌트를 작성하여 UI 코드가 더욱 가독성이 높아지고 유지 보수가 용이합니다.

3. React Native
리액트의 UI를 만드는 기능을 확장하여 웹이 아닌 플랫폼에서 활용할 수 있도록 기술을 확장했습니다. React Native는 안드로이드(Android)와 아이폰(iOS)의 모바일 앱을 만드는 대표적인 기술로 널리 사용되고 있습니다.

4. 다른 라이브러리와의 높은 호환성
리액트는 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임워크와 함께 사용합니다. 예를 들어, 리액트 애플리케이션을 개발할 때는 리액트 라우터(React Router)를 사용하여 페이지 간의 전환을 관리하고, 상태 관리를 위해 리덕스(Redux)같은 라이브러리를 함께 사용할 수 있습니다. 프로젝트의 적합한 라이브러리를 선택하여 개발 할 수 있다는것이 큰 장점입니다.

---

React의 전역 상태관리

1. Redux

Redux는 가장 인기 있는 React 상태 관리 라이브러리 중 하나입니다.
단일 스토어를 사용하여 애플리케이션의 상태를 중앙 집중식으로 관리합니다. Redux는 예측 가능한 상태 변화를 위한 강력한 패턴을 제공하며, 미들웨어를 사용하여 비동기 작업을 처리할 수 있습니다.

2. MobX

MobX는 단순하고 간단한 API를 가진 상태 관리 라이브러리입니다. Observable 상태를 사용하여 상태 변화를 자동으로 감지하고 리액트 컴포넌트를 업데이트합니다. MobX는 Redux와 비교하여 더 유연하고 직관적인 방식으로 상태를 관리할 수 있습니다.

3. React Context API

React에 내장된 Context API는 컴포넌트 트리를 통해 데이터를 전파하는 데 사용됩니다. 작은 규모의 애플리케이션 또는 단순한 상태 관리에는 Redux나 MobX보다 간단한 대안으로 사용할 수 있습니다. 그러나 복잡한 상태 관리에는 한계가 있을 수 있습니다.

4. Recoil

Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션에서 많은 컴포넌트 사이에서 공유되는 상태를 간편하게 관리할 수 있습니다. 상태의 변경 및 읽기가 간단하며, 비동기 처리와 더 나은 성능을 제공하는 등의 특징이 있습니다.

5. Zustand

Zustand은 간단하고 강력한 React 상태 관리 라이브러리입니다. 단일 함수로 상태를 정의하고, 해당 함수를 사용하여 상태를 업데이트할 수 있습니다. Zustand는 Context API를 기반으로 하며, 간단한 API와 함께 상태의 구독과 업데이트를 처리합니다.

---

React의 서버 데이터 요청

1. Redux-toolkit

Redux와 함께 thunk 미들웨어(RTK Query)를 통해 서버 데이터처리를 비동기로 수행할 수 있게 합니다. 하지만 Redux는 클라이언트 측 어플리케이션 상태 관리에 중점을 두고 있습니다. 따라서 대량의 데이터를 패칭해야하는 어플리케이션에서 캐싱의 문제점이 있습니다.

2. React-query, swr

데이터 패칭 및 캐싱에 유리, 많은 네트워크 요청과 데이터 패칭이 있으면 적합한 라이브러리로 React 어플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 해줍니다.

---

React Hooks

Hook을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다.

상태 변경, 즉 가상돔의 상태를 변경할 수 있는 함수로 그에 따른 생명 주기를 통해 다양한 이벤트를 실행할 수 있다

✅ useState

• Hooks 의 상태 관리 함수
• 컴포넌트에서 바뀌는 값을 관리
• 가상돔을 사용하기 때문에 값이 바뀐 것을 감지하여 리랜더링 시켜야줘야할 필요가 있을 때 사용하는 변수

✅ useCallBack

• 의존성 배열이 바뀔 때 마다 특정 함수를 새로 만들지 않고 재사용할 수 있게 해주는 함수

✅ useEffect

• 마운트 / 언마운트 시 특정 작업(함수나 이벤트)를 실행할 때 사용하는 함수
• 의존성 배열의 값이 바뀌었을 때도 함수나 이벤트를 실행

(3-2) useLayoutEffect

• useEffect와 동일하지만, DOM이 그려지기 이전 시점에 동기적으로 수행된다.
• 때문에 DOM을 조작하는 코드가 존재하더라도, 사용자는 깜빡임을 보지 않는다.
• 콜백함수가 끝날 때까지 프레임워크가 기다린다.
• 가능한 useEffect를 쓰고 구현이 안될때만 사용 권장

✅ useMemo

• 의존성 배열이 바뀔 때 마다 연산된 값(결과)를 반환하여 렌더링 되었을 때 재사용할 수 있게 해주는 함수(실행문)
• 함수에 return값이 있으면 사용

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

export default function UseMemo() {
  const [val, setVal] = useState("");
  const [isKorea, setIsKorea] = useState(true);
  
  // useMemo를 사용안하면 isKorea 값뿐만 아니라 val값이 변해도 useEffect() 실행됌
  // const location = { country: isKorea ? "한국" : "일본" };
  
  const location = useMemo(() => {
    return {
      country: isKorea ? "한국" : "일본",
    };
  }, [isKorea]); // isKorea값이 바귈때만 실행

  useEffect(() => {
    console.log("useEffect... 호출"); 
  }, [location]);   

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setVal(value);
  };

  return (
    <header>
      <div>UseMemo😊</div>
      <h2>하루에 몇 끼 먹어요?</h2>
      <input value={val} onChange={onChange} />
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>Update</button>
    </header>
  );
}

✅ useRef

• Js에서 DOM SELECTOR 함수처럼 React에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks 함수
• ref 객체 내부의 값은 render와 상관없이 유지됨

export default function UseRef() {
  const nameFocus = useRef<HTMLInputElement>(null);  // useRef로 input태그 접근
  const [inputs, setInputs] = useState("");
 
  const onFocus = () => {
    if (nameFocus.current) {
      nameFocus.current.focus();  // useRef로 input태그 포커싱
    }
  };

  return (
    <div>
      <input
        name="이름"
        value={inputs}
        ref={nameFocus}
      />
      <button onClick={onFocus}>포커스 주기</button>
    </div>
  );
}

🤔 useRef , useMemo와 Callbcack을 사용해서 어떻게 최적화를 할 수 있는가?

메모이제이션

만약 어떠한 연산이나 함수가 복잡해서 결과가 오래걸린다 (30초)
리액트는 상태가 바뀌면 랜더링, 하지만 랜더링 될 때 값이 바뀌지 않는 부분이라면 한번 더 실행해야할 필요가 없기 때문에 값이 안바뀌는 연산이나 함수를 랜더링이 되더라도 재생성하지 않도록 값이나 함수를 재사용
즉, 랜더링 시 필요 없는 연산의 시간을 줄여주기 위해 사용