React: ReactJS 사용을 위한 완전한 초보자 가이드

ReactJS에 대해 들어봤지만 어디서부터 시작해야 할지 모르겠나요? ReactJS를 가지고 놀기 시작했지만 매일 사용하는 방법을 잘 모르시겠습니까? 이 기사는 오늘날 개발자들이 가장 많이 사용하는 라이브러리인 React JavaScript 라이브러리를 학습하고 마스터하는 데 도움이 되는 가이드가 될 것입니다. ReactJS를 시작하는 방법과 이를 작업 흐름에 통합하여 다른 프레임워크나 라이브러리를 통해 불필요한 우회를 하지 않고도 보다 동적인 사용자 인터페이스를 만들 수 있는 방법을 정확하게 보여드리겠습니다. 시작하자!

ReactJS란?

React는 재사용 가능한 구성 요소를 빌드하도록 권장하는 프런트 엔드 개발 라이브러리입니다. 사용자 인터페이스를 만드는 효율적인 방법을 찾고 있다면 React가 바로 필요한 것일 수 있습니다. Vanilla JavaScript 또는 jQuery를 사용하여 사용자 인터페이스를 만들 때 코드가 매우 복잡해지고 다루기 어려워질 수 있습니다. React와 선호하는 구성 요소 기반 개발 방법을 사용하면 코드를 훨씬 쉽게 재사용하고 유지 관리할 수 있습니다.

실제로 몇 가지 구성 요소를 빌드하면 팀의 다른 개발자가 React에 대한 경험(또는 지식)이 전혀 없이도 비교적 쉽게 코드에 참여하고 기여할 수 있습니다!

추천: React Native 앱의 성능을 최적화하기 위한 5가지 유용한 팁.

ReactJS를 사용하는 이유는 무엇입니까?

우선, JavaScript 프레임워크와 관련하여 선택의 여지가 있습니다. 그렇다면 왜 React를 선택하겠습니까? 우선 개발자가 최종 사용자가 이해하고 참여하기 쉬운 대규모 앱을 만들도록 돕는 경우입니다.

지금까지 jQuery 또는 Vanilla JavaScript로만 작업한 개발자에게는 새로운 기술을 사용하는 방법을 배우는 것이 어려울 수 있습니다. 경우에 따라 개발자는 간단한 모달 상자 또는 탐색 모음을 만들기 위해 수백 줄의 코드가 필요할 수 있습니다. React는 상태가 변경될 때마다 실제 DOM 요소를 작성하고 다시 작성하는 대신 가상 DOM을 사용하기 때문에(Angular에서 자주 수행되는 것처럼) React를 사용하면 더 적은 코드 라인을 허용하고 애플리케이션을 이전보다 더 빠르게 만들어 귀중한 시간을 절약할 수 있습니다. 전에.

브라우저에 설치하기

브라우저에서 React를 사용하려면 먼저 설치해야 합니다. 운 좋게도 npm과 Browserify 덕분에 간단한 프로세스입니다. Node 또는 다른 서버 측 환경을 사용하십니까? 이를 위해 npm 및 Browserify도 사용할 수 있습니다. 모든 것이 설치되면 즐겨 사용하는 텍스트 편집기로 HTML 파일을 만듭니다. 그렇지 않으면 이러한 모든 것이 이미 설정된 기본 시작 프로젝트를 생성하는 Create-React-App과 같은 상용구 생성기를 사용하십시오.

ReactJS를 사용하도록 App.js 변환

모든 코드는 현재 App.js라는 단일 파일에 있습니다. 그러나 테스트하기가 어렵습니다. 따라서 여러 파일로 나누어 보겠습니다. ES6에서 작성된 구성 요소 하나를 JSX에서 작성되도록 변환하는 것으로 시작하겠습니다. 모든 React 구성 요소를 단일 디렉터리에 보관하는 것이 가장 쉽습니다(그렇게 해야 합니다). 따라서 빈 src/components 디렉토리를 만들고 App.js를 mv app/App.js src/components/app-react.js로 이동해 보겠습니다. 그런 다음 이름을 app-react.js로 바꿉니다.

