리액트 useState - 셀프 개발자 코딩 부트캠프

import React, { useState } from 'react';
 
function App() {
 let [number, setNumber] = useState(0);
 
 const onIncrease = () => {
  setNumber(number + 1);
 }
 
 const onDecrease = () => {
   setNumber(number - 1);
 }
 
 return (
   <div>
     <h1>{number}</h1>
     <button onClick={onDecrease}>-1</button>
     <button onClick={onIncrease}>+1</button>
   </div>
 );
}
 
export default App;

useState를 사용하면 두 개의 값이 튀어나온다. 내가 설정한 초기값을 갖는 변수(number)와 그 변수를 세팅할 수 있는 함수(setNumber)가 나온다. button을 클릭해서 버튼을 클릭해서 onIncrease, onDecrease 가 실행되면 setNumber 가 실행되면서 number가 변하고 다시 렌더링 된다. 그냥 number 변수를 바꿔도 메모리상에 있는 숫자는 변하는데 다시 렌더링 되지는 않는다.

import React, { useState } from 'react';
function App() {
let [number, setNumber] = useState(0);
 
return (
  <div>
    <h1>{number}</h1>
    <button onClick={() => setNumber(number - 1)}>-1</button>
    <button onClick={() => setNumber(number + 1)}>+1</button>
  </div>
);
}
export default App;

위 소스는 함수를 없애고 이렇게 쓸수도 있다.

내부가 어떻게 생겼는지 궁금해서 조금 찾아봤다.

https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js

https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react-reconciler/src/ReactFiberHooks.new.js

리액트에서 구경한 소스들이다.(슈퍼 개발자들이 만든 거라 그런지 뭔 말인지 하나도 모르겠고 존나 복잡하다..) 모든 소스를 다 본 게 아니고 함수 이름으로만 대충 찾은 거라… 이게 아닐 수도 있다 ㅠㅠ.. 깃허브가 함수 추적 기능이 생겨서 다운로드하지 않아도 보기 편하다. 코드를 구경하면서 몇 가지 알아낸 점을 소개하자면.. 

# useState 초기화에 함수 넣기

import React, { useState } from 'react';
 
function App() {
 const getRandomNumber = ():number => {
   return Math.floor(Math.random() * 10);
 }
 
 let [randomNumber, setRandNumber] = useState(getRandomNumber);
 
 return (
   <div>
     <h1>{randomNumber}</h1>
     <button onClick={() => setRandNumber(getRandomNumber())}>Update Number</button>
   </div>
 );
}
 
export default App;

useState함수를 초기화할 때 바로 함수를 넣어도 된다. 아직 리액트 꼬꼬마라 잘은 모르겠지만 쓰임새가 있을 수도..


# 제너릭

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

useState함수가 요런 식으로 되어 있는데 <S>를 넣을 수 있게 되어있다. 제너릭을 사용할 수 있기 때문에 useState를 사용할 때 아무 타입 변수나 쑤셔 넣을 수 있다. 검색해보니 자바스크립트에서는 제너릭이 원래 되지 않는 것 같다. 뭔가 라이브러리를 썼거나 리액트에서 구현했으려니 했다. 아무튼 타입 스크립트에서는 제너릭을 사용할 수 있으니 잘 활용하면 될 듯..

 

https://jinibh.tistory.com/709

리액트 타입스크립트 - 셀프 개발자 코딩 부트캠프