2022년 게임 향상을 위한 반응 모범 사례

게시 됨: 2022-12-09

React는 웹 애플리케이션을 구축할 때 사용자 인터페이스를 만드는 데 가장 많이 사용되는 라이브러리 중 하나입니다. 많은 회사에서 널리 사용되며 활발한 커뮤니티가 있습니다.

React 개발자로서 라이브러리 작동 방식을 이해하는 것이 사용자 친화적이고 쉽게 확장 가능하며 유지 관리 가능한 프로젝트를 구축하는 데 필요한 유일한 것은 아닙니다.

또한 깨끗한 React 코드를 작성할 수 있게 해주는 특정 규칙을 이해하는 것도 필요합니다. 이렇게 하면 사용자에게 더 나은 서비스를 제공하는 데 도움이 될 뿐만 아니라 귀하와 프로젝트에서 작업하는 다른 개발자가 코드 기반을 더 쉽게 유지할 수 있습니다. 다음 React 프로젝트를 작업 중이신가요? 깨끗한 React 코드를 작성하는 방법을 배우는 것은 판도를 바꾸는 근육입니다. 여기에서 시작하세요 ️ Click to Tweet

이 튜토리얼에서는 React 개발자가 직면하는 몇 가지 일반적인 문제에 대해 이야기한 다음 React 코드를 보다 효율적인 방식으로 작성하는 데 도움이 되는 몇 가지 모범 사례에 대해 설명합니다.

시작하자!

React 개발자가 직면한 과제

이 섹션에서는 React 개발자가 웹 앱을 빌드하는 동안과 이후에 직면하는 몇 가지 주요 문제에 대해 논의합니다.

이 섹션에서 볼 수 있는 모든 문제는 나중에 자세히 설명할 모범 사례를 따르면 피할 수 있습니다.

초보자에게 영향을 미치는 가장 기본적인 문제부터 시작하겠습니다.

반응을 위한 전제 조건

React 개발자가 직면한 주요 과제 중 하나는 라이브러리를 사용하기 위한 전제 조건과 함께 라이브러리 작동 방식을 이해하는 것입니다.

React를 배우기 전에 몇 가지를 알아야 합니다. React는 JSX를 사용하기 때문에 HTML과 JavaScript를 아는 것은 필수입니다. 물론 웹 앱을 디자인하기 위한 CSS 또는 최신 CSS 프레임워크도 알고 있어야 합니다.

특히 React를 시작하기 전에 알아야 할 핵심 JavaScript 개념과 기능이 있습니다. 대부분 ES6에 해당하는 일부는 다음과 같습니다.

  • 화살표 함수
  • 나머지 연산자
  • 스프레드 연산자
  • 모듈
  • 파괴
  • 배열 방법
  • 템플릿 리터럴
  • 약속
  • let 및 const 변수

위에 나열된 JavaScript 주제는 초보자로서 React 작동 방식을 이해하는 데 도움이 됩니다.

또한 다음과 같은 React의 새로운 개념에 대해서도 배웁니다.

  • 구성품
  • JSX
  • 상태 관리
  • 소품
  • 렌더링 요소
  • 이벤트 처리
  • 조건부 렌더링
  • 목록 및 키
  • 양식 및 양식 유효성 검사
  • 후크
  • 스타일링

React 개념과 라이브러리를 사용하기 위한 전제 조건을 확실하게 이해하면 기능을 효율적으로 활용하는 데 도움이 됩니다.

그러나 이것이 당신을 압도하게 하지 마십시오. 끊임없는 연습과 학습을 통해 React를 사용하여 멋진 프로젝트를 빌드하는 방법을 빠르게 이해할 수 있습니다. 새로운 프로그래밍 언어를 배우는 것과 비슷합니다. 이해하는 데 약간의 시간과 연습이 필요할 뿐입니다.

상태 관리

React에서 변수의 상태/값을 업데이트하는 것은 바닐라 JavaScript를 사용하는 것과는 다르게 작동합니다.

JavaScript에서 변수를 업데이트하는 것은 같음 연산자( = )를 사용하여 변수에 새 값을 할당하는 것만큼 간단합니다. 예를 들면 다음과 같습니다.

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

위의 코드에서 초기 값이 300 인 x 라는 변수를 만들었습니다.

같음 연산자를 사용하여 새 값 100 을 할당했습니다. 이것은 updateX 함수 안에 작성되었습니다.

React에서 변수의 상태/값 업데이트는 다르게 작동합니다. 방법은 다음과 같습니다.

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

