30부부 클럽

안녕하세요

초보 코더입니다.

이번에는 useRef를 알아볼건데요.

코드는 아래와 같습니다.

import React, { useRef } from "react";

export default () => {
  const potato = useRef();
  setTimeout(() => potato.current.focus(), 5000);
  return (
    <>
      <div>hello</div>
      <input ref={potato} placeholder="what your name"></input>
    </>
  );
};

potato 변수에 useRef를 사용하고.

input 태그에 ref를 연결해줍니다.

(useRef는 document.querySelector()와 같습니다.

potato 변수 밑에 setTimeout 함수를 넣어서 potato(input태그)가 5초뒤에 포커스 되는 것을 넣었습니다.

렌더링 시작 후 input 태그에 focus가 없지만 5초뒤에는?!

자동으로 포커스가 됩니다!!

쉽죠!?

안녕하세요.

초보 코더입니다.

이번에는 useReducer에 대하여 알아볼건데요..

저도 어렵네요.

우선 배운 코드는 아래와 같습니다.

import React, { useReducer } from "react";

const INCREMENT = "increment";
const DECREMENT = "decrement";

const reduceFunction = (state, action) => {
  if (action === INCREMENT) {
    return { count: state.count + 1 };
  } else {
    return { count: state.count - 1 };
  }
  
  // switch (action.type) {
  //   case INCREMENT:
  //     return { count: state.count + 1 };
  //   case DECREMENT:
  //     return { count: state.count - 1 };
  //   default:
  //     throw new Error();
  // }
};

function App() {
  const [state, dispatch] = useReducer(reduceFunction, { count: 0 });
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => dispatch(INCREMENT)}>increment</button>
      <button onClick={() => dispatch(DECREMENT)}>decrement</button>
      
    <!--<button onClick={() => dispatch({ type: INCREMENT })}>increment</button>
    <button onClick={() => dispatch({ type: DECREMENT })}>decrement</button> -->
    </div>
  );
}

export default App;

reduceFunction에서 if문과 switch문과는 동일한 내용입니다.

function App에서 useReducer을 사용하는데요. 

여기서 받는 인자 2개에서 앞에는 fn을 뒤에는 state 초기값으로 보시면됩니다.

그리고 useReducer가 실행될때 첫번째 받은 함수(reduceFunction)이 실행되면서 버튼onClick에 있는 dispatch함수가 같이 실행이됩니다. dispatch함수 내 인자를 받게되는데요.

해당 인자가 if문(또는 swich문)에서 조건으로 작용하여 state를 바꾸게 됩니다.

그럼 +1 또는 -1이 됩니다!!

끝!