useContext란? React hooks useContext란?

useContext란? React hooks useContext란?

 

오랜만에 리액트 주제를 적어보네요.

이제 독일에도 봄이 진짜로 왔는가 봅니다.

산책을 나가보니 새소리와 벌레소리는 여기저기서 들리고, 꽃도 여기저기 많이 피었더군요.

자 그럼 보론으로 들어가 보겠습니다.

 

목차.

1. useContext 란?
2. 사용 방법?
3. 어디에 사용하면 좋은가?
4. 마치며.

 

1. useContext란?

 

useContext란 무엇일까요??

useContext는 쉽게 말하면, 내게 필요한 props를 글로벌하게 사용할 수 있게 도와준다고

말할 수 있습니다. 우리는 리액트로 작업하면서 props를 정말 많이 사용하게 됩니다.

부모에서 자식 클래스로 바로 넘겨주는 props라면 크게 불편할 것 없이 인자를 넘겨주면 되겠지만,

부모에서 자식으로 그 자식에서 또 다른 자식으로 등등 2중 3중으로 props를 넘겨받아야 하는 컴포넌트들이

존재한다면?? 뭐... 사실 별 신경 안 쓴다면 2중 3중으로 그냥 자식 컴포넌트들에게 전해주면 되지...

그게 그렇게 중요한가? 할 수 있습니다. 하지만 이렇게 넘겨받아야 하는 컴포넌트들이 정말 많다면?

그리고 그중 무언가 잘못되어서 수정에 들어가야 한다면? 이러한 코드들을 일일이 다시 변경한다는 게

여간 까다롭고 귀찮은 일이 아닐 것이며, 그중 하나라도 작동을 하지 않는다면 버그를 찾느라 아까운 시간을

허비하기 일쑤 일 것입니다. 그렇기에 useContext를 어떻게 사용하는지 알아두시면 정말 좋습니다.

어디서나 이러한 특정 값, 함수들을 사용하고 변경할 수 있다면?? 정말 편하지 않을까요?

 

자 그럼 사용하는 방법을 간단히 알아보도록 하겠습니다.

 

 

2. 사용 방법?

 

사용 방법은 처음엔 조금 난해 할 수 있습니다. 흠... 난해하다기보다는 조금 복잡해 보일 수 있다는 게 더 맞을 듯싶네요.

아래의 코드를 보시죠.

 

import { createContext, useState } from 'react';

export const TestContext = createContext({
  name: '',
  setNameHandler: (name: string) => {},
});

const TestContextProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [name, setName] = useState('');

  const setNameHandler = (name: string) => setName(name);

  return (
    <TestContext.Provider value={{ name, setNameHandler }}>
      {children}
    </TestContext.Provider>
  );
};

export default TestContextProvider;

 

 

자 이게 가장 기본적인 useContext의 예제이지 않을까? 생각합니다.

기본은 이렇습니다. createContext라는 훅을 사용하여 단일 export 할 수 있는 변수를 생성하고 그 안에

내게 필요한 변수 혹은 함수를 정해줍니다.

여기서 우리는 처음 가지게 될 값을 설정할 수 있습니다.

하지만 대부분 아래의 TestContextProvider에서 선언하는 경우가 많기에 기본 값으로 별다른 값을 선언하지 않을 수 있습니다.

하지만 필요에 따라서 얼마든지 값을 설정하고, 함수 안에 로직을 넣을 수 있습니다.

 

그 후 TestContextProvider를 생성해 줍니다.

저는 현재 typescript로 작성하여 함수의 이름 옆에 추가적인 type이 정해진 것일 뿐 자바스크립트로 작성하신다면

전혀 필요하지 않습니다. 대부분 props로는 children을 받지만 당연히 필요에 따라 얼마든지 추가 가능합니다.

그 후 안에 useState로 name과 setName을 설정하였습니다.

여기서 팁으로 TestContext에 선언된 name, setNameHandler와 같은 이름으로 변수와 함수를 작성하시는 게 편합니다.

그 이유는 아래의 return에서 찾아보실 수 있습니다.

 

retrurn에는 우리가 생성한 createContext를 사용하는 TestContext의 Provider를 사용한 것입니다.

이는 우리가 이미 로직을 위해 생성한 TestContextProvider와 다릅니다.

이 TestContext.Provider는 필연적으로 value를 필요로 합니다.

*value를 선언하지 않으면 에러가 뜰 것입니다.

이렇게 TestContext.Provider에 value로 name과 setNameHandler를 사용합니다.

*여기서 TestContext의 name, setNameHandler과는 다른 이름으로 TestContextProvider에 변수와 함수를 선언한다면,

value는 이렇게 바뀌게 됩니다.

 

import { createContext, useState } from 'react';

export const TestContext = createContext({
  name: '',
  setNameHandler: (name: string) => {},
});

const TestContextProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [firstname, setFirstName] = useState('');

  const setFirstNameHandler = (name: string) => setFirstName(name);

  return (
    <TestContext.Provider
     value={{ name : firstName, setNameHandler : setFirstNameHandler }}>
      {children}
    </TestContext.Provider>
  );
};

export default TestContextProvider;

 

불필요하게 길어집니다.