ES6 대신 React를 사용하려면 use strict를 변경하십시오. 바벨을 사용하려면 파일 상단에; 또한 npm install –save babel-CLI babel-preset-es2015 babel-preset-react를 통해 Babel을 설치해야 합니다. 그러면 Babel이 새 JSX 구문을 컴파일하게 됩니다.

샘플 앱으로 구축 시작

React를 시작하는 방법은 많이 있지만 우리가 가장 좋아하는 것 중 하나는 간단한 To-Do List 앱을 구축하는 것입니다. 빠르게 움직이고 많은 일반적인 실수를 피하기 위해 우리는 백엔드 코드와 프런트엔드 구성 요소를 교체하기만 하면 되는 샘플 애플리케이션을 구축했습니다. 이미지를 포함하여 필요한 모든 기능을 갖추고 있어 제대로 작동하는지 확인할 수 있습니다.

자신을 코딩하고 싶지 않습니까? 괜찮아요! 다음의 간단한 단계에 따라 모든 구성 요소를 실제로 복사할 수 있습니다. 프로젝트에 복사한 후 목적에 맞게 수정하기만 하면 됩니다! 선택은 당신 것입니다! 여기에서 세 가지 시작하기 옵션을 모두 확인하십시오.

구성 요소를 사용하는 기본 예

웹 애플리케이션을 보면 가장 먼저 눈에 띄는 것 중 하나는 각 요소가 분리되어 있다는 것입니다. 일반적인 페이지에는 다양한 머리글, 바닥글, 로고 및 버튼이 있습니다. 그러나 React.js로 작업할 때 페이지의 각 구성 요소에 대해 여러 HTML 요소를 사용하는 대신 단일 HTML 요소를 사용하여 모든 요소를 ​​나타낼 수 있습니다. 이는 직관에 반하는 것처럼 들릴 수 있습니다. 결국, 그것은 우리가 몇 년 동안 해온 일이 아닙니까?

Facebook JavaScript Engine(Hermes)은 Android에서 React Native를 향상 시킵니다 .

JSX 구문 소개

JSX는 JavaScript나 TypeScript와 같은 프로그래밍 언어가 아니라 JavaScript의 확장으로 설계된 구문입니다. 그렇기 때문에 새로운 개발자가 작동 방식과 사용할 수 있는 위치를 이해하는 것이 중요합니다. JSX 코드는 HTML과 매우 유사한 방식으로 작성되므로 JSX 코드는 두 언어를 동시에 배우는 신규 개발자에게 훌륭한 첫 단계입니다. JSX를 독특하게 만드는 요소와 쉽게 마스터하는 방법에 대한 자세한 내용은 전체 ReactJS 튜토리얼을 읽어보세요!

첫 번째 React 프로젝트 빌드를 시작하려면 터미널에 mkdir react_tutorial을 입력하여 새 디렉토리를 만듭니다. 실행이 완료되면 cd react_tutorial을 입력하여 새로 생성된 디렉토리로 이동합니다. 그런 다음 터미널을 열고 node -v를 입력하여 Node.js를 시작합니다.

Node가 성공적으로 설치된 경우 Node 옆에 v10.x가 나열되어야 합니다. 그렇지 않은 경우 macOS 또는 Linux를 사용하는 경우 nvm install 10을 사용해 보십시오. 그래도 작동하지 않는다면 Google에서 무엇이 잘못되었는지 파악하는 데 도움을 줄 수 있어야 합니다. Node가 버전 10 이상으로 제대로 설치되면 처음부터 프로젝트를 생성할 준비가 된 것입니다!

정적 vs 동적 vs PureComponent

최신 JavaScript를 사용하여 웹 앱을 빌드할 때 UI 구성요소를 생성하기 위한 세 가지 주요 옵션이 있습니다. 여기에는 정적 HTML(react-markup), 동적 AJAX 요청(react-data) 및 기존 DOM 요소 재사용(react-pure)이 포함됩니다. 각 방법에는 고유한 장점이 있으며 특정 사용 사례에 따라 다르게 적용될 수 있습니다.