React에서 변수의 상태를 업데이트할 때 useState Hook을 사용합니다. 이 후크를 사용할 때 주의해야 할 세 가지 사항이 있습니다.

  • 변수 이름
  • 변수를 업데이트하는 함수
  • 변수의 초기 값/상태

이 예에서 x 는 변수의 이름이고 setX 는 x 의 값을 업데이트하는 함수이며 x 의 초기 값( 300 )은 useState 함수의 매개 변수로 전달됩니다.

 const [x, setX] = useState(300)

x 의 상태를 업데이트하기 위해 setX 함수를 사용했습니다.

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

따라서 updateX 함수는 x 의 값을 100 으로 설정하는 setX 함수를 호출합니다.

이것은 변수의 상태를 업데이트하는 데 완벽하게 작동하는 것처럼 보이지만 매우 큰 프로젝트에서 코드의 복잡성을 증가시킵니다. 상태 후크가 많으면 특히 프로젝트 규모가 커질 때 코드를 유지 관리하고 이해하기가 매우 어렵습니다.

State Hook 사용의 또 다른 문제는 생성된 이러한 변수가 앱을 구성하는 여러 구성 요소에서 공유되지 않는다는 것입니다. 한 변수에서 다른 변수로 데이터를 전달하려면 여전히 Props를 사용해야 합니다.

다행스럽게도 React에서 상태 관리를 효율적으로 처리하도록 빌드된 라이브러리가 있습니다. 변수를 한 번 생성하고 React 앱에서 원하는 곳 어디에서나 사용할 수도 있습니다. 이러한 라이브러리 중 일부에는 Redux, Recoil 및 Zusstand가 포함됩니다.

상태 관리를 위해 타사 라이브러리를 선택하는 문제는 React에서 이미 배운 것과는 다른 새로운 개념을 배워야 한다는 것입니다. 예를 들어 Redux는 상용구 코드가 많은 것으로 알려져 초보자가 이해하기 어려웠습니다(비록 Redux보다 적은 코드를 작성할 수 있는 Redux Toolkit으로 수정되었지만).

유지보수성 및 확장성

제품의 사용자 요구 사항이 계속해서 변경됨에 따라 제품을 구성하는 코드를 변경해야 할 필요성이 항상 있습니다.

팀에서 코드를 유지 관리하기 쉽지 않은 경우 코드를 확장하기 어려운 경우가 많습니다. 이와 같은 어려움은 코드를 작성할 때 잘못된 관행을 따르는 데서 발생합니다. 처음에는 완벽하게 작동하여 원하는 결과를 제공하는 것처럼 보일 수 있지만 "현재" 작동하는 모든 것은 프로젝트의 미래와 성장에 비효율적입니다.

다음 섹션에서는 React 코드를 작성하는 방법을 개선하는 데 도움이 될 수 있는 몇 가지 규칙을 살펴보겠습니다. 이것은 또한 전문 팀과 함께 작업할 때 더 잘 협업하는 데 도움이 됩니다.

반응 모범 사례

이 섹션에서는 React 코드를 작성할 때 따라야 할 몇 가지 모범 사례에 대해 설명합니다. 바로 다이빙합시다.

1. 명확한 폴더 구조 유지

폴더 구조는 귀하와 다른 개발자가 프로젝트에서 사용 중인 파일 및 자산의 배열을 이해하는 데 도움이 됩니다.

폴더 구조가 좋으면 쉽게 탐색할 수 있어 시간이 절약되고 혼동을 피할 수 있습니다. 폴더 구조는 각 팀의 선호도에 따라 다르지만 다음은 React에서 일반적으로 사용되는 몇 가지 폴더 구조입니다.

기능 또는 경로별로 폴더 그룹화

경로 및 기능에 따라 폴더의 파일을 그룹화하면 특정 기능에 대한 모든 것을 한 공간에 보관할 수 있습니다. 예를 들어 사용자 대시보드가 ​​있는 경우 대시보드와 관련된 JavaScript, CSS 및 테스트 파일을 하나의 폴더에 둘 수 있습니다.

다음은 이를 보여주는 예입니다.

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

위에서 볼 수 있듯이 앱의 각 핵심 기능에는 모든 파일과 자산이 동일한 폴더에 저장되어 있습니다.

유사한 파일 그룹화

또는 유사한 파일을 동일한 폴더에 그룹화할 수 있습니다. 후크, 구성 요소 등에 대한 개별 폴더를 가질 수도 있습니다. 이 예를 확인하십시오.

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