이미 ES6로 넘어오면서 번수와 함수의 이름이 동일하다면 별다른 key와 value를 구분할 필요 없이

변수의 이름만 적어주면 완전히 동일한 작업을 수행합니다.

이러하여 방금 위에서 가능한 TestContext의 key와 같은 이름의 변수 혹은 함수를 TestContextProvider에 선언하라고

한 것입니다. ES6에 관하여 더 궁금한 게 있으시다면 제 블로그 '초보 개발자'를 둘러보시거나 구글에게 물어보시면 됩니다.

 

자 그리고 마지막으로 children을 이용하여 줍니다.

그리고 마지막은 export default를 통하여 TestContextProvder를 export 합니다.

 

자 이렇게 하신다면 정말 다 끝났습니다.

 

자 그럼 이제 App파일로 이동하여 import 해주시면 됩니다.

아래와 같이 말입니다.

 

 

import TestContextProvider from './utils/context/TestContext';

const App = () => {
  return (
    <TestContextProvider>
      <div className='App'></div>
    </TestContextProvider>
  );
};

export default App;

*이제는 리액트를 사용할 때 import React from 'react';를 사용하실 필요가 없습니다.

당연히 useState와 같은 훅을 사용하실 때도

import {useState} from 'react';와 같이 사용하시면 됩니다.

 

방금 생성한 TesxtContextProvider를 가장 상위 컴포넌트로써 다른 컴포넌트들을 감싸줍니다.

이렇게 되면 우리는 이제 useContext를 사용할 준비가 완벽하게 되었습니다.

 

자 그럼 이제 어떻게 사용하는지 아주 간단하게 알아보겠습니다.

 

아래의 코드를 보시죠.

import { useContext } from 'react';
import { TestContext } from './utils/context/TestContext';

const Slider = () => {
  //const testContext = useContext(TestContext);
  const { name, setNameHandler } = useContext(TestContext);

  return <div></div>;
};

export default Slider;

 

자 이렇게  useContext를 사용하시면 됩니다.

그리고 우리가 생성한 TestContext를  import 해줍니다.

이때 우리는 2가지 방법으로 useContext를 사용 가능합니다.

첫 번째는 하나의 변수를 만들어주는 것입니다.

이렇게 testContext라는 변수를 만들어준다면 context라는 것을 강조할 수 있을 것입니다,

하지만 당연히 name 혹은 setNameHandler를 사용할 때 testContext.name 혹은

testContext.setNameHandler('Mike');와 같이 사용할 것입니다.

두 번째는 TestContext.Provider에서 명시한 value값을 그대로 사용하는 것입니다.

중괄호를 사용하면 얼마든지 json안의 요소를 직접 사용 가능합니다.

즉 const {name, setNameHandler} = useContext(TestContext); 이렇게 사용하는 것입니다.

그러면 필요할 때마다 즉각 name 혹은 setNameHandler('Mike'); 와 같이 사용 가능합니다.

 

 

3. 어디에 사용하면 좋은가?

 

이미 제가 앞서 소개하였듯이 props가 2중 3중으로 props가 넘겨받아져야 하는 상황에 사용하기 좋습니다.

또한 로그인 로그아웃같이 유저의 정보를 저장할 때도 좋습니다.

(이때는 세션과 같이 사용됩니다. 유저가 로그인하면 세션에 필요한 key값을 생성하고 페이지가 리로드 되거나 재시작되면

자동으로 서버에게 세션 값을 주고 유저의 정보를 받아온 뒤 context에 저장하여 언제 어디서든지 유저 정보를 보여주고 수정 가능하게 합니다.)

 

 

4. 마치며.

 

useContext는 정말 자주 사용됩니다.

이를 이용하면 코드 또한 믿을 수 없을 정도로 간결해지고 사용하기도, 수정하기도 좋아집니다.

예를 들어 어떠한 버튼을 눌렀을 때 전혀 다른 컴포넌트가 동작한다고 생각해봅시다.

이때 useContext가 없다면?? 서로 전혀 다른 컴포넌트가 서로의 props를 받을 때까지 

props는 다른 컴포넌트들을 통해 이어받아질 것입니다. 이 중 하나라도 빠트리거나 무언가 잘못된다면??

버그를 찾느라 애를 먹겠죠. 그렇기에 useContext 꼭 사용해보세요.

너무 좋습니다. 가끔 아... 이걸 어떻게 만들지??? 싶을 때 보면 useContext가 답일 때가 많습니다.

 

이렇게 봄이 왔네요. 시간이 정말 빠르게 가는 것 같습니다.

제가 블로그를 개설했을 때만 해도 정말 제 글을 보시는 분들이 계실까? 싶었는데, 많지는 않더라도 꾸준히 방문해주시는

여러분들 덕에 저도 하나라도 더 글을 작성하게 되는 원동력인 것 같습니다.

게시글이 들쑥날쑥한 게 흠이긴 하지만, 꾸준히 업데이트하도록 노력하겠습니다.

항상 도전하시는 게 정말 중요합니다. 현재의 상황에 만족하지 마시고 더욱더 한 발짝씩 앞으로 나아가시는

그런 여러분들이 되셨으면 좋겠습니다.

항상 건 강하식 힘내시고 용기 내시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.