패스트캠퍼스 메가바이트스쿨 Day 30 (6주차 금요일) -React 공식문서 뽀개기 4 Hook

1. useState

  const [topic, setTopic] = useState([
    "남자코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
    "가리루",
  ]);

  const handleChange = () => {
    let newTopic = [...topic];
    newTopic[0] = "여자코트 추천";
    setTopic(newTopic);
  };

🚀 useState란?

• 변화되는 변수를 추적하고 싶을 때 사용함.
• 자바스크립트 최신 문법 중 구조분해할당이 있음. 데이터가 변할 때는 데이터바인딩을 새롭게 해주는 것
• 변하는 값은 무조건 state로 만들고, 초기값으로 배열이 들어가는 값의 변화를 주고 싶을 때는 spread operator를 통해 새로운 배열을 만들어 이용할 것. 초기 데이터를 손상시키지 않기 위해서
• spread operator는 (...)은 배열을 벗겨서 새로운 데이터주소값을 할당해주고, 거기에 배열을 씌우면 똑같지만 다른 주소값을 가진 배열을 만들어냄

🚀state 함수의 비동기성

• 왼쪽에 있는 것처럼 set 함수의 동일한 값을 하면 num+1을 순차적으로 3번 해서 return값이 4가 나오는 것이 아니라, num+1을 한 번 만 해줘서 2가 나온다. 이유는 같은 값이기 때문에 한 번에 인식을 함
• 따라서 그냥 setNum(num+3)을 해주던가, 오른쪽처럼 setter함수의 인자로 함수를 넘겨주면 됨.

---

2. useRef

const input = React.useRef(null);
const handleClick = () => {
	if(input.current) {
      input.current.value = '';
    }
}
return (
  	<div>
  		<input type="text" ref={input}/>
		<button type="button" onClick={handleClick}>Click to Reset
        </button>
  	</div>
  )

useRef란?

• element 자체를 통제하고 싶을 때 useRef를 사용한다. useRef를 조작하는 함수에는 current를 작성해서 불러와야하며, return 값에서 값을 입력하고 싶을 때는 {input}이런 식으로 작성을 해주면 된다.

---

3. useEffect

useEffect(()=>{실행함수}) // 렌더링 될 때마다 실행
useEffect(()=>{실행함수},[]) // 처음 렌더링 되었을 때만 실행
useEffect(()=>{실행함수},[state변수]) // 처음렌더링 및 state 변수가 변할 때 실행
useEffect(()=>{실행함수 return cleanup함수},[state변수])

🚀 useEffect는 어떨 때 사용하는가

• 처음 렌더되었을 때 실행하고,
• state 변수가 변할 때마다 실행하고 싶을 때는 dependency array를 실행하면 됨.
• 클린업함수는 이전에 useEffect로 실행된 실행함수를 삭제하고, 다시 실행함수를 하고 싶을 때 사용함.
  

clearInterval, setInterval를 활용한 실습

const Effect = () => {
  const [value, setValue] = React.useState("");
  const [times, setTimes] = React.useState(0);
  React.useEffect(() => {
    setTimes(0);
    const start = setInterval(() => {
      setTimes((prevTimes) => prevTimes + 1);
    }, 1000);
    const showAlert = setTimeout(() => {
      console.log(value);
      clearInterval(start);
    }, 3000);
    return () => {
      clearTimeout(showAlert);
      clearTimeout(start);
    };
  }, [value]);
  return (
    <>
      <input type="number" onChange={(e) => setValue(e.target.value)} />
      <span>{`${3 - times}초 남았습니다`}</span>
    </>
  );
};

• input창과 3초 남았다는 text가 나온다.
• input에 숫자를 입력하면 그 순간부터 3,2,1 숫자가 줄어든다.
• 만약 3초가 지나기 전에 input값이 수정이 되면 다시 3초부터 시작한다.
• 3초가 다 지나면 console창에 내가 입력한 숫자가 출력된다.
• 이 때 3초남았다는 text는 0초 남았습니다가 되면 멈춰야한다. (-1초,-2초 이런식으로 나오면 안된다)

---

4. useMemo / useCallback

🚀useMemo의 사용

• useMemo는 숫자가 바뀔 때 실행되는 함수가 1부터 2억까지의 loop를 도는 함수가 있다고 가정하면, 숫자 하나가 바뀔 때마다 loop를 계속 돌 때 시간이 딜레이가 된다. 이럴 때 큰 변수의 값을 통제하고 싶을 때 memoization 즉, 해당 loop을 통제하는 것. useEffect처럼 dependenyarray설정이 가능해서 해당 값이 바뀔 때만 loop을 돌릴 수 있음.
  
• useCallback은 usememo의 함수버전이라고 알고 있으면 된다.
  
• 프론트엔드가 이렇게 복잡한 계산을 다루는 일은 거의 없어서 사용을 잘 안함.

---

5. useContext

🚀 구조

• 원하는 값들의 목록을 변수화 해주고, 해당 변수의 있는 것들을
• Context.Provider안에 value를 부여하고, 해당 Provider사이에 요소를 넣으면 value 값을 적용받는다. 하지만 동일한 이름의 요소를 context로 감싸지 않는다면 export된 기본 스타일이 적용된다.

---

6. 기타

• useReducer
• useImperativeHandle
• useLayoutEffect
• useDebugValue