React는 무엇이고 어떻게 작동하나요?

React는 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리입니다. 이제 두 가지가 중요합니다. 하나는 Javascript 라이브러리이고 다른 하나는 사용자 인터페이스입니다. 라이브러리는 애플리케이션을 만들기 위해 재사용할 수 있는 코드 모음입니다. React와 일부 코드 모음을 사용하여 웹 애플리케이션, 모바일, 데스크톱 애플리케이션 및 사용자 인터페이스를 만들 수 있습니다.

애플리케이션에 관해 이야기할 때마다 기본적으로 두 부분으로 구성됩니다. 하나는 프런트엔드(예: 사용자 인터페이스)이고 다른 하나는 모든 로직이 상주하는 백엔드입니다.
프런트엔드는 탐색, 버튼 클릭, 양식 제출 등과 같이 사용자가 상호 작용하는 부분입니다. 그러면 프론트엔드가 백엔드로 이에 응답합니다.
그리고 백엔드에는 인증, 승인, 데이터 조작 등 복잡한 로직과 데이터가 많이 포함되어 있습니다.
그러나 React는 백엔드에 전혀 관심이 없습니다. React는 사용자 인터페이스에서만 작동합니다.

이제 웹에 관해 이야기하면 Javascript가 브라우저의 기본 프로그래밍 언어라는 것을 알 수 있습니다. 하지만 React는 프로그래밍 언어가 아니며 단지 Javascript 라이브러리일 뿐입니다.
즉, React에서 우리가 하는 모든 일은 궁극적으로 순수한 바닐라 자바스크립트에 지나지 않습니다.

그럼 질문 하나 드리겠습니다. React가 2013년에 나왔으니 그 전에는 UI를 만들지 않았나요?
예, 이전에 순수 Javascript와 jQuery를 사용하여 이 작업을 수행한 적이 있습니다.
이제 질문은 왜 React가 다시 왔는가 하는 것입니다. Javascript의 문제점은 무엇입니까?
React가 실제로 어떤 문제를 해결하게 되는지 이해하려면 조금 더 깊이 파고들어볼 필요가 있습니다. 본격적으로 살펴보자...!

작은 신청으로 살펴보겠습니다. 아래에서 볼 수 있듯이 counterNumber 및 버튼이라는 두 개의 ID가 있는 간단한 HTML 코드로 작은 카운터 애플리케이션을 생성하겠습니다.

이제 JavaScript 코드 이미지를 살펴보면 간단한 코드가 있습니다. 나는 이 코드를 여러분에게 설명할 생각이 없습니다. 무슨 말인지 잘 들어보세요.

counterNumber 및 버튼이 DOM 요소로 선택된 다음 addEventListener를 사용하여 count 값이 1씩 증가합니다. 그런 다음 counterNumberEl 값이 거기에서 업데이트됩니다. 여기서 실제로 무슨 일이 일어나고 있는 걸까요? 주의 깊게 살펴보면 기본적으로 두 가지 기능이 있음을 알 수 있습니다.

1. Elements를 잡고 작업하는 것이 우리가 원하는 일입니다.
2. UI(사용자 인터페이스) 업데이트

그렇다면 여기서 문제는 무엇입니까? 코드가 작동 중입니다! 그러나 두 개의 카운터 애플리케이션이 필요하다고 가정해 보겠습니다. 그러면 어떻게 해야 할까요?

해당 HTML로 돌아가서 새 div를 가져와서 새 ID와 별도로 가져와야 합니다. 그럼 나중에 UI를 업데이트해야겠네요.

지금은 두 개의 카운터 애플리케이션에 대해서만 이야기하고 있지만 상호 작용이 너무 많고 UI가 복잡하면 개발자가 압도당하게 됩니다. 이것이 주요 문제입니다! 한편으로는 기능을 만들고 다른 한편으로는 UI를 업데이트하는 일이 매우 고통스럽습니다.

Facebook과 같은 회사가 이 큰 문제에 직면했을 때 Facebook 소프트웨어 엔지니어인 Jordan Walke는 2011년 PHP의 구성 요소 기반 프레임워크 XHP-js에서 영감을 받아 React.js를 만들었습니다. 2011년 페이스북 뉴스피드에 처음 구현됐고, 2012년 인스타그램에도 사용됐다. 2013년 오픈소스 React.js.

이제 우리가 React를 사용하는 이유를 알았습니다. 이제 바닐라 JS로 했던 카운터 애플리케이션을 이제 React를 사용해 봅시다. 그러면 React 이후 개발자의 삶이 얼마나 쉬워졌는지에 대한 자신감이 커질 것입니다. 코드로 가보자…

우선 편의를 위해 React를 설치하는 방법을 알려드리겠지만, 우리 프로젝트에서는 누구도 이런 방식으로 React를 사용하지 않습니다. 핵심적인 부분부터 이해하실 수 있도록 이해의 편의를 위해 이렇게만 보여드립니다.

여기서는 React.org 사이트에서 말하는 대로 이 링크로 React를 연결했습니다. 이제 React.js 파일로 이동하여 console.log(React) 및 console.log(ReactDOM)을 작성하면 콘솔에 2개의 객체가 표시됩니다. 이는 React가 연결되었음을 의미합니다. 참고로 body 태그 안에는 빈 div만 있고 root라는 ID만 있습니다.

