반응 및 다음에 대한 내 입장-JS 튜토리얼-php.cn

반응 및 다음에 대한 내 입장

PHPz

풀어 주다： 2024-07-20 07:29:29

원래의

283명이 탐색했습니다.

My ents on react & next

내가 React와 Next.js에 뛰어드는 이유: 새로운 시작

저는 최근 React와 Next.js를 사용하여 새로운 학습 여정을 시작했습니다. 제가 이 도구에 대해 기대하는 이유는 다음과 같습니다.

반응: 이유

컴포넌트 기반 매직

React의 컴포넌트 기반 아키텍처는 저에게 획기적인 변화를 가져왔습니다. 얽힌 코드를 관리하는 대신 이제 재사용 가능하고 독립적인 구성 요소를 만들고 있습니다. 예를 들어 간단한 Button 구성 요소는 다음과 같습니다.

// Button.js
import React from 'react';

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

export default Button;

로그인 후 복사

이 모듈식 접근 방식은 개발을 간소화할 뿐만 아니라 프로젝트를 더욱 체계적으로 유지해줍니다.

선언적이고 명확함

React의 선언적 구문은 신선한 공기를 불어넣는 것과 같습니다. 이를 통해 애플리케이션 상태에 따라 UI가 어떤 모습이어야 하는지 설명하여 더 깔끔하고 예측 가능한 코드를 만들 수 있습니다. 다음은 간단한 Counter 구성 요소입니다.

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

로그인 후 복사

멋진 생태계

React 생태계에는 도구와 라이브러리가 풍부합니다. 라우팅의 경우 React Router는 탐색을 단순화합니다.

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

로그인 후 복사

성능 향상

React의 가상 DOM은 UI를 효율적으로 업데이트합니다. 다음은 React의 성능 최적화를 보여주는 간단한 구성 요소입니다.

// UserProfile.js
import React from 'react';

const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

export default UserProfile;

로그인 후 복사

Next.js: 보너스

내장 기능

Next.js는 서버 측 렌더링 및 정적 사이트 생성과 같은 내장 기능으로 React를 확장합니다. 기본 페이지 설정은 다음과 같습니다.

// pages/index.js
import React from 'react';

const HomePage = () => (
  <div>
    <h1>Welcome to Next.js!</h1>
  </div>
);

export default HomePage;

로그인 후 복사

파일 기반 라우팅

Next.js는 페이지 디렉토리의 구조에 따라 경로가 결정되는 파일 기반 라우팅 시스템을 사용합니다. 예:

pages/index.js는 /
에 매핑됩니다. 페이지/about.js는 /about
에 매핑됩니다. 동적 경로의 경우 대괄호로 파일을 만듭니다. 예를 들어 페이지/사용자/[id].js는 /users/123:
과 같은 URL을 처리합니다.

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserProfile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile for User ID: {id}</h1>
    </div>
  );
};

export default UserProfile;

로그인 후 복사

최적화된 성능

Next.js에는 자동 코드 분할 및 최적화된 이미지 로딩과 같은 성능 최적화가 포함되어 있습니다. 다음/이미지 구성 요소를 사용하는 방법은 다음과 같습니다.

// pages/index.js
import Image from 'next/image';

const HomePage = () => (
  <div>
    <h1>Next.js Image Optimization</h1>
    <Image src="/my-image.jpg" alt="My Image" width={500} height={300} />
  </div>
);

export default HomePage;

로그인 후 복사