코딩할 때 이러한 폴더 구조를 엄격하게 따를 필요는 없습니다. 파일을 주문하는 특정한 방법이 있다면 그렇게 하십시오. 귀하와 다른 개발자가 파일 구조를 명확하게 이해하고 있다면 준비가 된 것입니다!

2. 구조화된 수입 주문 제도

React 애플리케이션이 계속 커짐에 따라 추가 가져오기를 수행해야 합니다. 가져오기의 구조는 구성 요소를 구성하는 요소를 이해하는 데 큰 도움이 됩니다.

일반적으로 유사한 유틸리티를 함께 그룹화하면 잘 작동하는 것 같습니다. 예를 들어 외부 또는 타사 가져오기를 로컬 가져오기와 별도로 그룹화할 수 있습니다.

다음 예를 살펴보십시오.

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

위의 코드에서 먼저 타사 라이브러리를 함께 그룹화했습니다(미리 설치해야 하는 라이브러리임).

그런 다음 스타일시트, 이미지 및 구성 요소와 같이 로컬에서 만든 파일을 가져왔습니다.

단순함과 쉬운 이해를 위해 우리의 예제는 매우 큰 코드베이스를 묘사하지 않지만 이 가져오기 형식과 일관성을 유지하면 귀하와 다른 개발자가 React 앱을 더 잘 이해하는 데 도움이 됩니다.

파일 유형에 따라 로컬 파일을 추가로 그룹화할 수 있습니다. 즉, 로컬 가져오기에서 개별적으로 구성 요소, 이미지, 스타일시트, 후크 등을 그룹화할 수 있습니다.

예를 들면 다음과 같습니다.

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. 명명 규칙 준수

명명 규칙은 코드 가독성을 높이는 데 도움이 됩니다. 이는 구성 요소 이름뿐만 아니라 변수 이름, Hooks에도 적용됩니다.

React 문서는 구성 요소 이름을 지정하는 공식 패턴을 제공하지 않습니다. 가장 많이 사용되는 명명 규칙은 camelCase 및 PascalCase입니다.

PascalCase는 주로 구성 요소 이름에 사용됩니다.

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

위 구성 요소의 이름은 StudentList 이며 Studentlist 또는 studentlist 보다 훨씬 읽기 쉽습니다.

반면에 camelCase 명명 규칙은 주로 변수, 후크, 함수, 배열 등의 이름을 지정하는 데 사용됩니다.

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. 린터 사용

린터 도구는 코드 품질을 개선하는 데 도움이 됩니다. JavaScript 및 React에 가장 많이 사용되는 린터 도구 중 하나는 ESlint입니다. 그러나 이것이 코드 품질 향상에 정확히 어떻게 도움이 될까요?

린터 도구는 코드 베이스의 일관성을 유지하는 데 도움이 됩니다. ESLint와 같은 도구를 사용할 때 프로젝트에서 작업하는 모든 개발자가 따르기를 원하는 규칙을 설정할 수 있습니다. 이러한 규칙에는 작은따옴표 대신 큰따옴표를 사용하기 위한 요구 사항, 화살표 함수 주위의 중괄호, 특정 명명 규칙 등이 포함될 수 있습니다.

이 도구는 코드를 관찰한 다음 규칙이 위반되면 알려줍니다. 규칙을 위반하는 키워드나 줄은 일반적으로 빨간색 밑줄이 그어집니다.

모든 개발자는 고유한 코딩 스타일을 가지고 있으므로 linter 도구는 코드 일관성을 유지하는 데 도움이 될 수 있습니다.

Linter 도구는 또한 버그를 쉽게 수정하는 데 도움이 될 수 있습니다. 철자 오류, 선언되었지만 사용되지 않은 변수 및 기타 기능을 볼 수 있습니다. 이러한 버그 중 일부는 코딩할 때 자동으로 수정될 수 있습니다.

ESLint와 같은 도구는 대부분의 코드 편집기에 내장되어 있으므로 이동 중에도 린터 기능을 사용할 수 있습니다. 코딩 요구 사항에 맞게 구성할 수도 있습니다.

5. 스니펫 라이브러리 사용

활발한 커뮤니티와 함께 ​​프레임워크를 사용하는 것에 대한 멋진 점은 개발을 더 쉽게 만들어주는 도구를 사용할 수 있다는 것입니다.

스니펫 라이브러리는 개발자가 자주 사용하는 미리 빌드된 코드를 제공하여 개발 속도를 높일 수 있습니다.

