React Hooks에 절대 안 취한다.

UseState 함수에 관하여

리액트의 useState 함수는 기본적으로 비동기 함수이다.

1. useState는 함수는 기본적으로 state가 리렌더링(didupdate) 될 때마다 실행되는 함수이다. 그러면 한번만 렌더링되게 할수는 없을까?

콜백 형태로 값을 넣는다.

const [names,seNames] = useState(()=>"leedongkyu");

2. 상태 값을 바꾸는 방법

콜백 함수를 사용한다.

setNum((previous)=>previous+1);

UseEffect 함수에 관하여

useEffect에서의 useEffect는 컴퍼넌트가 unmount(사라질 때)가 될 때 값을 return을 한다.

const Timer = (props)=>{
  useEffect(()=>{
  	const timer = setInterval(()=>{
    consloe.log("타이머 도는중");
    },1000);
  	return ()=>{
    	clearInterval(timer);
    	console.log("타이머 종료");
    }
  }
  return(<div><span>콘솔을 보거라</span></div>)
}

clearInterval()함수는 clearInterval()함수로 종료 시킬 수 있다.

UseRef의 변수관리

useRef(value)는 저장공간 객체 object{current:value}를 반환한다.
변수를 저장하는 역할 컴퍼넌트가 unmount가 전 까지 값을 유지할 수 있다. didupdate(렌더링) 할 때 값이 최신화 된다.

변수와 useRef의 차이점

변수는 렌더링시 값이 초기값으로 초기화된다.

 const ref = useRef(1);
 ref.current +=1; 
 let count = 0;
 count+=1;
// 재 렌더링 시 ref는 2 count는 0이 된다.

DOM요소 접근하기

function App() {
  const inputRef =useRef();
  useEffect(()=>{
    inputRef.current.focus();
    //console.log(inputRef);
  },[]);
  const login = ()=>{
    alert(`환영합니다 ${inputRef.current.value}!`);
    inputRef.current.focus();
  }
  return (
   <div style={{flexDirection:"row",textAlign:"center"}}>
      <input ref={inputRef} placeholder='username'></input>
      <button onClick={login}>로그인</button>
   </div>
  );
}

focus를 활용하여 렌더링시 입력에 focus 되도록 한다. 로그인을 입력후 alert을 발생 시키고 다시 입력에 foucus 되도록 한다.