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를 사용하려면 먼저 React를 설치해야 합니다. 운 좋게도 npm과 Browserify 덕분에 간단한 프로세스입니다. 노드 또는 다른 서버 측 환경을 사용 중이신가요? 이를 위해 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를 변경하십시오. babel을 사용하려면 파일 상단에; 또한 npm install –save babel-CLI babel-preset-es2015 babel-preset-react를 통해 Babel을 설치해야 합니다. 그러면 Babel이 새 JSX 구문을 컴파일하게 됩니다.

샘플 앱으로 빌드 시작

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

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

컴포넌트를 사용한 기본 예제

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

당신은 좋아할 수 있습니다: Facebook JavaScript 엔진(Hermes)은 Android에서 React Native를 향상시킵니다.

JSX 구문 소개

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

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

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

정적 vs 동적 vs PureComponent

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

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

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

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

구성 요소의 상태 처리

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

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

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

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

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

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

결론

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

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

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