좋은 예는 ES7+ React/Redux/React-Native 스니펫 확장으로, 미리 빌드된 코드를 생성하는 데 유용한 명령이 많이 있습니다. 예를 들어 모든 코드를 입력하지 않고 React 기능 구성 요소를 생성하려는 경우 확장을 사용하여 해야 할 일은 rfce 입력하고 Enter 키를 누르는 것입니다.

위의 명령은 계속해서 파일 이름에 해당하는 이름을 가진 기능적 구성 요소를 생성합니다. ES7+ React/Redux/React-Native 스니펫 확장을 사용하여 아래 코드를 생성했습니다.

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

또 다른 유용한 스니펫 도구는 Tailwind CSS IntelliSense 확장으로, Tailwind CSS로 웹 페이지 스타일 지정 프로세스를 단순화합니다. 확장 기능은 유틸리티 클래스, 구문 강조 표시 및 보푸라기 기능을 제안하여 자동 완성에 도움이 될 수 있습니다. 코딩하는 동안 색상이 어떻게 보이는지 확인할 수도 있습니다.

6. CSS와 JavaScript 결합

대규모 프로젝트에서 작업할 때 각 구성 요소에 대해 서로 다른 스타일시트 파일을 사용하면 파일 구조가 부피가 커지고 탐색하기 어려울 수 있습니다.

이 문제에 대한 해결책은 CSS와 JSX 코드를 결합하는 것입니다. 이를 위해 Tailwind CSS 및 Emotion과 같은 프레임워크/라이브러리를 사용할 수 있습니다.

Tailwind CSS를 사용한 스타일 지정은 다음과 같습니다.

 <p className="font-bold mr-8">resource edge</p>

위의 코드는 단락 요소에 굵은 글꼴을 제공하고 오른쪽에 약간의 여백을 추가합니다. 프레임워크의 유틸리티 클래스를 사용하여 이를 수행할 수 있습니다.

Emotion을 사용하여 요소의 스타일을 지정하는 방법은 다음과 같습니다.

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. 컴포넌트 생성 제한

React의 핵심 기능 중 하나는 코드 재사용성입니다. 구성 요소를 생성하고 해당 논리를 다시 작성하지 않고 가능한 한 많이 해당 논리를 재사용할 수 있습니다.

가동 중지 시간 및 WordPress 문제로 어려움을 겪고 있습니까? Kinsta는 시간을 절약하도록 설계된 호스팅 솔루션입니다! 우리의 기능을 확인하십시오

이를 염두에 두고 생성하는 구성 요소의 수를 항상 제한해야 합니다. 그렇게 하지 않으면 애초에 존재해서는 안 되는 불필요한 파일로 파일 구조가 부풀어 오릅니다.

이를 설명하기 위해 매우 쉬운 예를 사용하겠습니다.

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

위의 구성 요소는 사용자의 이름을 보여줍니다. 모든 사용자에 대해 서로 다른 파일을 만들면 결국 비합리적인 파일 수를 가지게 됩니다. (물론 우리는 일을 단순하게 유지하기 위해 사용자 정보를 사용하고 있습니다. 실제 상황에서는 다른 유형의 논리를 다룰 수 있습니다.)

컴포넌트를 재사용 가능하게 만들기 위해 Props를 사용할 수 있습니다. 방법은 다음과 같습니다.

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

그런 다음 이 구성 요소를 가져와서 원하는 만큼 사용할 수 있습니다.

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

이제 각 사용자에 대해 3개의 별도 파일을 갖는 대신 하나의 파일에서 생성된 논리에서 오는 UserInfo 구성 요소의 3개의 다른 인스턴스가 있습니다.

8. 지연 로딩 구현

지연 로딩은 React 앱이 커짐에 따라 매우 유용합니다. 코드베이스가 크면 웹 페이지 로드 시간이 느려집니다. 모든 사용자에 대해 매번 전체 앱을 로드해야 하기 때문입니다.

"게으른 로딩"은 다양한 구현에 사용되는 용어입니다. 여기서는 JavaScript 및 React와 연결하지만 이미지 및 비디오에 지연 로딩을 구현할 수도 있습니다.

기본적으로 React는 전체 애플리케이션을 번들로 묶고 배포합니다. 그러나 코드 분할이라고도 하는 지연 로딩을 사용하여 이 동작을 변경할 수 있습니다.

