[React] 리액트 Hook 정리 - 2

Context Hook

리액트 컴포넌트 트리에서 컨텍스트 객체를 받아 현재 값을 반환하는 Hook 함수. 부모와 자식 컴포넌트 사이 중간 컴포넌트들을 건너뛰고 데이터를 전달할 수 있다. 즉, 전역적인 데이터를 공유할 때 쓴다. (UI테마 등)

만약 깊이가 깊은 컴포넌트나, 애플리케이션 내의 여러 컴포넌트들에 props를 전달해야 한다면, 일일히 넘겨주려면 코드 작성도 수정도 번거로울 것이다. context를 쓰면 단계마다 넘겨줄 필요 없이 한번에 여러 컴포넌트들에게 값을 공유할 수 있다.

 

-특징:

useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다.

 

-사용법:

선언: createContext(초기값)

컴포넌트: <Context명.Provider value={공유할 값}>

사용: useContext(Context명)

 

-사용 예:

중간 컴포넌트인 Library에 props를 전달하지 않고 바로 최하위 컴포넌트인 bookself에서 context로 공유된 데이터를 사용하는 예시 코드.

//최상위 컴포넌트

import { createContext } from "react";
import Library from "./library";

//컨텍스트 객체 생성
export const AppContext = createContext();

//데이터
const bookItems = {
  s800: [
    { name: "천 개의 파랑", author: "천선란" },
    { name: "디디의 일기", author: "한강" }
  ],
  s900: [
    { name: "2022 박물관학", author: "홍보라매" },
    { name: "총 균 쇠", author: "재레드 다이아몬드" }
  ]
};

export default function App() {
  return (
    <div className="App">
    //사용할 곳에 컨텍스트 컴포넌트로 감싸기
      <AppContext.Provider value={bookItems}>
        <h1>Context Hook</h1>
        <Library></Library>
      </AppContext.Provider>
    </div>
  );
}

//중간 컴포넌트

import React from "react";
import Bookshelf from "./bookshelf";

export default function Library() {
  return (
    <div>
      <h2>서가별 책</h2>
      <Bookshelf></Bookshelf>
    </div>
  );
}

//하위 컴포넌트

import React, { useContext } from "react";
import { AppContext } from "./App";

export default function Bookshelf() {
 //컨텍스트 객체 불러오기
  const books = useContext(AppContext);

  return (
    <div>
      <h3>800 문학</h3>
      {books.s800.map((item) => {
        return (
          <li>
            {item.name} - {item.author}
          </li>
        );
      })}
      <h3>900 역사</h3>
      {books.s900.map((item) => {
        return (
          <li>
            {item.name} - {item.author}
          </li>
        );
      })}
    </div>
  );
}

-실행:

---

Ref Hook

리액트에서 특정 DOM요소를 직접 가리킬 때 사용하는 Hook 함수. 자바스크립트의 getElementById()와 비슷한 역할이다.

리액트의 컴포넌트에 ref={ref명}을 넣어주면 해당 ref를 html의 id처럼 접근할 수 있다.

 

-사용법:

선언: const 변수명 = useRef(초기값)

컴포넌트에 ref 부여 시: <ComponentName ref={ref명}>

요소 접근 시: ref명.current로 접근

 

-사용 예:

//useRef 예시코드
import { useRef } from "react";

export default function App() {
  //객체 area 생성
  const area = useRef(null);

  //클릭 시 area를 포커싱
  const onButtonClick = () => {
  //area.current로 요소 접근
    area.current.focus();
  };

  return (
    <div className="App">
      <h1>Ref Hook</h1>
      //textarea 컴포넌트에 area연결
      <textarea ref={area}>
        useRef는 변경 가능한 ref 객체를 반환합니다.
      </textarea>
      <button onClick={onButtonClick}>포커싱하기</button>
    </div>
  );
}

-실행:

---

참고 자료

'리액트를 다루는 기술' - 김민준 저

리액트 공식문서