Beyond React: 다른 기술과 React를 통합하는 7가지 방법

Beyond React: 다른 기술과 React를 통합하는 7가지 방법
당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

React는 다재다능한 웹 애플리케이션용 UI를 만드는 데 사용할 수 있는 잘 알려진 JavaScript 라이브러리입니다. React는 적응력이 있으며 다른 기술과 결합하여 더 강력하고 효과적인 앱을 만들 수 있습니다.





React를 다양한 기술과 통합하는 방법을 배우면 여러 소스에서 이점을 얻을 수 있습니다.



오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.

1. 리액트 + 리덕스

Redux는 React와 함께 사용되는 상태 관리 라이브러리입니다. Redux는 중앙 집중식 애플리케이션 상태 관리를 용이하게 합니다. 상태가 많은 복잡한 애플리케이션을 구축할 때 React와 Redux는 함께 잘 작동합니다.





다음은 React와 함께 Redux를 사용하는 방법에 대한 그림입니다.

 import React from 'react'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
const initialState = { count: 0 }; 
 
function reducer(state = initialState, action) { 
  switch (action.type) { 
    case 'INCREMENT': 
      return { count: state.count + 1 }; 
    case 'DECREMENT': 
      return { count: state.count - 1 }; 
    default: 
      return state; 
  } 
} 
 
const import React from 'react'; 
import { useQuery, gql } from '@apollo/client'; 
 
const GET_USERS = gql` 
 query GetUsers { 
   users { 
     id 
     name 
   } 
 } 
; 
function Users() { 
 const { loading, error, data } = useQuery(GET_USERS); 
 if (loading) return <p>Loading...</p>; 
 if (error) return <p>Error :(</p>; 
 return ( 
store = createStore(reducer); 
function Counter() { 
 const count = useSelector(state => state.count); 
 const dispatch = useDispatch(); 
 return ( 
   <div> 
     <p>Count: {count}</p> 
     <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button> 
     <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button> 
   </div> 
 ); 
} 
function App() { 
 return ( 
   <Provider store={store}> 
     <Counter /> 
   </Provider> 
 ); 
} 
export default App;

이 예제는 초기 상태가 0인 Redux 스토어를 생성합니다. . 감속기 기능은 다음을 처리합니다. 증가 그리고 감소 운영. 코드는 useSelector 그리고 useDispatch 진행 중인 카운트를 가져오고 활동을 개별적으로 전달하기 위해 후크합니다.



hulu에서 에피소드를 다운로드 할 수 있습니까?

마지막으로 전체 응용 프로그램에서 저장소에 액세스할 수 있도록 하려면 카운터 구성 요소를 공급자 구성 요소로 래핑합니다.

2. Next.js를 사용한 서버 측 렌더링

Next.js는 웹사이트 속도를 최적화하고 이것 클라이언트에 HTML을 전송하고 사용하여 전술 React 구성 요소의 서버 측 렌더링 .



강력한 도구 세트는 React와 함께 작동하여 뛰어난 성능과 높은 검색 엔진 순위를 제공합니다.

 // pages/index.js 
import React from 'react'; 
function Home() { 
 return ( 
   <div> 
     <h1>Hello, World!</h1> 
     <p>This is a server-rendered React component.</p> 
   </div> 
 ); 
} 
export default Home;

이 모델에서는 다음과 같은 React 구성 요소를 특성화합니다. 집 . Next.js는 서버에서 렌더링할 때 이 구성 요소의 콘텐츠로 정적 HTML 페이지를 만듭니다. 페이지가 클라이언트로부터 방문을 받으면 HTML을 클라이언트로 보내고 구성 요소를 수화하여 동적 React 구성 요소로 작동할 수 있도록 합니다.



3. GraphQL로 데이터 가져오기

GraphQL은 REST에 대한 능숙하고 강력하며 적응 가능한 대안을 제공하는 API용 쿼리 언어입니다. GraphQL을 사용하면 데이터를 더 빨리 얻고 사용자 인터페이스를 더 빨리 업데이트할 수 있습니다.

이것은 React와 함께 GraphQL을 사용하는 방법을 보여줍니다.

 import React from 'react'; 
import { useQuery, gql } from '@apollo/client'; 
const GET_USERS = gql` 
 query GetUsers { 
   users { 
     id 
     name 
   } 
 } 
