사물의 상태

이번 주에 저는 개발자로 성장하는 방법에 대한 귀중한 피드백을 받았습니다. 바로 기본으로 돌아가라는 것입니다. 저는 React를 Frontend 라이브러리로 사용해 왔으며 React와 모든 Frontend 라이브러리의 가장 중요한 기능 중 하나는 상태 관리입니다. 상태를 관리하는 방법에는 여러 가지가 있습니다. 이 블로그에서는 이를 수행하는 세 가지 방법인 useState, Redux 및 useContext를 검토하겠습니다.

State 는 React의 세 가지 주요 기능인 state, component, props 중 하나입니다. 상태는 "구성 요소가 자체 데이터를 생성하고 관리할 수 있도록 하는 내장 객체"( Egyi )로 정의됩니다. 나는 상태를 사용자가 구성 요소와 상호 작용하는 방식을 추적하는 객체로 생각하고 이 동작을 기반으로 특정 정보를 렌더링하거나 표시할 수 있습니다.

사용 상태

상태 관리의 첫 번째 방법은 널리 사용되는 React Hook인 useState입니다. 이 후크를 사용하면 "기능 구성 요소에서 상태 변수를 가질 수 있습니다"(LogRocket). useState는 "상태 저장 값과 이를 업데이트하는 함수를 반환합니다"( ReactJS ). 이 Hook은 로컬 상태 관리를 활용합니다. 상태를 유지하고 다른 구성 요소가 액세스할 수 있도록 하려면 props로 전달해야 합니다. useState는 다시 렌더링할 때 변경할 수 있습니다.

import {useState} from 'react'
export default function WelcomePage(){
  const [counter, setCounter] = useState(0)
  const increaseCounter = () => {
    setCounter(counter +1)
  }
return (
    <div>
       <h3>I've clicked on this button {counter} times</h3>
       <button onClick={increaseCounter}>Click here</button>
    </div>
  )
}

이전에 useContext 에 대해 썼지 만 useContext는 또 다른 React Hook입니다. useState와 달리 useContext는 전역 상태 관리를 관리하고 유지하는 데 사용됩니다. useContext에 무언가가 할당되면 모든 구성 요소에서 useContext를 가져올 수 있습니다. useContext 후크의 이점은 전역적으로 설정되기 때문에 다시 렌더링할 때 변경되지 않는다는 것입니다.

import {useContext} from 'react'
export const UserContext = React.createContext()
export default function WelcomePage(){
const [userInfo, setUserInfo] = useState([])
const fetchAPI = () => {
    fetch('https://localhost:3000/[your route here]')
      .then(response => response.json())
      .then(data => {
         setUserInfo(data)
           return data
       })
  }
return (
    <UserContext.Provider
       value={{fetchAPI}}
    >
{/* other data here */ }
</UserContext.Provider>
  )
}

Redux는 상태를 관리하기 위해 만들어진 React 라이브러리입니다. "클라이언트, 서버 및 기본 환경에서 일관되게 동작하고 테스트하기 쉬운 JavaScript 앱을 작성하는 데 도움이 되도록 설계된 예측 가능한 상태 컨테이너"( Ighodaro )로 정의됩니다. 상태는 저장소를 통해 유지되며 앱의 어떤 구성 요소가 상태에 액세스할 수 있는지 지정할 수 있습니다. 그리고 리듀서와 작업을 사용하여 상태를 변경할 수 있습니다.

Redux를 사용하면 많은 이점이 있습니다. 디버그하기 쉽고, 상태를 더 예측 가능하게 만들고, 앱을 확장해야 하는 경우에 유용합니다. 그러나 모든 React 앱에 필요한 것은 아닙니다 . 실제로 Redux의 공동 저자인 Dan Abramov는 다음과 같이 말했습니다 . 그러나 독단적인 도구를 사용할 때와 마찬가지로 주의해서 접근하십시오 .”

상태 관리에 대해 자세히 알아보려면 아래 리소스를 확인하세요.

자원

Redux가 필요하지 않을 수도 있습니다.