[React] React 개발을 하며 지키면 좋을 것들 (5)

위 글은 50 React.js Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,

이 글은 5번째 중 5번째(마지막) 글이다.

---

41. Static Site Generation (SSG) with Next.js (Next.js를 사용한 정적 사이트 생성)

문제: 빌드 시 페이지를 사전 렌더링하여 빠른 로드 시간과 더 나은 SEO를 원합니다.

해결책: Next.js를 사용하여 정적 사이트 생성을 구현합니다.

// PROBLEM: 페이지를 동적으로 렌더링하여 로드 시간이 길어지고 SEO가 좋지 않음

const Home = ({ data }) => (
  <div>
    <h1>Dynamic Data</h1>
    <p>{data.title}</p>
  </div>
);

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// SOLUTION: Next.js를 사용하여 정적 사이트 생성 구현

const Home = ({ data }) => (
  <div>
    <h1>Static Site Generated Data</h1>
    <p>{data.title}</p>
  </div>
);

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// 사용 예시
export default Home;

42. React Router for Client-Side Routing (React Router를 사용한 클라이언트 사이드 라우팅)

문제: React 애플리케이션에서 클라이언트 사이드 라우팅을 처리해야 합니다.

해결책: React Router를 사용하여 선언적으로 클라이언트 사이드 라우팅을 구현합니다.

// PROBLEM: 클라이언트 사이드 라우팅이 없어 페이지 이동이 불편함
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const App = () => (
  <div>
    <Home />
    <About />
  </div>
);

// SOLUTION: React Router를 사용하여 클라이언트 사이드 라우팅 구현
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

// 사용 예시
<App />

43. Testing with React Testing Library (React Testing Library를 사용한 테스트)

문제: React 컴포넌트가 올바르게 작동하는지 확인하기 위해 테스트를 작성해야 합니다.

해결책: React Testing Library를 사용하여 사용자 상호작용에 중점을 둔 테스트를 작성합니다.

// PROBLEM: 컴포넌트 테스트가 없어 오류를 쉽게 발견할 수 없음
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// SOLUTION: React Testing Library를 사용하여 테스트 작성
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

test('renders button with correct text and handles click', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  const button = screen.getByText(/click me/i);
  expect(button).toBeInTheDocument();
  fireEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

44. Using React DevTools for Debugging (React DevTools를 사용한 디버깅)

문제: 적절한 도구 없이 React 애플리케이션을 디버깅하는 것이 어려울 수 있습니다.

해결책: React DevTools를 사용하여 컴포넌트 트리, props, 상태, 훅 등을 검사합니다.

// PROBLEM: 디버깅 도구가 없어 문제를 찾기 어려움
const App = () => <div>App Component</div>;

// SOLUTION: React DevTools를 사용하여 디버깅
// React DevTools를 브라우저 확장으로 설치하거나 독립형 앱으로 설치합니다.

// 사용 예시
// - 브라우저에서 애플리케이션을 열고
// - DevTools를 열고 (보통 F12 또는 우클릭 -> 검사)
// - React 탭으로 이동하여 컴포넌트 트리를 검사

45. Memoizing Expensive Calculations with useMemo (useMemo를 사용한 성능 최적화)

문제: 매번 렌더링될 때마다 실행할 필요 없는 고비용 계산을 최적화해야 합니다.

해결책: useMemo 훅을 사용하여 고비용 계산을 메모이제이션합니다.

// PROBLEM: 고비용 계산이 매번 렌더링될 때마다 실행됨
const ExpensiveComponent = ({ value }) => {
  const expensiveCalculation = (num) => {
    console.log('Calculating…');
    return num * 2;
  };
  const result = expensiveCalculation(value);
  return <div>{result}</div>;
};

// SOLUTION: useMemo 훅을 사용하여 고비용 계산 메모이제이션
const ExpensiveComponent = ({ value }) => {
  const expensiveCalculation = (num) => {
    console.log('Calculating…');
    return num * 2;
  };
  const memoizedValue = useMemo(() => expensiveCalculation(value), [value]);
  return <div>{memoizedValue}</div>;
};

// 사용 예시
<ExpensiveComponent value={10} />

46. Callback Functions with useCallback (useCallback을 사용한 콜백 함수)

문제: 인라인 함수를 컴포넌트에 전달하면 불필요한 리렌더링이 발생할 수 있습니다.

해결책: useCallback 훅을 사용하여 콜백 함수를 메모이제이션합니다.

// PROBLEM: 인라인 함수가 불필요한 리렌더링을 유발
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <Button onClick={handleClick}>Increment</Button>
      <p>{count}</p>
    </div>
  );
};

// SOLUTION: useCallback 훅을 사용하여 콜백 함수 메모이제이션
const Button = React.memo(({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
));

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <Button onClick={handleClick}>Increment</Button>
      <p>{count}</p>
    </div>
  );
};

// 사용 예시
<App />

47. Environment Variables (환경 변수)

문제: 개발, 테스트, 프로덕션 환경별로 다른 설정을 관리해야 합니다.

해결책: 환경 변수를 사용하여 설정을 관리합니다.

