react.js와 Ajax의 차이점
React.js에 대해 검색해보니 React.js는 사용자 인터페이스 작성에 사용되는 프레임워크입니다.웹사이트의 특정 부분이 자주 업데이트되면 리액션을 사용할 수 있습니다.하지만 나는 Ajax가 이것에만 사용되었다는 것이 혼란스럽다.페이지 리프레시 없이 Ajax를 사용하여 사이트 일부를 업데이트할 수 있습니다.템플릿 제작에는 핸들바와 콧수염을 사용합니다.Ajax와 어떤 식으로 반응하는지, 왜 우리가 그것을 사용해야 하는지 설명해 줄 수 있나요?
즉, React는 AJAX를 사용합니다.그들은 당신이 묻는 방식에서 관련이 없어요.
React가 무엇인지, AJAX가 무엇인지, 최신 웹 애플리케이션을 만드는 데 어떻게 사용되는지에 대한 크래시 코스를 계속 읽어 보십시오.
이것은 아마 당신이 찾는 것보다 더 간단한 설명일 것입니다. 하지만 혼란스러워하는 다른 사람들을 위해...
AJAX 및 비행기
비행기를 생각해 보세요.비행기의 가장 중요한 부분은 비행한다는 것이다.하지만 비행기에는 바퀴도 있다.바퀴는 매우 중요한 역할을 합니다. 왜냐하면 바퀴가 없으면 비행기는 날지도 착륙하지도 않을 테고, 비행기가 공중에서 할 수 있는 모든 놀라운 일에도 불구하고 바퀴가 없어도 상관없기 때문입니다.
이는 React와 AJAX의 관계와 동일합니다.리액트는 비행기이고 AJAX는 바퀴입니다.하지만 다른 것들도 바퀴가 달려있어요트랙터, 자동차, 심지어 일부 보트에도 바퀴가 달려있고, 그것들은 모두 매우 중요하며 바퀴가 없으면 장애를 일으킵니다.AJAX는 다른 웹 테크놀로지에서도 마찬가지입니다만, 비행기라고 하면 바퀴가 생각에서 가장 멀어져 버립니다.
즉, 리액트는 AJAX에게, 비행기는 Wheels와 같습니다.
AJAX에 대해서 얘기해보죠.그것은 무엇일까요?그게 왜 그렇게 중요하죠?오늘날 웹사이트에서 어떻게 사용되는지.그럼 리액트가 어떻게 사용하는지 보여드릴게요.그리고 React가 하는 일이 매우 인상적이어서 AJAX에 대해 잊게 한다 - 마치 비행기처럼 바퀴에 매달리는 것.
90년대 웹사이트를 기억하십니까?
아무 것도 클릭하지 않은 경우에도 클릭 효과를 표시하려면 새 페이지를 로드해야 합니다.여기 멋진 예가 있습니다.해당 페이지로 이동하여 주위를 클릭합니다.클릭을 하면 완전히 다른 페이지로 이동하는 방법을 알 수 있습니까?그것은 AJAX 이전의 인터넷이다.
이 페이지를 보세요.각 답변 옆에 위 화살표가 있습니다.그 중 하나를 클릭해 주세요.페이지가 새로고침되지 않지만 피드백이 제공됩니다. 화살표가 주황색으로 바뀝니다.이것은 대수롭지 않게 보일지 모르지만, 웹 테크놀로지의 큰 진보를 나타내고 있습니다.AJAX, 또는 더 정확히는 AJAX의 웹 개발 접근법입니다.
AJAX의 접근방식을 통해 이러한 일이 가능합니다.이것은 현재 큰 문제가 아닙니다.웹 익스피리언스에 내재되어 있기 때문에 웹 익스피리언스 없이 인터넷을 상상하는 것은 어렵습니다.
AJAX와 클럭 페이스
AJAX 방법론의 좋은 비유는 간단한 손목시계나 벽시계입니다.시간을 나타내기 위해 시침, 초침, 초침이 시계 얼굴 주위를 움직이는 것을 상상해 보세요.자, 초침이 움직일 때마다 시계 전체가 파괴되고 재건된다고 가정해 볼까요?
작은 변화를 보여주기 위해 파괴하고 재건하는 그 모든 노력이?!그건 엄청난 자원낭비가 될 겁니다. 90년대의 인터넷이었죠.다행히 AJAX가 있습니다.시계가 시간을 심리스하게 표시하는 것처럼 AJAX에서는 웹 페이지를 새로 고칠 필요 없이 즉시 데이터 변경을 표시할 수 있습니다.위쪽 화살표를 클릭하면 주황색으로 바뀝니다.페이지 새로고침 불필요!
원래 AJAX는 사용자에게 간단한 업데이트를 보여주기 위해 기존 기술을 함께 사용하는 것에 대한 이름일 뿐이지만, 웹 경험의 핵심이 되어버려서 자신이 무엇을 하고 있는지 알지 못하면 자신이 그것을 사용하고 있는지도 모를 것입니다.예를 들어, 2015년부터 AJAX 접근 방식을 구현하기 위해 선호되는 방법은 fetch입니다.이전에는 XMLHttpRequest였습니다.JSON은 상세 내용이 적기 때문에 데이터 전송에 더 자주 사용되었습니다.JQuery는 실제로 AJAX라고 하는 유일한 웹 테크놀로지입니다.$.ajax()내가 알기로는 JQuery를 리액트 어플리케이션과 함께 사용하면 안 됩니다.
AJAX는 웹 페이지와 동일하게 작동합니다.
- 사용자가 작업을 수행합니다(위쪽 화살표 누름 등).
- 클라이언트(Firefox와 같은 웹 브라우저)는 서버(스택 오버플로(SO) 서버 등)에 데이터를 요구합니다.
- 서버는 요청을 처리합니다(업투표 기록을 위해 데이터베이스를 업데이트).
- 서버는 클라이언트에 액션의 성공 여부를 나타내는 응답을 반환합니다.
- 마지막으로 웹 페이지에 이미 로드된 코드 중 일부가 이 새로운 정보를 처리하는 방법을 결정합니다(이 예에서는 javascript가 위쪽 화살표에 클래스를 추가하고 CSS 규칙이 해당 클래스를 가진 요소가 주황색으로 지시합니다).
- 화살표가 주황색인 것만 표시됩니다.다른 모든 단계는 숨겨져 있기 때문에 하나의 매끄러운 반응성 액션처럼 보입니다.
단일 페이지 응용 프로그램
클릭할 때마다 전체 페이지를 다시 작성하는 것은 아니므로 브라우저에 저장된 사이트에 대한 정보를 유지할 수 있습니다.이 기능은 전체 방문 및 향후 방문 시에도 사용할 수 있습니다.
Stack Overflow에 처음 접속하면 모든 CSS, JS 및 HTML이 로드됩니다.이러한 3개의 언어에 의해서, 서버로부터 송수신 되는 데이터의 스타일(CSS), 동작(JS), 구조(HTML)가 정의됩니다.데이터가 어떻게 전송되는지 맞춰보세요!에이잭스
이것이 현재 대부분의 웹이 작동하는 방법입니다.Google, Facebook, Amazon, Youtube, Reddit, WordPress와 WIX로 구축된 모든 사이트, 심지어 Stack Overflow까지 모두 사용자에게 사이트를 효율적으로 제공하기 위해 이 기본 패러다임을 사용합니다.이 차이는 단일 페이지 애플리케이션의 구축 및 관리 방법에 있습니다.
리액트.js
React는 한 페이지 어플리케이션을 빌드 및 관리하기 위한 Javascript 라이브러리입니다.
하지만 그건 그렇게 큰 문제가 아니야.React의 중요한 점은 애플리케이션을 구축할 수 있다는 것입니다.
기본적으로는 개별적으로 구축한 후 조립합니다.컴포넌트는 어플리케이션을 형성합니다.이 페이지의 모든 답변에 대해 완전히 그럴듯하지만 가짜 코드를 확인하십시오.
answerArray.map(a => <Answer answerData={a}></Answer>)
이것은 이 페이지의 대부분의 정보를 보여주는 한 줄입니다.그거 대단한데.Stack Overflow의 개발자들은 "Answer"라고 불리는 자체 컴포넌트를 만들었고, 이 컴포넌트의 유일한 역할은 Answer를 표시하는 것입니다.루프로 실행하면 모든 답변의 복잡성이 추상화되어 다른 컴포넌트와는 완전히 다른 컴포넌트에 숨겨집니다.
자, 이제 이걸 보세요.
<App>
<Header />
<LeftSidebar />
<Question>
{ answerArray.map(a => <Answer answerData={a} /> )}
</Question>
<RightSidebar />
<Footer/>
</App>
이것은 스택 오버플로 사이트 전체입니다.
각 태그(헤더, 질문, 답변 등)는 컴포넌트입니다.이들 컴포넌트는 완전히 분리되어 있으며 자체 코드가 있지만 여기서는 보다 복잡한 애플리케이션을 구축하기 위해 함께 사용됩니다.
구성.
React의 중요한 개념은 구성이며 위에서 정의한 것입니다.「구성은, 작은 기능과 초점을 맞춘 기능을 조합하는 것으로, 보다 복잡한 기능을 구축할 수 있습니다」(플라비코프).어플리케이션은 작은 컴포넌트로 구성되어 있습니다.
각 컴포넌트에는 독자적인 기능이 포함되어 있는 것도 중요합니다.즉, 사용자가 버튼을 클릭했을 때 경고가 나타나면 버튼과 경고를 표시하는 코드가 동일한 컴포넌트에 있는 것입니다.
기능 프로그래밍
깜짝이야, 이것도 이미 정의했어.기능 프로그래밍이란 목적상 1. 오브젝트, 2. 오브젝트가 어떻게 동작하는지, 같은 장소에 있는 것을 의미합니다.위의 버튼 예시와 같습니다.버튼을 클릭하면 경고가 표시됩니다.그리고 그건 모두 같은 파일에 있어요
이는 모든 버튼이 하나의 파일에 있고 모든 버튼의 효과가 다른 파일에 있는 반응 전 개발과는 다릅니다.그리고 이것이 반드시 잘못된 방법은 아니지만, 웹 개발의 경우, 자체적으로 작동하지 않는 널리 분산된 도구보다는 자체 구성 요소로 생각하는 것이 더 쉽습니다.
콧수염과 핸들바를 신경 쓰지 않는 이유
이 두 기술은 리액트에 의해 탈취되었습니다.React가 AJAX를 사용하는 것과 비슷하지만, Moustache와 Handlebars는 이미 React 내부에 있어 자신도 모르는 사이에 항상 사용하고 있습니다.그리고 난 괜찮아그 반대의 주장도 있고, 지식은 결코 나쁜 것이 아니기 때문에, 원한다면 더 조사해 보세요. 하지만 이미 충분히 길기 때문에, 저는 그것에 대해 말할 것입니다.
대신 당신이 신경써야 할 3가지 기술에 대해 알려드리겠습니다.
대신 당신이 신경써야 할 것은...
노드
Node.js의 요점은 브라우저 외부에서 JavaScript를 실행하는 것입니다.엄청 크죠?이것은 웹 개발자들에게 가장 영향력 있는 발전 중 하나인 것으로 밝혀졌습니다.실제로 노드 다운로드는 React 다운로드 전에 이루어지는 경우가 많습니다.
노드가 중요한 이유는 두 가지입니다.
- 다른 것을 다운로드 할 수 있습니다.
- 브라우저로 전송하기 전에 JavaScript를 처리할 수 있습니다.
노드에 대한 페이지와 페이지를 작성할 수 있지만, 여기서 얻을 수 있는 것은 "노드는 중요하다.노드에 대한 더 많은 지식과 그것이 반응 및 웹 개발과 어떻게 관련되어 있는지 살펴봐야 한다."입니다.
NPM
NPM은 "Node Package Manager"의 약자는 아니지만, NPM은 "Node Package Manager"를 의미하기 때문에 NPM은 Node Package Manager를 의미해야 합니다.React, SAS, Angular, Vue, 여기서 언급되는 거의 모든 것은 설치 및 업데이트에 npm을 사용할 것입니다.
웹 팩
웹 팩은 "모듈 번들러"입니다.js 및 css 파일을 모두 가져와서 하나의 파일에 쓰기 때문에 1개의 파일만 작성하면 됩니다.<script>붙이다
각 React 컴포넌트에는 적어도1개의 js 파일이 관련지어져 있습니다.각 컴포넌트에는 독자적인 파일도 필요합니다.이러한 모든 파일을 추적하는 것은 매우 어려운 일입니다.웹 팩은 당신을 위해 그것을 할 수 있습니다.그것은 단지 생활을 더 쉽게 할 뿐이므로, 그것을 일찍 배우고 그것을 회피하지 마세요.
이는 리액트 앱에 내재되어 있기 때문에 대부분의 경우 동작만 하고 있을 뿐 자신도 모르게 됩니다.예를 들어 create-react-app은 자동으로 설치되며 Babel과 마찬가지로 아무것도 수행할 필요가 없습니다.
바벨
모든 코드를 ECMA5로 변환하여 대부분의 브라우저 및 대부분의 버전의 브라우저에서 읽을 수 있도록 합니다.
이것도 npm으로 설치할 수 있습니다.또한 리액트만 가지고 놀면서 이렇게 사소한 일에 얽매이지 않고 create-react-app을 실행할 수 있습니다.이것은 자동 설정만으로 동작하기 때문에 학습 중에는 전혀 도움이 되지 않습니다.
일을 더 쉽게 만들어지다
NPM, Webpack, Babel 및 기타 많은 노드 패키지는 사용자의 생활을 편리하게 하기 위해서만 제공됩니다.웹 어플리케이션 구축에는 많은 유지보수가 필요합니다.또는 보통 생각할 필요도 없는 작은 비프로그래밍의 번거로움이 필요합니다.
새로운 패키지의 힘을 휘두르는 것은 더 흥미로운 것에 할애되는 수 많은 시간을 의미하기 때문에 새로운 패키지에 위축되지 않도록 노력하세요.
결론
이 게시물이 React, AJAX 및 웹 애플리케이션 개발의 지속적인 특성에 대한 차이점을 학습하는 데 도움이 되었으면 합니다.React와 AJAX는 비교가 되지 않지만 React는 AJAX를 사용합니다.또한 개발자인 사용자는 페이지를 새로고침할 필요 없이 React에서 AJAX를 사용하여 데이터를 가져옵니다.
AJAX 및 기타 기술은 웹 애플리케이션의 발전에 큰 도움이 되었지만, 애플리케이션에 매우 중요한 요소였기 때문에 새로운 기술에 많이 동화되었기 때문에 이점을 얻기 위해 이러한 기술에 대해 알 필요도 없었습니다.
제 목표는 학습 경로에 대한 몇 가지 오해를 바로잡고, 웹 개발의 현재 상태에 대한 "이유"를 설명하고, 여러분이 언급하지 않았지만 알아야 할 기술을 소개하는 것이었습니다.노드, npm, 바벨
계속 배우고 싶다면 React에서 튜토리얼을 하는 것을 강력히 추천합니다.나는 platform.ui.dev/에서 몇 가지 일을 했고, 그들의 학습 방식과 지불 구조를 즐겼다(나는 이런 말을 한 적이 없다).행운을 빌고 이게 도움이 됐으면 좋겠네요.
Ajax는 새로고침 없이 웹 페이지를 새로 고치기 위해 사용됩니다.Ajax는 서버에 요청을 전송하지만 일반적으로 응답은 페이지 전체를 새로고침하지 않고 브라우저에 새로운 요소를 동적으로 표시하는 Javascript에 의해 처리됩니다.
리액트는 언더페이스 컴포넌트로 페이지를 동적으로 업데이트하는 Javascript 라이브러리입니다.컴포넌트는 javascript 상호작용 또는 서버를 통과하는 ajax 요청에 의해 계산됩니다.So React(So React)JS는 Ajax 요청을 사용하여 페이지를 업데이트할 수도 있습니다.
콧수염과 핸들바는 리액트와는 조금 다르다.JS의 주된 목적은 페이지에 표시되는 컴포넌트의 템플릿을 변환하는 것입니다.또한 Ajax를 사용하여 데이터를 가져올 수 있습니다(템플릿 또는 json 데이터 가져오기).
아약스
Ajax를 사용하여 http 요청을 보내고 있습니다.또한 Ajax만으로는 페이지의 특정 영역(DOM)을 다시 렌더링할 수 없습니다.ajax 호출이 응답을 가져온 후 페이지를 다시 렌더링하려면 jQuery가 필요합니다.실제로 jQuery + HTML과 React.js를 비교하는 것이 ajax와 React.js를 비교하는 것보다 훨씬 좋습니다.
리액트.js
react.js의 역할은 페이지(DOM)를 작은 조각(컴포넌트)으로 나누는 것입니다.예:- 프로파일 이미지 영역, 메인 내비게이션, 사이드바, 텍스트 필드, 버튼.큰 조각부터 작은 조각까지.가장 중요한 것은 이러한 컴포넌트에 기능을 결합할 수 있다는 것입니다.예:- 사용자가 "프로파일 이미지 영역" 위의 을 클릭하여 프로파일 이미지를 업로드하기 위한 팝업이 필요하다고 가정합니다.팝업을 여는 기능을 쓸 수 있습니다.또한 프로필 이미지를 데이터베이스에 업로드하는 다른 함수를 작성할 수 있습니다.이렇게 하면 React.js 내에서 ajax를 사용할 수 있습니다.
이 튜토리얼에 따라주세요.
간단히 말해 리액트는 페이스북이 만든 자바스크립트 라이브러리입니다.이는 확장자가 많기 때문에 일반적으로 프레임워크로 보이지만 공식 문서에서는 사용자 인터페이스를 구축하기 위한 라이브러리로 라벨을 붙입니다.반면 Ajax는 라이브러리나 프레임워크, 언어가 전혀 아닙니다.Ajax는 프로그래머가 코드 흐름이 전혀 중단되지 않고 웹 API를 호출하기 위해 사용하는 기술입니다.그날의 마지막에, JavaScript 코드는 한 줄씩 동기적으로 실행되며, Ajax는 동기 코드 내에서 비동기적으로 실행되지만 코드를 일시 중지하지 않고 API 호출이 송수신될 때까지 기다립니다.Ajax에서는 데이터 송수신이 모두 백그라운드에서 이루어지기 때문에 데이터를 가져오는 데 걸리는 지연에 대해 걱정할 필요가 없습니다.실제로 리액트 코드에 Ajax를 사용할 수 있습니다.Ajax는 실제로 API를 호출하기 위해 Fetch라는 것을 사용합니다.또한 API에서 수신한 데이터(.then, .catch, Async/Awit 등)를 처리하기 위해 다양한 메서드를 사용할 수 있습니다.Fetch를 사용할 필요도 없습니다.Axios를 사용하는 등 Ajax를 사용하여 API를 호출하는 다른 서드파티 방법도 있습니다.이러한 다양한 툴의 사용 방법에 대한 비디오를 보는 것이 좋습니다.이러한 툴이 어떻게 동작하는지를 알면 React와 Ajax를 함께 사용하여 훌륭한 애플리케이션을 구축할 수 있습니다.이것이 도움이 되었기를 바라며, 이 답변에 대해 어떻게 생각하셨는지 투표해 주십시오.저는 이 사이트를 꽤 처음 봅니다.
여기까지 스크롤을 하면, 이러한 답변에 뭔가 놓치고 있는 듯한 느낌이 듭니다만, 이것은 훌륭한 것입니다.저는 AJAX가 뭔지 잘 모르겠어요.위키피디아에서 찾아봐야 했어요.거기서 아주 좋은 설명을 찾을 수 있을 거예요.Jesse James Garrett이 2005년에 이 용어(AJAX)를 만들어 웹 애플리케이션에 대한 새로운 접근법으로 설명한 아카이브 기사를 읽었습니다.자세한 내용은 MDN을 참조하십시오.
오늘날 웹 개발에서 비동기식 요청은 너무나 명백하기 때문에 비동기식 요청이 없는 웹사이트가 있었다는 것은 상상하기 어렵다.이것이 AJAX를 이해하는 열쇠입니다.당시 XMLHttpRequest API는 새로운 것이었습니다.이제 JavaScript에 Fetch API가 있거나 Axios를 사용할 수 있습니다.구글 지도의 접근법은 2005년에 혁신적이었다.확대해서 지도를 가져와서 스크롤할 수 있어요.페이지를 새로고침하지 않고 받은 이 즉각적인 응답은 AJAX라는 접근법의 결과입니다.XMLHttpRequest, DOM, html & css, javascript 등의 테크놀로지 세트로 구성되어 있습니다.
보시다시피 AJAX는 응용 프로그램의 응답성을 높이는 웹 개발 접근 방식을 설명하는 오래된 용어입니다(20년 이상 전).따라서 어떤 프레임워크(Vue, Angular)를 사용하든, React와 같은 라이브러리를 사용하든 API 호출이 비동기적일 때마다 AJAX 접근 방식을 사용하며, 사용자가 현재 표준 접근 방식인 앱과 상호 작용하는 것을 막지 않습니다.
BTW React는 Ember.js, Angular 또는 Vue와 대조적으로 내장된 상태 관리 도구 또는 라우팅 도구가 없기 때문에 라이브러리입니다.리액트 앱(Redux, Zustand, context api, react-router)을 구축하기 위한 별도의 툴 세트인 리액트 스택에 대해 자주 이야기합니다.
언급URL : https://stackoverflow.com/questions/35643991/difference-between-react-js-and-ajax
'programing' 카테고리의 다른 글
| react.default.createContext는 react-redux를 사용할 때 함수가 아닙니다. (0) | 2023.04.03 |
|---|---|
| Jest가 모든 비동기 코드의 실행이 완료될 때까지 기다렸다가 어설션을 기대하는 방법 (0) | 2023.04.03 |
| AngularJS : jQuery로 변경 시 ng-model 바인딩이 업데이트되지 않음 (0) | 2023.04.03 |
| 키가 존재하는지 확인하고 Python을 사용하여 JSON 어레이를 반복합니다. (0) | 2023.04.03 |
| WooCommerce 주문에서 고객 정보를 얻으려면 어떻게 해야 합니까? (0) | 2023.04.03 |