; 
function Users() { 
 const { loading, error, data } = useQuery(GET_USERS); 
 if (loading) return <p>Loading...</p>; 
 if (error) return <p>Error :(</p>; 
 return ( 
   <ul> 
     {data.users.map(user => ( 
       <li key={user.id}>{user.name}</li> 
     ))} 
   </ul> 
 ); 
} 
function App() { 
 return ( 
   <div> 
     <h1>Users</h1> 
     <Users /> 
   </div> 
 ); 
} 
export default App;

이 모델은 useQuery 에서 기능 @아폴로/클라이언트 GraphQL 프로그래밍 인터페이스에서 클라이언트의 런다운을 가져오는 라이브러리. 그러면 사용자 목록이 UI에 표시됩니다.

4. CSS-in-JS로 스타일 지정

CSS-in-JS는 React 구성 요소의 스타일을 지정하기 위한 JavaScript 기반 방법입니다. 복잡한 스타일시트를 더 간단하게 관리하고 모듈식 및 구성 요소 기반 스타일로 스타일을 작성할 수 있습니다.

테이블에 사용자 정의 테두리를 적용한 경우

다음은 React에서 CSS-in-JS를 사용하는 방법에 대한 그림입니다.

 import React from 'react'; 
import styled from 'styled-components'; 
const Button = styled.button` 
 background-color: #007bff; 
 color: #fff; 
 padding: 10px 20px; 
 border-radius: 5px; 
 font-size: 16px; 
 cursor: pointer; 
 &:hover { 
   background-color: #0069d9; 
 } 
; 
function App() { 
 return ( 
   <div> 
     <Button>Click me!</Button> 
   </div> 
 ); 
} 
export default App;

이 예는 스타일 버튼 를 사용하는 구성요소 스타일 기능. 버튼의 경험 톤, 텍스트 톤, 쿠션, 라인 스윕, 텍스트 치수 및 커서를 정의합니다.

사용자가 버튼 위로 마우스를 가져갈 때 배경색을 변경하는 마우스 오버 상태도 정의됩니다. 버튼은 최종적으로 React 컴포넌트를 사용하여 렌더링됩니다.

5. 데이터 시각화를 위한 D3와의 통합

D3는 데이터 조작 및 시각화 JavaScript 라이브러리입니다. React를 사용하여 강력한 대화형 데이터 시각화를 만들 수 있습니다. React에서 D3를 사용하는 방법은 다음과 같습니다.

 import React, { useRef, useEffect } from 'react'; 
import * as d3 from 'd3'; 
function BarChart({ data }) { 
 const ref = useRef(); 
 useEffect(() => { 
   const svg = d3.select(ref.current); 
   const width = svg.attr('width'); 
   const height = svg.attr('height'); 
   const x = d3.scaleBand() 
     .domain(data.map((d) => d.label)) 
     .range([0, width]) 
     .padding(0.5); 
   const y = d3.scaleLinear() 
     .domain([0, d3.max(data, (d) => d.value)]) 
     .range([height, 0]); 
   svg.selectAll('rect') 
     .data(data) 
     .enter() 
     .append('rect') 
     .attr('x', (d) => x(d.label)) 
     .attr('y', (d) => y(d.value)) 
     .attr('width', x.bandwidth()) 
     .attr('height', (d) => height - y(d.value)) 
     .attr('fill', '#007bff'); 
 }, [data]); 
 return ( 
   <svg ref={ref} width={400} height={400}> 
     {/* axes go here */} 
   </svg> 
 ); 
} 
export default BarChart;

이 코드는 막대 차트 a를 받아들이는 구성 요소 데이터 이전 코드 스니펫의 소품. 그것은 호출 useRef 아웃라인을 그리는 데 사용할 SVG 구성 요소에 대한 참조를 만드는 후크입니다.

그런 다음 차트의 막대를 렌더링하고 useEffect() 후크 , 데이터 값을 화면 좌표에 매핑합니다.

6. WebSocket으로 실시간 기능 추가

WebSocket을 구현하면 클라이언트와 서버 간의 지속적인 통신을 가능하게 하는 완전히 작동하는 양방향 경로가 설정됩니다. 이를 통해 React는 토론 게시판, 라이브 업데이트 및 경고와 같은 웹 애플리케이션에 지속적인 유용성을 추가할 수 있습니다.

React에서 다음과 같은 방식으로 WebSocket을 사용합니다.

누가에서 앱을 SD 카드로 옮기는 방법 
 import React, { useState, useEffect } from 'react'; 
import io from 'socket.io-client'; 
function ChatRoom() { 
 const [messages, setMessages] = useState([]); 
 const [inputValue, setInputValue] = useState(''); 
 const socket = io('http://localhost:3001'); 
 useEffect(() => { 
   socket.on('message', (message) => { 
     setMessages([...messages, message]); 
   }); 
 }, [messages, socket]); 
 const handleSubmit = (e) => { 
   e.preventDefault(); 
   socket.emit('message', inputValue); 
   setInputValue(''); 
 }; 
 return ( 
   <div> 
     <ul> 
       {messages.map((message, i) => ( 
         <li key={i}>{message}</li> 
       ))} 
     </ul> 
     <form onSubmit={handleSubmit}> 
       <input 
         type="text" 
         value={inputValue} 
         onChange={(e) => setInputValue(e.target.value)} 
       /> 
       <button type="submit">Send</button> 
     </form> 
   </div> 
 ); 
} 
export default ChatRoom;

이 예에서는 다음을 정의합니다. 대화방 를 사용하는 구성 요소 소켓.io-클라이언트 WebSocket 서버에 연결하기 위한 라이브러리. 당신은 사용할 수 있습니다 useState 메시지 요약 및 정보 존중을 처리하기 위한 후크입니다.

새로운 메시지를 수신하면, useEffect 후크는 리스너를 등록하여 메시지 목록에 대한 메시지 이벤트 업데이트를 트리거합니다. 이벤트 메시지에 대한 입력 값을 지우고 보내려면 다음이 있습니다. 핸들제출 기능.

그러면 입력 필드와 버튼이 있는 양식과 업데이트된 메시지 목록이 모두 화면에 표시됩니다.

양식을 제출할 때마다 핸들제출 기능은 불가피합니다. 서버에 메시지를 전달하기 위해 이 메서드는 소켓을 사용합니다.

7. 모바일 개발을 위한 React Native와의 통합

React Local은 React를 사용하여 로컬 범용 애플리케이션을 구축하기 위한 시스템으로, iOS 및 Android 단계용 휴대용 애플리케이션을 홍보하기 위해 연결됩니다.

React Native와 React의 통합을 사용하면 모바일 및 웹 플랫폼에서 React의 구성 요소 기반 디자인과 재사용 가능한 코드를 사용할 수 있습니다. 이를 통해 모바일 앱 개발 주기와 출시 시간이 단축됩니다. React Native는 React 라이브러리를 사용하는 네이티브 모바일 앱을 개발하기 위한 인기 있는 프레임워크입니다.

다음과 같은 필수 프로그래밍 및 라이브러리 소개 Node.js , 로컬 CLI 응답 , 그리고 엑스코드 또는 안드로이드 스튜디오 , iOS와 Android를 별도로 다루는 디자이너에게 기본입니다. 마지막으로 간단한 React Native 구성 요소를 통해 개발자는 iOS 및 Android 플랫폼을 위한 강력하고 기능이 풍부한 모바일 애플리케이션을 만들 수 있습니다.

React를 다른 기술과 결합

React는 온라인 앱 구축을 위한 인기 있고 효과적인 라이브러리입니다. React는 사용자 인터페이스를 만드는 훌륭한 옵션이지만 기능을 향상시키기 위해 다른 기술과 함께 사용되기도 합니다.

React를 이러한 기술과 통합함으로써 개발자는 더 나은 사용자 경험을 제공하는 더 복잡하고 고급 앱을 만들 수 있습니다. React와 도구 및 라이브러리의 생태계는 기본 웹 사이트 또는 복잡한 웹 애플리케이션을 만드는 데 필요한 모든 것을 다룹니다.