// PROBLEM: 환경별 설정 관리가 어려움
const App = () => {
  const apiUrl = 'https://api.example.com';
  useEffect(() => {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, [apiUrl]);
  return <div>Check the console for API data</div>;
};

// SOLUTION: 환경 변수를 사용하여 설정 관리
// .env 파일 생성
REACT_APP_API_URL=https://api.example.com

// 컴포넌트에서 사용
const App = () => {
  const apiUrl = process.env.REACT_APP_API_URL;
  useEffect(() => {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, [apiUrl]);
  return <div>Check the console for API data</div>;
};

48. Internationalization with react-i18next (react-i18next를 사용한 다국어 지원)

문제: React 애플리케이션에서 여러 언어를 지원해야 합니다.

해결책: react-i18next를 사용하여 국제화를 처리합니다.

// PROBLEM: 다국어 지원이 없어 여러 언어로 앱을 제공할 수 없음
const App = () => <h1>Welcome</h1>;

// SOLUTION: react-i18next를 사용하여 국제화 처리
import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {


    en: {
      translation: {
        welcome: 'Welcome',
      },
    },
    fr: {
      translation: {
        welcome: 'Bienvenue',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

const App = () => {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
};

// 사용 예시
<App />

49. Code Splitting with React.lazy (React.lazy를 사용한 코드 분할)

문제: 성능과 로드 시간을 개선하기 위해 코드를 더 작은 청크로 나누어야 합니다.

해결책: React.lazy를 사용하여 컴포넌트를 동적으로 임포트합니다.

// PROBLEM: 모든 코드를 한 번에 로드하여 로드 시간이 길어짐
import MyComponent from './MyComponent';

const App = () => (
  <div>
    <MyComponent />
  </div>
);

// SOLUTION: React.lazy를 사용하여 코드 분할
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading…</div>}>
    <LazyComponent />
  </Suspense>
);

// 사용 예시
<App />

50. Tree Shaking with Webpack (Webpack을 사용한 트리 쉐이킹)

문제: 사용되지 않는 코드를 번들에서 제거하여 번들 크기를 줄이고 싶습니다.

해결책: Webpack의 트리 쉐이킹 기능을 사용하여 사용되지 않는 코드를 제거합니다.

// PROBLEM: 사용되지 않는 코드가 번들에 포함되어 번들 크기가 커짐
// 기존 설정
module.exports = {
  mode: 'development',
  //...
};

// SOLUTION: Webpack의 트리 쉐이킹 기능 사용
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

// 사용 예시
// ES6 모듈 형식으로 코드를 작성하고 Webpack이 자동으로 트리 쉐이킹을 수행하도록 설정합니다.

 

---

자주 사용하는 특징 (React 18 버전과 비교)

1. Static Site Generation (SSG) with Next.js (Next.js를 사용한 정적 사이트 생성)

Next.js를 사용한 정적 사이트 생성은 빠른 로드 시간과 SEO 최적화를 위해 많이 사용됩니다. 특히, 콘텐츠가 자주 변하지 않는 사이트에서 유용합니다.

2. React Router for Client-Side Routing (React Router를 사용한 클라이언트 사이드 라우팅)

React Router는 클라이언트 사이드 라우팅을 위한 표준 도구로 널리 사용됩니다. 다양한 애플리케이션에서 사용하기 적합합니다.

3. Testing with React Testing Library (React Testing Library를 사용한 테스트)

React 컴포넌트의 테스트를 위한 표준 도구로, 사용자 상호작용에 중점을 둔 테스트를 작성하는 데 유용합니다.

4. Using React DevTools for Debugging (React DevTools를 사용한 디버깅)

React DevTools는 컴포넌트 트리, 상태, 훅 등을 검사하는 데 필수적인 도구로, 디버깅에 매우 유용합니다.

5. Memoizing Expensive Calculations with useMemo (useMemo를 사용한 성능 최적화)

고비용 계산을 최적화하여 성능을 개선하는 데 많이 사용됩니다. 특히, 렌더링 성능이 중요한 경우에 유용합니다.

6. Callback Functions with useCallback (useCallback을 사용한 콜백 함수)

콜백 함수를 메모이제이션하여 불필요한 리렌더링을 방지하는 데 자주 사용됩니다.

7. Environment Variables (환경 변수)

환경별 설정을 관리하는 데 필수적입니다. 개발, 테스트, 프로덕션 환경에서 설정을 분리할 수 있습니다.

8. Internationalization with react-i18next (react-i18next를 사용한 다국어 지원)

여러 언어를 지원하는 애플리케이션에서 국제화를 구현하는 데 매우 유용합니다.

9. Code Splitting with React.lazy (React.lazy를 사용한 코드 분할)

코드를 더 작은 청크로 나누어 성능과 로드 시간을 개선하는 데 자주 사용됩니다. 특히, 대규모 애플리케이션에서 유용합니다.

10. Tree Shaking with Webpack (Webpack을 사용한 트리 쉐이킹)

사용되지 않는 코드를 제거하여 번들 크기를 줄이는 데 필수적입니다. Webpack을 사용한 대부분의 프로젝트에서 기본적으로 적용됩니다.

잘 사용되지 않는 특징 (React 18 버전과 비교)

1. Forwarding Refs (Refs 전달)

특정 상황에서만 필요합니다. 일반적인 컴포넌트에서는 덜 사용될 수 있습니다.

2. Using Refs for Focus Management (Refs를 사용한 포커스 관리)

포커스 관리가 필요한 경우에만 사용되며, 자주 사용되지는 않습니다.

3. CSS-in-JS with Styled Components (Styled Components를 사용한 CSS-in-JS)

모든 프로젝트에서 사용되는 것은 아닙니다. 여전히 CSS 모듈이나 전통적인 CSS를 사용하는 프로젝트도 많습니다.

4. Using Prop-Types for Type Checking (Prop-Types를 사용한 타입 검사)

TypeScript 사용이 증가하면서 Prop-Types의 사용 빈도는 줄어들고 있습니다.