기본적으로 특정 지점에서 로드되는 앱의 섹션을 제한할 수 있습니다. 이는 번들을 분할하고 사용자 요구 사항과 관련된 번들만 로드하여 수행됩니다. 예를 들어 먼저 사용자가 로그인하는 데 필요한 논리만 로드한 다음 성공적으로 로그인한 후에만 사용자의 대시보드에 대한 논리를 로드할 수 있습니다.

9. 재사용 가능한 후크 사용

React의 Hooks를 사용하면 구성 요소의 상태와 상호 작용하고 구성 요소의 특정 상태 변경과 관련하여 사후 효과를 실행하는 것과 같은 React의 추가 기능 중 일부를 활용할 수 있습니다. 클래스 구성 요소를 작성하지 않고도 이 모든 작업을 수행할 수 있습니다.

또한 Hooks를 재사용 가능하게 만들 수 있으므로 사용되는 모든 파일에서 논리를 다시 입력할 필요가 없습니다. 우리는 앱의 어느 곳에서나 가져올 수 있는 사용자 지정 후크를 생성하여 이를 수행합니다.

아래 예에서는 외부 API에서 데이터를 가져오기 위한 후크를 생성합니다.

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

위의 API에서 데이터를 가져오기 위한 후크를 만들었습니다. 이제 모든 구성 요소로 가져올 수 있습니다. 이렇게 하면 외부 데이터를 가져와야 하는 모든 구성 요소에서 모든 논리를 입력해야 하는 스트레스를 덜 수 있습니다.

React에서 생성할 수 있는 사용자 지정 Hook의 유형은 무한하므로 사용 방법을 결정하는 것은 사용자의 몫입니다. 다른 구성 요소에서 반복되어야 하는 기능인 경우 반드시 재사용 가능하게 만들어야 한다는 점을 기억하십시오.

10. 오류 기록 및 관리

오류 경계, try 및 catch 블록 사용 또는 react-error-boundary 같은 외부 라이브러리 사용과 같이 React에서 오류를 처리하는 다양한 방법이 있습니다.

React 16에 도입된 기본 제공 오류 경계는 클래스 구성 요소에 대한 기능이므로 클래스 구성 요소 대신 기능적 구성 요소를 사용하는 것이 좋기 때문에 논의하지 않습니다.

반면에 try 및 catch 블록을 사용하는 것은 선언적 코드가 아닌 명령형 코드에서만 작동합니다. 이는 JSX로 작업할 때 좋은 옵션이 아님을 의미합니다.

가장 좋은 권장 사항은 react-error-boundary와 같은 라이브러리를 사용하는 것입니다. 이 라이브러리는 React 앱이 렌더링되는 동안 오류를 감지하는 데 도움이 되는 구성 요소를 래핑할 수 있는 기능을 제공합니다.

11. 코드 모니터링 및 테스트

개발 중에 코드를 테스트하면 유지 관리 가능한 코드를 작성하는 데 도움이 됩니다. 불행히도 이것은 많은 개발자들이 간과하는 것입니다.

많은 사람들이 웹 앱을 구축할 때 테스트가 큰 문제가 아니라고 주장할 수 있지만 수많은 이점이 있습니다. 다음은 몇 가지 예입니다.

  • 테스트는 오류와 버그를 감지하는 데 도움이 됩니다.
  • 버그를 감지하면 코드 품질이 향상됩니다.
  • 데이터 수집 및 향후 참조를 위해 단위 테스트를 문서화할 수 있습니다.
  • 버그를 조기에 감지하면 버그를 확인하지 않고 방치할 경우 발생할 수 있는 화재를 진압하기 위해 개발자에게 지불하는 비용을 절약할 수 있습니다.
  • 버그가 없는 앱과 사이트는 청중으로부터 신뢰와 충성도를 얻어 더 큰 성장으로 이어집니다.

Jest 또는 React Testing Library와 같은 도구를 사용하여 코드를 테스트할 수 있습니다. 선택할 수 있는 많은 테스트 도구가 있습니다. 모두 귀하에게 가장 적합한 도구로 귀결됩니다.

브라우저에서 앱을 실행하여 React 앱을 빌드하면서 테스트할 수도 있습니다. 일반적으로 감지된 오류가 화면에 표시됩니다. 이는 로컬 시스템에서 WordPress 사이트를 설계, 개발 및 배포할 수 있는 도구인 DevKinsta를 사용하여 WordPress 사이트를 개발하는 것과 유사합니다.

12. 기능적 구성요소 활용

