React를 기본으로 정리해 본【15】【React Hook (useContext) ② 】

useContext란?

useContext란, Context 기능을 보다 심플하게 사용할 수 있게 된 기능.
부모로부터 Props로 건네받지 않은데, Context에 수용되고 있는 데이터에 보다 심플하게 액세스 할 수 있다고 하는 것.

일반적으로, 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 건네줄 때는, props를 개입시켜 실시하지만, 부모로부터 아이, 그 또 아이등과 같이 복수의 컴퍼넌트를 개입시켜 데이터를 건네주는 것은 props에서는 번잡해져 온다.

React의 Context API를 이용함으로써 props를 이용하지 않고 아래 계층의 컴포넌트와 데이터를 공유할 수 있다.

사용 예 "UseContext"

App.js 파일을 가장 부모의 컴퍼넌트로서 App.js 파일에 아이 컴퍼넌트 A를 import해, 컴퍼넌트 A에 컴퍼넌트 B, 컴퍼넌트 B에 컴퍼넌트 C를 import한 4계층의 컴퍼넌트를 작성한다.



맨 위의 부모 컴포넌트인 App.js 파일의 내용은 아래와 같이 되어 ComponentA, B, C에 대해서는 components 디렉토리 아래에 작성한다.

App.js

import React from 'react';
import ComponentA from './components/ComponentA'

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Learn useContext</h1>
      <ComponentA/>
    </div>
  );
}
export default App;

ComponentA.js

import React from 'react'
import ComponentB from './ComponentB'

const ComponentA = () => {
    return (
        <div>
            <p>Componet A</p>
            <ComponentB />
        </div>
    )
}
export default ComponentA;

ComponentB.js

import React from 'react'
import ComponentC from './ComponentC'

const ComponentB = () => {
    return (
        <div>
            <p>Componet B</p>
            <ComponentC />
        </div>
    )
}
export default ComponentB;

ComponentC.js

import React from 'react'

const ComponentC = () => {
    return (
        <div>
            <p>Componet C</p>
        </div>
    )
}
export default ComponentC;

참고 사이트

이렇게 간단합니까? React Hook useContext로 데이터 공유
React hooks를 기초로부터 이해한다(useContext편)