inutes로 설명되는 모든 React 개념

React는 몇 분 만에 프런트엔드 코드를 개발할 수 있는 JavaScript 라이브러리입니다. 특정 작업을 수행하기 위해 사전 구축된 방법과 기능이 있습니다. 라이브러리로서의 React에는 조정, 상태, 소품 등과 같은 복잡한 용어가 포함되어 있습니다. 실제로는 무엇을 의미하나요?

이 글에서는 이 과장된 개념에 대해 좀 더 간단하게 알아보겠습니다.

1. 구성품

구성 요소는 웹페이지에 렌더링할 React 요소를 반환하는 재사용 가능한 작은 코드입니다. 버튼, 탐색 모음, 카드 등과 같은 웹페이지의 단일 부분을 구성하는 코드 그룹입니다. 이는 JavaScript 함수와 같지만 렌더링된 요소를 반환합니다. "Props"라는 매개변수를 허용합니다. 구성 요소 이름은 대문자로 표시됩니다.

기능성분 예시

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

참고:

• 클래스 기반보다는 기능적 구성요소를 권장합니다.
• 기능적 구성요소를 흔히 Stateless 구성요소라고 합니다.

2. JSX

JSX는 React에서 HTML을 작성할 수 있게 해주는 JavaScript XML입니다. React 요소를 생성하기 위해 XML과 유사한 태그와 속성을 도입합니다. .jsx 파일에 HTML과 같은 코드를 작성할 수 있게 하여 React 구성요소를 쉽게 생성할 수 있습니다. 복잡한 JavaScript를 사용하는 대신 JSX는 코드를 읽기 쉽고 깔끔하게 만듭니다. React DOM은 htmlFor, onClick과 같은 속성 이름 지정에 camelCase를 사용합니다.

JSX 예시

<h1 className="head">This is H1!</h1>

3. 조각

React의 프래그먼트를 사용하면 구성 요소에서 여러 요소를 반환할 수 있습니다. 추가 DOM 노드를 생성하지 않고 요소 목록을 그룹화합니다. DOM에서 모든 추가 div를 정리합니다. 이렇게 하면 UI가 빠르게 렌더링됩니다.

조각의 예

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

참고:

• 프래그먼트는 코드를 더 깔끔하고 읽기 쉽게 만듭니다.
• 메모리 효율적입니다.
• CSS 스타일과 키를 가질 수 없습니다.

4. 소품

"Props"는 React에서 속성을 나타내는 특수 키워드입니다. 구성요소 간에 데이터를 전송하는 데 사용됩니다. 데이터 전송은 단방향, 즉 상위 구성 요소에서 하위 구성 요소로 이루어집니다.

소품 예시

function Head(props) {
  return <p>{props.children}</p>;
}

참고: Props는 읽기 전용이므로 하위 구성 요소가 상위 구성 요소에서 오는 값을 조작하지 않도록 합니다.

5. 상태

구성요소는 사용자가 상호작용할 때 특정 값을 추적해야 합니다. 사용자가 버튼을 클릭하면 밝은/어두운 모드 테마 토글 버튼의 ​​값이 밝은 모드에서 어두운 모드로, 그 반대로 변경된다고 가정해 보겠습니다. 구성 요소는 테마의 현재 값을 기억해야 합니다. React에서는 이런 종류의 구성 요소별 메모리를 상태라고 합니다.

상태는 useState() 후크를 사용하여 정의됩니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

상태 정의 예시

const [index, setIndex] = useState(0)

참고: 다른 하위 구성 요소와 쉽게 공유하고 단일 소스를 보장하기 위해 항상 최상위 구성 요소에서 상태를 정의하는 것이 좋습니다.

6. 수명주기 방법

라이프사이클 메서드는 구성요소 존재의 다양한 단계에서 작업을 수행하기 위해 React 클래스 내에서 사용할 수 있는 특수 함수입니다. 해당 단계는 다음과 같습니다.

• 마운팅: 구성 요소가 처음 생성되어 DOM에 삽입될 때
• 업데이트: 구성 요소의 props나 상태가 변경되어 구성 요소가 다시 렌더링되는 경우
• 마운트 해제: DOM에서 구성 요소가 제거되는 경우

7. 순수함

함수형 프로그래밍의 순수성은 주어진 동일한 입력이 동일한 출력을 반환하는 경우입니다. 입력은 출력을 결정하는 유일한 요소이므로 함수는 순수하다고 합니다.

React에서 구성 요소는 동일한 입력에 대해 동일한 출력을 반환할 때 순수하다고 합니다(viz props)

8. 엄격 모드

엄격 모드는 추가 안전 기능을 활성화하여 코드 품질을 향상시키는 개발 기능입니다. 코드에 잠재적인 오류 및 버그에 대한 경고가 표시됩니다. 브라우저 콘솔에 경고를 기록합니다.

엄격 모드 예시

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

브라우저 콘솔을 표시하는 React의 엄격 모드

9. 훅

React의 Hooks를 사용하면 클래스 구성 요소를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. Hooks는 React의 상태 관리, 부작용 및 기타 기능에 대한 액세스를 제공하는 함수입니다.

일반적으로 사용되는 후크: useState, useMemo, useRef 등

훅 예시

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

참고:

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const age = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

Note:

• It is recommended to use string as a `Key` that uniquely identifies the item in the list.
• Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

Note:

• Controlled components provides form validation because the user's input is instantly reflected due to use of state.
• Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

• Introduction to React Router for navigation
• Basic setup and usage
• Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

First wrap your content into the . Then we define and inside that introduces the for navigation. has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note:

• 앱에는 여러 개의 < 경로 >.
• < 경로 > 중첩될 수 있습니다.
• `react-router-dom`에는 < 링크 > 및 < 아울렛 > 탐색을 위한 구성 요소입니다.

결론

프로그래밍 언어를 배우는 가장 좋은 방법은 더 많은 프로젝트를 연습하는 것입니다. 작은 프로젝트를 만들고 컨셉을 실험해 보세요.

이 게시물이 도움이 되셨다면 저에게 계속 사랑을 보여주시는 것을 잊지 마세요. 다음 번에 좋아요를 누르고, 공유하고, 배워보세요.

또한 여기와 X, GitHub, LinkedIn에서 저를 팔로우하여 저와 계속 연락하실 수 있습니다.

위 내용은 inutes로 설명되는 모든 React 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!