React with Next (TS) useState() 사용법 , 의존성 배열

늭시 공부 정리할거 

 <Input value={descriptionKey} placeholder='비~밀'
              onChange={(e) => setDescriptionKey(e.target.value)} 
              />
              
대신에

<Input value={descriptionKey} placeholder='비~밀'
              onChange={onChangeModalInput} 
              />

 

onChange에 이벤트를 바로 걸어버리면 
리액트는 비동기식 렌더링으로 처리하기 떄문에 타점을 정확히 지정해줄 수 없음

그래서 하단에처럼 onChange 이벤트를 밖으로 빼줘서

  const onChangeModalInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const {value} = e.target;
    console.log(value)
    setDescriptionKey(value);
  }, [setDescriptionKey])

 

이렇게 따로 관리해줘야함
또한 마지막 , []) 여기에 , 컴포넌트 밖에서 가져온 것들을 넣어줘야함 
이게 바로 의존성 배열 <- 이거 더 공부해서 정리하기 


 뭔가를 콘솔 찍어볼때 

  useEffect(() => {
    console.log(descriptionKey)
  }, [descriptionKey])

 

로 찍어줘야 여러번 렌더링 하는게 아니라 , 해당 부분에 뭔가 생겼을때 렌더링할 수 있음 

더 공부해서 포스팅하기 >ㅁ< 

 

  // 의존성 배열
  // const onClickCreateKeys = useCallback(() => {

  // }, []);