본문 바로가기

React

React의 setState 업데이트가 꼬일 때, 함수형 업데이트를 써야 하는 이유 React 에서 상태(state) 를 업데이트 할 때 setCounter(count + 1); 로 상태를 업데이트 할 수 있지만, setCounter((current) => current + 1); 처럼 함수형 업데이트를 사용하는 것을 더 권장한다. 왜냐하면 이 방식이 더 상태를 업데이트할 때 안전한 방식이기 때문이다.setCounter(counter + 1); 보다 setCounter((current) => current + 1); 이 더 안전한 이유는 React 의 상태 업데이트 방식 때문이다. 1. 비동기적인 상태 업데이트 React에서 useState의 setState 함수는 비동기적으로 실행된다.즉, 여러 개의 setCounter 호출이 있을 때, 예상과 다르게 이전 값이 덮어 씌워질 가능성이 .. 더보기
[React ] input 컴포넌트 분리하기 중 에러 / Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of `ForwardRef(_c)`. Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of `ForwardRef(_c)`. 번역하면,  경고: 함수 구성요소에는 참조를 제공할 수 없습니다. 이 참조에 액세스하려는 시도는 실패합니다. React.forwardRef()를 사용하려고 하셨나요? `ForwardRef(_c)`의 렌더링 방법을 확인하세요.  구조를 보면 다음과 같다.   회원가입 폼(JoinForm.jsx)에서 input이 많아 불필요한 렌더링이 계속해서 발생하는 것이 비효율적이라고 .. 더보기