React Hooks 및 컨텍스트로 코드 구성

대규모 React 프로젝트에서 작업할 때 더 나은 유지 관리 및 확장성을 위해 잘 구성된 코드베이스를 갖는 것이 중요합니다.

이 기사에서는 React Hooks 및 Context 활용에 중점을 두고 React에서 소스 코드를 구성하는 모범 사례에 대해 알아봅니다.

 

상태 관리를 위한 React Hooks 사용

React Hooks는 클래스를 사용하지 않고 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수 모음입니다. 이는 보다 간결하고 읽기 쉬운 코드를 작성하는 데 도움이 됩니다. 예를 들어 useState 후크를 사용하여 구성 요소의 상태를 관리할 수 있습니다.

다음은 예입니다.

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

재료의 조합

React의 이점 중 하나는 구성 요소를 재사용할 수 있다는 것입니다. 조직을 늘리기 위해 더 작은 구성 요소를 사용하여 더 큰 구성 요소를 만들 수 있습니다.

이렇게 하면 작업을 세분화하고 코드를 쉽게 유지 관리할 수 있습니다. <Button> 예를 들어 애플리케이션의 여러 위치에서 사용할 구성 요소를 만들 수 있습니다 .

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

컨텍스트를 사용하여 전역 상태 관리

컨텍스트는 부모 구성 요소를 거치지 않고 자식 구성 요소 간에 데이터를 공유할 수 있게 해주는 React의 메커니즘입니다. 이렇게 하면 여러 구성 요소 수준에서 데이터 속성이 전달되는 것을 방지하고 코드 복잡성을 줄이는 데 도움이 됩니다.

다음은 컨텍스트를 사용하여 애플리케이션에서 현재 언어를 공유하는 예입니다.

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

위는 React Hooks 및 Context를 사용하여 React 소스 코드를 구성하는 몇 가지 모범 사례입니다.