React에서 기능적 구성 요소를 사용하면 많은 이점이 있습니다. 코드를 덜 작성하고 읽기가 더 쉽고 공식 React 문서의 베타 버전이 기능적 구성 요소(Hooks)를 사용하여 다시 작성되므로 사용에 확실히 익숙해져야 합니다. .

기능적 구성 요소를 사용하면 this 또는 클래스 사용에 대해 걱정할 필요가 없습니다. 또한 Hook 덕분에 코드를 적게 작성하여 구성 요소의 상태를 쉽게 관리할 수 있습니다.

React에서 찾을 수 있는 대부분의 업데이트된 리소스는 기능적 구성 요소를 사용하므로 문제가 발생할 때 커뮤니티에서 만든 유용한 가이드와 리소스를 쉽게 이해하고 따를 수 있습니다.

13. React 버전 변경으로 최신 상태 유지

시간이 지남에 따라 새로운 기능이 도입되고 일부 이전 기능이 수정됩니다. 이것을 추적하는 가장 좋은 방법은 공식 문서를 보는 것입니다.

또한 소셜 미디어에서 React 커뮤니티에 가입하여 변경 사항에 대한 정보를 얻을 수 있습니다.

React의 현재 버전을 최신 상태로 유지하면 최상의 성능을 위해 코드 베이스를 최적화하거나 변경할 시기를 결정하는 데 도움이 됩니다.

React에서 라우팅에 사용되는 React Router와 같이 최신 상태로 유지되어야 하는 React 주변에 구축된 외부 라이브러리도 있습니다. 이러한 라이브러리가 어떤 변경을 수행하는지 알면 앱에 관련된 중요한 변경을 수행하고 프로젝트에서 작업하는 모든 사람이 작업을 더 쉽게 수행하는 데 도움이 될 수 있습니다.

또한 일부 기능은 더 이상 사용되지 않을 수 있으며 새 버전이 출시되면 특정 키워드가 변경될 수 있습니다. 안전을 위해 그러한 변경이 있을 때 항상 설명서와 가이드를 읽어야 합니다.

14. 빠르고 안전한 호스팅 공급자 사용

웹 앱을 빌드한 후 모든 사람이 액세스할 수 있도록 하려면 웹 앱을 호스팅해야 합니다. 빠르고 안전한 호스팅 제공업체를 이용하는 것이 중요합니다.

웹사이트를 호스팅하면 웹사이트를 쉽게 확장하고 관리할 수 있는 다양한 도구에 액세스할 수 있습니다. 웹 사이트가 호스팅되는 서버는 로컬 시스템의 파일을 서버에 안전하게 저장할 수 있도록 합니다. 웹사이트 호스팅의 전반적인 이점은 다른 사람들이 귀하가 만든 멋진 콘텐츠를 볼 수 있다는 것입니다.

Firebase, Vercel, Netlify, GitHub Pages와 같은 무료 호스팅 서비스 또는 Azure, AWS, GoDaddy, Bluehost 등과 같은 유료 서비스를 개발자에게 제공하는 다양한 플랫폼이 있습니다.

Kinsta의 애플리케이션 호스팅 플랫폼을 사용할 수도 있습니다. GitHub 리포지토리를 연결하고 전 세계에 배치된 Kinsta의 25개 데이터 센터에서 선택하고 이동하기만 하면 됩니다. 빠른 설정, 연중무휴 지원, 최고급 보안, 사용자 지정 도메인, 고급 보고 및 모니터링 도구 등에 대한 액세스 권한을 받게 됩니다.

요약

React 사용법을 배우는 것이 뛰어난 웹 앱을 만드는 데 필요한 전부는 아닙니다. Angular, Vue 등과 같은 다른 프레임워크와 마찬가지로 효율적인 제품을 구축하는 데 도움이 되는 모범 사례가 있습니다.

이러한 React 규칙을 따르는 것은 앱에 도움이 될 뿐만 아니라 프런트엔드 개발자로서 이점도 있습니다. 효율적이고 확장 가능하며 유지 관리 가능한 코드를 작성하는 방법을 배우고 해당 분야의 전문가로 두각을 나타내십시오. React 코딩 게임을 강화하고 싶습니까? 알아야 할 모든 것이 이 가이드에 있습니다. 트윗하려면 클릭하세요.

따라서 React로 다음 웹 앱을 구축할 때 사용자와 개발자 모두가 제품을 쉽게 사용하고 관리할 수 있도록 다음 모범 사례를 염두에 두십시오.

이 기사에서 언급되지 않은 다른 React 모범 사례는 무엇입니까? 아래 의견에 공유하십시오. 즐거운 코딩하세요!