
안녕하세요 여러분 모두 건강하시길 바랍니다. 제목에서 이 게시물의 내용을 짐작하셨을 수도 있지만, 예상하지 못했을 수도 있고 예상치 못한 내용을 발견하실 수도 있습니다. 그러니 이 글을 빨리 읽어보시기 바랍니다.
이 글의 출처
몇 년 전 React에 관해 질문을 받았을 때 내 대답은 JavaScript일 뿐이라는 것이었습니다. 예, JavaScript입니다. 하지만 그 이상인가요? 정확히 무엇을 할 수 있나요? 왜 모두가 그것에 대해 이야기하고 있습니까?
저는 React에 관한 매우 기본적인 기사를 찾거나 읽고 있었습니다. 하지만 마땅한 정보를 찾지 못했습니다. 지금도 많은 동료나 친구들이 같은 문제에 직면하고 있는 것을 보고, 그들이 React 학습 여정을 시작하는 데 도움이 되도록 React에 관한 몇 가지 기사를 쓰기로 결정했습니다. 이전 Java 또는 CSS 기사와 마찬가지로 이 기사도 매우 이해하기 쉽게 만들기 위해 최선을 다하겠습니다.
이 글에서는 React가 무엇인지에 대한 개요를 제공하려고 합니다. 코딩 부분이나 복잡한 기술 용어는 다루지 않고 몇 가지 요점으로 요약하겠습니다.
댓글란에 여러분의 생각을 공유해주세요
시작해 보겠습니다…
- React는 Meta(이전의 Facebook)에서 만든 JavaScript 프런트엔드 라이브러리입니다. 예, 프레임워크가 아니라 라이브러리입니다. 반면 Angular는 사용자 인터페이스를 만들기 위한 프레임워크입니다.
- React를 사용하면 설치하고 사용자 인터페이스를 만들기만 하면 됩니다. 다음 기사에서 사용 방법에 대해 논의할 것입니다. 지금은 간단한 명령으로 설치하기만 하면 사용 가능하다는 점만 기억하세요.
- React를 사용하면 웹 애플리케이션에서 모바일 앱과 같은 좋은 경험을 제공합니다.
- React를 사용하여 웹 애플리케이션을 만들면 링크, 버튼 또는 탭을 클릭하기 전에 다른 페이지가 로드될 때까지 기다릴 필요가 없습니다.
- React는 페이지를 다시 로드할 것을 요구하지 않습니다. 데이터는 다시 로드하지 않고도 페이지 자체에서 업데이트됩니다. 즉, 여기서는
reload()
메소드를 사용하지 않을 것이라는 뜻이지만 사용하지 않는 데에는 제한이 없습니다 결국 그것은 여전히 JavaScript이기 때문입니다.
- React로 만든 웹 애플리케이션은 대화형 기능이 뛰어나고 사용이 원활합니다. 게다가 여기에서의 전환은 거의 즉각적이므로 새 페이지가 로드될 때까지 기다릴 필요가 없습니다.
- 기존 웹사이트에서는 링크를 클릭하면 서버에 요청이 전송되고 서버는 응답으로 HTML 페이지를 반환하므로 약간의 지연이 발생하고 페이지가 로드될 때까지 기다려야 할 수 있습니다. 반면 React에서는 브라우저에서 JavaScript를 실행하므로 브라우저에서 로직을 실행하여 사용자가 보는 것을 조작할 수 있습니다. 이는 DOM(실제로는 HTML 구조)을 통해 수행됩니다. 그렇기 때문에 사용자에게 다른 콘텐츠를 표시하기 위해 HTML 페이지를 요청할 필요가 없습니다.
- React의 주요 특징은 선언적 및 구성 요소 기반 개발 접근 방식입니다. React의 모든 것은 컴포넌트입니다. React 구성요소란 무엇입니까? React 구성 요소는 일부 매개 변수를 전달하고 React 요소를 반환하는 함수형 모듈입니다.
- 이제 질문이 생깁니다. React 요소가 무엇인가요? 우리 모두 알고 있듯이 HTML에는 요소(p, div, body)가 있으며 이러한 요소를 사용하여 애플리케이션의 프런트 엔드를 만듭니다. 이제 React 요소는 HTML 요소를 사용하는 것과 동일한 방식으로 사용되지만 이러한 React 요소는 직접 생성되는 반면 HTML 요소는 미리 생성됩니다.
- 이제 다시 질문이 생깁니다. React 요소를 어떻게 생성하나요? React 요소를 생성하기 위해 JSX를 사용합니다. JSX는 JavaScript XML을 의미합니다. JSX 코드는 기본적으로 JavaScript의 HTML 코드입니다. JSX를 사용할 필요는 없지만 React 애플리케이션 작성이 더 쉬워집니다. JSX에 대한 소개는 여기까지입니다. JSX에 대한 자세한 내용은 다른 글에서 다루도록 하겠습니다.
- 이제 가장 중요한 점은 React를 사용하는 이유입니다. 단일 페이지 애플리케이션 접근 방식인 SPA 접근 방식을 사용하기 때문입니다. 이 접근 방식에서는 새 HTML 페이지가 로드되지 않고 서버가 HTML 페이지를 한 번만 보낸 후 React가 기존 페이지의 DOM 요소를 조작하여 애플리케이션의 UI를 인계받고 제어합니다. 이에 대한 가장 좋은 예는 Netflix 웹사이트입니다. 이 웹사이트를 방문하면 HTML 페이지가 로드되지 않는 것을 직접 확인할 수 있습니다.https://www.php.cn/link/b06cbb874ce37177f6dcdf690b5ac490
마지막으로 React의 핵심은 현대적이고 반응성이 뛰어난 사용자 인터페이스를 구축하는 것이라고 말하고 싶습니다.
읽어주셔서 감사합니다. 곧 또 다른 기본 글에서 만나요
아이디어가 있으시면 공유해 주시고, 제가 틀렸다면 정정해 주시기 바랍니다.
이 기사가 도움이 되기를 바랍니다.
Twitter나 LinkedIn에서 저와 소통하세요
위 내용은 역대 가장 입문적인 React 블로그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!