예를 들어 특정 요소를 항상 사용할 수 있다는 것을 알고 있으면 정적 HTML 태그에 배치할 수 있습니다. 그러나 아직 존재하지 않을 수 있는 데이터베이스에서 콘텐츠를 가져와야 하는 경우 react-data를 사용하는 것이 더 나은 선택입니다. 프로젝트에 가장 적합한 구성 요소 생성 방법을 결정할 때 앱의 각 부분이 얼마나 안정적이고 영구적인지 생각하는 것이 중요합니다.

ReactJS 구성 요소의 수명 주기 메서드

수명 주기의 여러 부분을 제어하기 위해 구성 요소 내에서 사용할 수 있는 몇 가지 수명 주기 메서드가 있습니다. componentWillMount() 메서드는 컴포넌트가 처음으로 렌더링되기 직전에 호출됩니다. 그 안에 localStorage를 사용하여 정보를 저장하는 것과 같이 구성 요소에 필요한 초기화를 추가할 수 있습니다. componentDidMount() 메서드는 구성 요소가 마운트되고 렌더링된 직후에도 호출됩니다. 여기에서 구성 요소가 완전히 초기화된 후 실행되어야 하는 코드를 추가할 수 있습니다(예: 새 네트워크 요청 생성).

구성 요소의 상태 처리

Reacts가 상태 관리에 접근하는 방식은 다소 독특합니다. 이유를 이해하려면 먼저 대부분의 프레임워크가 상태를 처리하는 방법을 고려해야 합니다.

전통적으로 개발자는 구성 요소의 상태가 자체에 저장되어 있다고 생각합니다. 이로 인해 많은 문제가 발생합니다. 한 구성 요소가 다른 구성 요소의 상태를 업데이트하려면 그렇게 하기 위해 다른 구성 요소에 대한 참조(props)가 필요합니다. 그리고 상태 개체 또는 배열이 구성 요소 간에 동기화된 상태를 유지하려면 모든 구성 요소가 액세스할 수 있는 일종의 중앙 집중식 데이터 저장소 또는 이벤트 방출기가 필요합니다.

2~3개의 다른 상태만 있는 작은 앱의 구성 요소에 대해서는 충분히 간단할 수 있지만 앱에 수십 개의 다른 상태가 있으면 어떻게 될까요? 그것들을 모두 어떻게 관리합니까?

상위 구성 요소에서 하위 구성 요소로 데이터 전달

부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 방법에는 소품 또는 상태를 통해 두 가지가 있습니다. 소품을 통해 데이터를 전달하는 것은 배열에 있는 항목 수를 정의하는 것과 같이 구성 요소에 대한 변수를 정의하는 데 유용할 수 있습니다. 반면에 상태를 통해 데이터를 전달하는 것은 큰 개체(응용 프로그램 속도를 잠재적으로 저하시킬 수 있음)를 전달하거나 자식 구성 요소 내에서 호출하려는 함수를 정의하려는 경우에 유용할 수 있습니다. 두 접근 방식을 살펴보고 코드에서 언제 사용하는 것이 적절한지 살펴보겠습니다.

당신은 또한 좋아할 수 있습니다 : Headless WordPress에서 React JS가 제공하는 개선 사항은 무엇입니까?

결론

ReactJS 개발자를 고용할 때 5년 이상 JavaScript, CSS, HTML 및 Node.js 작업 경험이 있는 프리랜서를 선택해야 합니다. 개발자가 샘플 프로젝트를 제공하고 특정 요구 사항과 관련된 프로젝트를 설계하여 전문성을 입증할 수 있는 것이 중요합니다. 이것은 그들이 귀하의 비즈니스 목표와 목표를 쉽게 이해하는 데 도움이 될 것입니다.

모든 전문가는 작업을 시작하기 전에 항상 질문을 시작합니다. 따라서 리액트 프레임워크를 사용하여 웹사이트를 구축할 때 적절한 시기에 질문을 던질 수 있는 전문가를 고용하는 것은 필수입니다. ReactJS 개발자의 평균 고용 비용은 시간당 $40-$100 사이입니다. 그러나 전문가들은 평소보다 더 높은 비용을 청구합니다. 따라서 ReactJS 개발 프레임워크를 사용하여 웹사이트를 설정하기 위한 예산을 세울 때 이 점을 염두에 두십시오.

 이 기사는 Tagline Infotech LLP의 Rahul Kalsariya가 작성했습니다.