Hook (useState, useEffect, useRef, useReducer ... )

 

 

https://ko.react.dev/reference/react/hooks

내장된 React Hook – React

 

 

---

useState

컴포넌트에 state 변수를 추가하고 상태를 관리하기 위한 hook

const [state, setState] = useState(initialState);

 

const[변수, set변수] = useState(초기값) 로

 

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

위의 setCount()처럼 setXXX로 값을 변경하면 react가 다시 rerendering해준당

useStae는 컴포넌트가 리렌더링될 때마다 최신 상태를 유지한다.

 

---

 

useEffect

외부 시스템과 컴포넌트를 동기화하는 hook

컴포넌트의 생명주기와 관련된 side effects를 수행

 

useEffect(setup, [dependencies]);

 

두번째 매개변수([])를 dependency라고 부르는데,

 

1. []를 주면 딱 한 번만 실행된다

2. []를 주지 않으면 매번 실행됨

3. [aaa]라고 하면 aaa값이 바뀔때만 실행

 

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

useEffect는 컴포넌트가 렌더링 된 후 실행되며

의존성 배열의 값이 변경될때마다 재실행된당

 

 

---

 

 

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

function Sumin8() {
    const [count, setCount] = useState(100);
    const [flag, setFlag] = useState(false);

    const handleChange = ()=>{
        setFlag(!flag);
    }

    const handleCount = ()=>{
        setCount(count+3);
    }

    useEffect(()=>{
        alert("누가 숫자를 조작했어용 지영???"); 
        document.title=`수민 ${count} 메롱`;
        console.log("useeffect");
    },[count]) 

  return (
    <div>
        <h1>윤호 화이팅{count}</h1>
        <button onClick={handleChange}>체인지</button> <br></br>
        <button onClick={handleCount}>까운뜨</button>

    </div>
  )
}

export default Sumin8

 

---

useRef

DOM 요소에 접근하거나

컴포넌트에서 변경 가능한 값을 유지하기 위한 hook

 

 

const ref = useRef(initialValue);

 

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

 

useRef는 .current 프로퍼티에 변경 가능한 값을 담고있는 상자와 같음

useRef로 생성된 객체는 컴포넌트의 전체 생명주기동안 유지됨

ref 값이 변경돼도 컴포넌트가 리렌더링 되지 않는당

 

---

 

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

function Sumin9() {
  const suminText = useRef(null); //값을 가리킬 수도 있는데 그렇게는 잘 안씀
  const suminText2 = useRef(null); 

  const [value,setValue] = useState("");

  const handleChange= (e)=>{
    console.log("수",e.target);
    console.log("민",suminText.current);
    setValue(suminText.current.value);
  }

  return (
    <div>
        <h1>유정 메롱</h1>
        <input type="text" ref={suminText} onChange={handleChange}  />        
        <input type="text" ref={suminText2} defaultValue={value} />        
    </div>
  )
}

export default Sumin9

 

 

 

---

useReducer

 

복잡한 상태로직을 관리하기 위한 hook

useState로 써도 되지만, 조금 복잡하거나 경우의 수가 많을 때 useState 대안으로 사용된당

 

 

 

const [state, dispatch] = useReducer(reducer, initialState, init);

 

state: 현재 상태

dispatch : 액션을 발생시키는 함수

reducer : 상태를 업데이트하는 함수

initialState: 초기 state가 계산되는 값

init: 초기 state를 반환하는 초기화함수 (선택)

 

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

 

 

 

 

---

 

import { useReducer } from 'react';

function reducer(count, action) {
    switch(action.type){
        case 'inc1':{
            return count+1
        }
        case 'dec1':{
            return count-1
        }
        case 'double':{
            return count*2
        }
    }
  }

function Counter2() {

    //useState 사용보다 조금 복잡하거나 경우의 수가 많을 떄 사용
    const [count, dispatch] = useReducer(reducer, 0);

    const unoInc = ()=>{
        dispatch({type:'inc1'});
    }


    const unoDec = ()=>{
        dispatch({type:'dec1'});
    }


    const unoDouble = ()=>{
        dispatch({type:'double'});
    }

  return (
    <div>
        <h1>또 낯설겠징{count}</h1>
        <button onClick={unoInc}>+</button>
        <button onClick={unoDec}>-</button>
        <button onClick={unoDouble}>x2</button>
    </div>
  )
}

export default Counter2