소개

useState를 사용하고 있으면, 데이터를 props로 아이의 한층 더 아이의 컴퍼넌트,와 버킷 릴레이 하는 형태가 되는 것이 많다.
useContext 를 사용하는 것으로, 단번에 하층의 컴퍼넌트에 건네줄 수 있다고 하는 것으로 학습했다.

상위 컴포넌트

app.jsx

import React, {createContext, useState} from 'react'

//Contextの作成
export const UserContext = createContext()

export default App = () => {

  const [user, setUser] = useState({
    name: 'username',
    email: '[email protected]'
  })

  return (
　　　　//下位コンポーネントを囲うProviderにstateを渡す
      <UserContext.Provider value={user}>
          <nextComponent/>
      </UserContext.Provider>
  )
}

하층 컴포넌트

상위 컴포넌트의 <nextComponent/> 아래에 <nextNextComponent/>가 있다고 가정합니다.

nextNextComponent.jsx

import React, {useContext} from 'react'
//上層コンポーネントで定義したContextのインポート
import {UserContext} from '../../App'

const nextNextComponent = () => {
　//インポートしたUserContextをuseContextして変数に代入することで、jsx内で表示できる。
  const user = useContext(UserContext)

  return (
    <p>username：{user.name}</p>
    <p>email:{user.email}</p>
  )
}

감상

규모가 작은 프로젝트로 부분적으로 사용하는 문장에는 쓰기 쉽고 간단하고 편리합니다.
하층 컴포넌트에 전달하고자 하는 데이터가 많아지면,<UserContext.Provider value={user}>라고 정의하는 부분이 늘어나 전망이 나빠질까라고 생각했습니다.

이에 대해 Redux에서의 state 관리라면 기술량이 늘어나는 단점이 있지만,
・컴포넌트의 파일내가 깨끗이 한다
・state의 처리의 패턴 마다 파일을 나누어 관리할 수 있다
・데이터의 흐름이 항상 일정하고 익숙해지면 이해하기 쉽다
라고 하는 메리트가 있을까라고 생각했습니다.

끝에.

끝까지 읽어 주셔서 감사합니다
전직을 위해, 미경험의 상태로부터 React, Rails를 학습하고 있습니다. 계속해서 투고해 나가는 가운데, 그 때문에의 인풋도 필연적으로 늘어나, 성장에 연결될까라고 생각하고 있습니다.
투고의 내용에 잘못되어 있는 곳이나, 덧붙여야 할 곳이 많이 있을까 생각하므로, 지적 받을 수 있으면 다행입니다. 이 기사를 읽어 주셔서 감사합니다.