[React] React 및 Next.js 기본 내용 정리

[React]

웹 (프론트엔드) 개발을 위한 JavaScript library로, 동적 웹앱 구성을 위한 SPA(Single Page Application)를 지원합니다.

* SPA : 사용자와의 상호작용에서 신규 페이지를 로드하는 것이 아니라 단일 페이지에서 동적으로 처리하는 app.

또한 가상 DOM 을 사용해 상태(state) 변경에 따라 가상 DOM을 수정하고 실제 DOM으로 이식하는 과정을 통해 처리 속도를 제공합니다.

 

바인딩

---

이벤트 핸들러 사용

class 컴포넌트의 method : 바인딩 필요

class Button extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

 

functional 컴포넌트의 함수 : 자동 바인딩

function Button(props) {
  function handleClick(event) {
    console.log('Button clicked');
  }

  return <button onClick={handleClick}>Click me</button>;
}

 

 

 

Hooks

---

functional 컴포넌트에서도 상태(state) 관리와 생명주기(lifecycle) 기능을 사용할 수 있도록 해주는 기능입니다.

 

자주 사용되는 Hooks

useState

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

- useState로 count 값을 초기화하고, setCount를 사용해 count 값을 조정합니다.

 

 

useEffect

useEffect(() => {
  console.log('컴포넌트 렌더링 후 실행');
}, []);

- 랜더링 이후 정의된 function을 실행합니다.

- [] 목록에 특정 상태를 넣으면, 해당 상태가 변경될 때 마다 실행됩니다.

 

 

useContext

전역 상태처럼 데이터를 공유할 수 있도록 하는 Hook입니다.

// <<ThemeContext.js>>
import React from "react";

const ThemeContext = React.createContext("light"); // Context 생성 (기본값: light)

export default ThemeContext;


// <<App.jsx>>
import React from "react";
import ThemeContext from "./ThemeContext";
import ThemeButton from "./ThemeButton";

function App() {
  return (
    // Provider: value로 전달할 데이터 제공
    <ThemeContext.Provider value="dark">
      <div>
        <h1>Context Provider / Consumer Example</h1>
        <ThemeButton />
      </div>
    </ThemeContext.Provider>
  );
}

export default App;


// <<ThemeButton.jsx>>
import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button>Current Theme: {theme}</button>;
}

- 하위 어떠한 컴포넌트에서나, Provider를 통해 제공하는 값을 불러와 사용할 수 있습니다.

- 값을 제공하기 위해서는, 초기 상태와 값을 지정하거나 {컴포넌트}.Provider를 사용할 수 있습니다.

- 값을 사용하기 위해서는, ThemeContext.Consumer로 직접 불러오거나, useContext hook을 사용할 수 있습니다.

 

 

useRef

DOM에 직접 접근하거나, 랜더링 사이 값을 유지하기 위해 사용합니다. (상태값은 랜더링될 때 마다 변할 수 있음)

import { useRef, useState } from "react";

function Count() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  renderCount.current += 1; // 렌더될 때마다 증가

  return (
    <div>
      <p>state count: {count}</p>
      <p>render count: {renderCount.current}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

- renderCount 값은 랜더링 될 때 마다 1씩 증가한 값을 유지하지만, useState는 페이지 재로드 시 0 값으로 변경됩니다.

 

 

 

Functions

---

map

리스트 순환하며 내부 로직 실행

function App() {
  const list = ["사과", "바나나", "포도"];

  return (
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

- unordered list에 "사과", "바나나", "포도" list item 추가

 

 

PropTypes

입력 properties의 타입을 지정하는데 사용할 수 있습니다.

import React from "react";
import PropTypes from "prop-types";

function MyButton({ label, count, onClick }) {
  return (
    <button onClick={onClick}>
      {label} - {count}
    </button>
  );
}

// 🔍 PropTypes 선언
MyButton.propTypes = {
  label: PropTypes.string.isRequired,   // 필수 문자열
  count: PropTypes.number,              // 숫자
  onClick: PropTypes.func,              // 함수
};

// 🔧 기본값 설정 (선택)
MyButton.defaultProps = {
  count: 0,
  onClick: () => console.log("clicked"),
};

export default MyButton;

- MyButton은 label 문자열 속성을 반드시 입력받아야 합니다.

- number, func 속성은 선택적으로 입력할 수 있습니다.

 

 

패턴

HOC (Higher-Order Component)

Componet를 입력받아 추가 로직 구현 후 해당 Component를 반환하는, Component 재사용을 위한 패턴입니다.

샘플) withLoading HOC를 사용해 페이지 로딩에 대한 로직을 대상 Component에 적용

// <<withLoading.js>>
import React from "react";

// HOC: WrappedComponent를 받아서 새 컴포넌트를 리턴
function withLoading(WrappedComponent) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>Loading...</div>;
    }

    // isLoading을 제외한 나머지 props 전달
    return <WrappedComponent {...props} />;
  };
}

export default withLoading;


// <<UserInfo.jsx>>
function UserInfo({ name }) {
  return <div>User: {name}</div>;
}

export default UserInfo;


// <<App.jsx>>
import React from "react";
import withLoading from "./withLoading";
import UserInfo from "./UserInfo";

const UserInfoWithLoading = withLoading(UserInfo);  // UserInfo에 로딩 기능을 추가한 새 컴포넌트 생성

function App() {
  return (
    <div>
      <h1>HOC Example</h1>

      <UserInfoWithLoading
        isLoading={true}
        name="Alice"
      />

      <UserInfoWithLoading
        isLoading={false}
        name="Bob"
      />
    </div>
  );
}

export default App;

 

- withLoading Componet에서는 어떠한 isLoading prop을 입력받아, 해당 상태가 true인 경우 "Loading..." text 출력

 

 

---

[Next.js]

React를 기반으로 한 프레임워크로, 풀스택(프론트엔드 & 백엔드) 웹 개발을 위한 솔루션을 제공합니다.

 

주요 특성

Rendering

- CSR (Client-Side Rendering) : 사용자 브라우저에서 랜더링을 수행합니다.

- SSR (Server-Side Rendering) : 서버에서 랜더링을 진행하고, 하이드레이션(Hydration)으로 클라이언트에 전달합니다.

- SSG (Static Site Generation) : 빌드 타임에 페이지를 생성해 로딩시간을 줄입니다.

 

 

 

---

[참고]

위키독스 : https://wikidocs.net/197619