[react] React Hook 2 (useContext, useRef)

📍 useContext

• 상태를 전역적으로 관리하는 방법을 제공함.
• useState Hook 과 함께 사용하면 깊이 중첩된 컴포넌트 간 상태를 더 쉽게 공유할 수 있음.
• 상태는 해당 상태에 액세스해야하는 스택의 가장 높은 부모 컴포넌트에서 보관되어야 함.

📍 Props drilling

 

 

• 컴포넌트3 에서 User 를 사용하려면, 
• 반드시 그 전에 있는 컴포넌트2에서 3으로 User 를 넣어줘야 제대로 3에서 User를 사용할 수 있단 말임. 
• 만약 10단계를 거쳐서 component 가 있다면,
• 10단계의 Props drilling 이 필요한 것임.
• --> 이러한 이유로, useContext 가 생겨남.

 

 

 

📍 useContext 사용해보기

import { createRoot } from "react-dom/client";
import { useState, createContext, useContext } from "react";

const UserContext = createContext(); // useContext 사용해보기.



function Component1() {
    const [user, setUser] = useState("Linux");
    const [user2, setUser2] = useState("test");
    return (
        <>
            <UserContext.Provider value={user2}>
                <h1>{`안녕 나는 ${user2} !`}</h1>
                <h1>{`안녕 나는 ${user} !`}</h1>
                <Component2 user={user}/>
            </UserContext.Provider>
        </>
    );
}

function Component2( {user} ){

    return (
        <>
            <h1>component 2</h1>
            <Component3 user={user}/>
        </>
    );
}

function Component3( {user} ){
    const user2 = useContext(UserContext);
    return (
        <>
            <h1>component 3</h1>
            <h2>{`Hello ${user} again!!`}</h2>
            <h2>{`Hello ${user2} again!!`}</h2>
        </>
    );
}

createRoot(document.getElementById('react4')).render(< Component1/>);

• import { createContext, useContext } from "react";
• const UserContext = createContext(); 
  
  • 처음에 UserContext 라는 변수를 useContext 를 사용한다고 선언한 것.
• <UserContext.Provider value={user2}>
      <Component2 />
  </UserContext.Provider>
  • 자동으로 Component2 에 Props 를 넣어서 전달하지 않아도 자동으로 component2에서 사용할 수 있게 됨.
  • 꼭! <UserContext.Provider> 로 감싸줘야함.
• const user2 = useContext(UserContext);
  • 사용할 때는 처음에 선언한 UserContext 라는 변수를 사용하겠다고 해주고 써야함.

 

---

 

📍 useRef

• state와 같이 어떠한 값을 유지하는 변수로써 사용됨.
• 다만, state와 다른 점은 렌더링이 발생하지 않는다는 차이가 있음.
• 자바스크립트의 querySelector 와 같이 Html DOM 요소에 접근하고자 할 때 사용됨.
• ---------------------------------------------------------------------------------------------------  
• 선언
  • const a = useRef(초기값);
• 저장은 객체로 저장된
  • {current : 초기값}
• 따라서 다음과 같은 형태로 사용됨.
  • a.current
• 원래 useState 를 사용할 때는, --> 렌더링 되면 값이 초기화가 됨.
• useRef 는
  • 값이 변해도 렌더링이 되지 않는다는 점.
  • 일반 변수와의 차이는 전 lifecycle 동안 값이 살아 있다는 점..
  • --> 컴포넌트가 살아있는 동안에는 값이 유지가 됨.

📍 방법 1 : useState 사용해보면?

useEffect( () => {
        setRenderValue(renderValue + 1);
        console.log(renderValue); // 여기 무한루프 돌음
    });

• 최초 렌더링 하면?
  • useEffect 훅이 동작을 함.
  • 의존성 배열을 생략하게 되면, 
    맨 처음에 랜더링 될 때, state 값이 변하게 됨. 
    setRenderValue 가 작동해서 --> renderValue 값이 변하게 되지.
    그러면 다시 렌더링이 작동하게 되는데, 
    그렇게 되면서 카운트가 무한루프를 돌게 되는 것임.
    

 

 

 

 

📍 방법 2 : 일반 변수로 사용해보면?