JavaScript에서는 처음 선택기를 사용했을 때와 동일한 방식으로 DOM에 요소를 생성할 수 있습니다. 마찬가지로 React에서도 요소를 만들 수 있습니다. 여기에 div가 생성되고 그 안에 p 태그와 함께 Hello World가 인쇄됩니다. 지금은 이것이 문제가 되지 않는 것 같지만, 요소를 너무 많이 만들면 인생이 끝나게 됩니다! 같은 일을 계속 반복하는 것은 문제입니다. 이것이 바로 React가 JSX(JavaScript XML)라는 자체 마크업을 만든 이유입니다. HTML처럼 보이지만 실제로는 JSX입니다.

위 이미지에는 이렇게 적혀있습니다. 하지만 문제는 브라우저가 이 JSX를 이해하지 못한다는 것입니다. 따라서 이 문제를 해결하기 위해 JSX를 브라우저가 이해할 수 있는 바닐라 JS로 트랜스파일하는 트랜스파일러 Babel이 있습니다.

Babel을 연결하려면 당사 웹사이트를 방문하세요> 설정 > 우리가 만든 HTML 및 js 파일의 body 태그 아래에 이 링크를 복사하세요. =”text/babel”이 있습니다.

이제 JSX이므로 여기에 원하는 JavaScript를 작성할 수 있습니다. 따라서 이 구문을 단순화해 보겠습니다. 먼저 JS 함수에 넣어보겠습니다.

참고로 myElement 용기는 그냥 Increment라는 함수를 넣었는데 이렇게 Increment 함수를 만들면 React에서 작성하기가 더 쉬워집니다. 이제 여기에 JS를 작성할 수 있습니다. 여기서 이전 JS 코드로 작업했다면 제대로 작동했을 것입니다. 하지만 React에서는 저처럼 상태를 관리하고 싶다면 UI 업데이트에 대해 생각할 필요가 없다고 말합니다. 그래서 React에서는 useState라는 함수를 제공하는데, 어떻게 사용하는지 보여드리겠습니다.

이 useState는 증가 버튼의 상태 역할을 합니다. UseState의 기본값은 상태의 기본값을 표시하는 값입니다. 이 경우 0을 제공해야 합니다. useState 함수는 기본적으로 2가지 항목을 포함하는 배열을 반환합니다. 하나는 우리가 제공하는 값이고 다른 하나는 상태 값을 업데이트하는 함수입니다. 이제 배열을 구조 분해하여 분리했습니다.

이제 counter를 초기 값으로 사용하려면 return 후에 0 대신 이와 같이 {counter}를 제공할 수 있습니다. 이것을 보간이라고 합니다. 이제 카운터 값이 동적으로 변경됩니다. 그리고 onClick 버튼에는 (JSX이므로 onClick처럼 카멜케이스를 따라 작성해야 합니다) 기능을 호출해야 합니다.

이렇게 주면 끝인데 여기서 문제가 발생합니다. 이와 같이 setCounter 함수를 호출하면 이미 호출되므로 원하지 않습니다. 우리는 누군가가 버튼을 클릭할 때 버튼의 값이 증가하길 원합니다. 그래서 익명의 화살표 기능을 만들어야 문제가 해결될 것입니다.

여기서 DOM의 요소를 가져와 수동으로 UI를 업데이트하지 않았다는 점을 보면 여기서는 React에 우리가 원하는 것을 전달했을 뿐이고 나머지 React는 UI 자체를 업데이트했습니다.

이제 JS 예를 들었을 때 JS에서 겪었던 가장 큰 문제는 UI를 수동으로 업데이트해야 한다는 것이었습니다. 애플리케이션을 다시 사용하려면 동일한 작업을 계속 반복해야 합니다.

하지만 React는 이 두 가지 문제를 모두 해결합니다. UI를 수동으로 업데이트하지 않고도 React가 어떻게 작동하는지 살펴보았습니다. 이제 이 애플리케이션을 2~3곳에서 사용해야 하는 경우 React가 어떻게 도움이 되는지 살펴보겠습니다.

여기 보세요. 저는 그냥 <> 여기서는 증가 함수를 2번 호출하면 작업이 완료됩니다. 이제 가장 흥미로운 점은 2개의 애플리케이션을 별도로 실행할 수 있다는 점입니다. 이는 두 애플리케이션이 상태를 별도로 관리한다는 의미입니다. 원하신다면 전체 웹사이트 어디에서나 사용할 수 있다는 점을 이해하시겠지만, 역시 장소마다 다르며, 이는 하나가 다른 것과 관련이 없다는 것을 의미합니다. 이것이 Reactjs의 힘입니다.

기본적으로 React에 어떤 기능을 추가할지 알려주면 React가 그에 따라 자동으로 UI를 업데이트합니다. 이것이 ReactJS의 장점입니다

그렇다면 React에 대해 무엇을 말하는 걸까요? 우리는 왜 React를 사용하는가? 이제 나는 React가 어떤 문제를 해결하려고 왔는지 완전히 이해했습니다. 더 이상 그러한 질문으로 인해 인터뷰 게시판에 들어갈 수 없게 됩니다. 형제님, 그런 인내심을 갖고 끝까지 읽는다는 것은 쉬운 일이 아닙니다. 해냈습니다. 행운을 빕니다.

즐거운 코딩하세요!

위 내용은 React는 무엇이고 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!