let cnt = 0;

useEffect( () => {
    cnt++;
    console.log(cnt); // 계속해서 1만 나옴.
});

• 여기서는 계속해서 1만 찍힐 꺼임.
• 일반 변수로 처리하면 값이 유지가 되지 않음., useState Hook을 사용해야 하니까...
• 이 코드에서는 
  input에 값을 넣을 때마다, 렌더링 되면서 --> 초기화 되고 --> cnt++ 되고. --> 이걸 계속 반복함.

 

 

📍방법 3 : useRef 사용해보기.

• 임포트는 ??
  • import { useRef } from "react"; 
• 선언하는 방법은 ??
  • const count = useRef(0); // { current : 0 } // 객체 형태로 보관됨.
• 꺼내서 쓰려면 ??
  • count.current = count.current +1;
• 
  • 같은 값을 찍는 건데, 왜 html에 출력되는 값과 콘솔의 값이 다른거지???
    • useRef는 값이 변해도 렌더링 하지 않아. 
      이 말인 즉, 최초에 이미 렌더링 됐을 때에 count에 값이 +1 되었겠지만. 
      그래서, 콘솔에서는 찍혔지만, html 상에서 반영이 되지는 않은 것임. 

 

 

📍 풀코드

import { useState, useEffect, useRef } from "react";
import { createRoot } from "react-dom/client";

function App() {
    const [inputValue, setInputValue] = useState("");
    const [renderValue, setRenderValue] = useState(0);
    let cnt = 0;
    const count = useRef(0); // { current : 0 } // 형태로 보관됨.

    useEffect( () => {
        // 방법 1 : useState 사용해본다면?
        // setRenderValue(renderValue + 1);
        // console.log(renderValue); // 무한 루프 돌음.
        /*  의존성 배열을 생략하게 되면, 
            맨 처음에 랜더링 될 때, state 값이 변하게 됨. 
            setRenderValue 가 작동해서 --> renderValue 값이 변하게 되지.
            그러면 다시 렌더링이 작동하게 되는데, 
            그렇게 되면서 카운트가 무한루프를 돌게 되는 것임.
        */
        
        // 방법 2 : 일반 변수로 사용해본다면?
        // cnt++;
        // console.log(cnt); // 계속 1만 나옴.

        // 방법 3 : useRef 사용해본다면?
        count.current = count.current +1;
        console.log( count.current );
        /*  useRef는 값이 변해도 렌더링 하지 않아. 
            이 말인 즉, 최초에 이미 렌더링 됐을 때에 count에 값이 +1 되었겠지만. 
            그래서, 콘솔에서는 찍혔지만, html 상에서 반영이 되지는 않은 것임. 
        */ 
    });
    
    return (
        <>
            <p>값을 입력해보시요.</p>
            <input type="text" value={inputValue} 
                onChange={(e) => setInputValue(e.target.value)}/>
            <p>렌더링 횟수 : {count.current}</p>
        </>
    );
}

createRoot(document.getElementById('react4')).render(<App />);

 

 

 

 

📍useRef 의 다른 기능!! 

• 특정 태그를 찾아내는 기능도 할 수 있음. 
• 직전 값 저장하는 기능도 있고!! 
• inputValue = 현재 state (이번 렌더 값)
• a.current = 직전 값 (useEffect가 다음에 저장)

import { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";

function App() {
    const [inputValue, setInputValue] = useState("");
    const a = useRef();

    useEffect( () => {
        a.current = inputValue;
    }, [inputValue]);

    const focusInput = () => {
        a.current.focus();
    };

    return (
        <>
            <input type="text" value={inputValue} ref={a} onChange={ (e) => setInputValue(e.target.value) } />
            <h2>현재 값 : {inputValue}</h2>
            <h2>직전 값 : {a.current}</h2>

            <button onClick={focusInput}>input 박스에 포커스 주기</button>
        </>
    );
}

createRoot(document.getElementById('react4')).render(<App />);

•  

 

---

 

 

출처 : 

[왕초보 홈페이지만들기 리액트 기초]

https://www.youtube.com/watch?v=-jutG7mmFK0&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=39

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.