React17 [Trouble Shootings #1] React - 콜백 함수 내부에서 여러 setState 함수 호출 시 업데이트 순서 에러 얼마 전 회사에서 작업을 하다가 onClick 같은 이벤트 핸들러 (콜백 함수) 내부에서 두 가지의 setState (setter) 함수를 호출시키는 작업을 했던 적이 있습니다. 사실 함수는 하나의 일만 수행하는 것이 기본적인 원칙이라 많이 들어서 제가 올바르게 코딩을 한 것 같지는 않았습니다. 하지만 의식의 흐름대로 하다 보니깐 그런 작업이 일어났는데 업데이트 순서에 대한 에러가 발생하였습니다. 아무래도 당연한 것이 useState 훅으로부터 반환되는 setter 함수는 비동기적으로 발생하는 것으로 알고 있습니다. 그래서 업데이트 순서가 제 생각대로 올바르게 동기식으로 이뤄지지 않는 것입니다. 구글링 해본 결과 즉시 실행 함수를 이용해서 각각 호출하면 된다 라고 하였지만 제 경우는 해결이 안되었습니다... 2022. 9. 17. [World Article #7] You no longer need to import React from 'react' - by dhondup 과거에 리액트 코드를 작성할 때는 항상 import react from 'react' 를 최상단에 작성하는 것이 default였습니다. JSX가 React의 React.createElement 메소드를 사용해서 일반 JS로 변환되기 때문입니다. 하지만 React v17 부터는 자동적으로 리액트가 JSX를 변환시켜줍니다. (구형 버전에서도 이제는 자동 변환해준다고 합니다) 기존의 createElement 메소드보다 성능적인 이슈를 해결해주고 좀 더 단순화시켜준다고 합니다. 단, React에서 제공하는 훅이나 기본 기능을 사용하기 위해서는 react를 import 해야합니다. [You no longer need to import React from 'react'] - dhondup [New JSX Trans.. 2022. 5. 3. [회사 제안 #5] 리액트 라이브러리 - react-hook-form React에서 로그인이나 form의 여러 input 요소들을 처리할 때 여러 이벤트를 달면서 input 요소 하나 하나 useState 훅으로 덕지덕지 추가하면 이후에 관리하기가 너무 불편해집니다. 대안으로 보통 input 태그의 name 속성을 활용하여 useState 하나로 name들의 묶음으로 객체 형태로 초기화시켜서 처리하는데, validator 등 여러 파일들을 분리해서 하나 하나 만들어서 또 관리해야합니다. 그래서 form 관련해서 여러 react library들이 있는데, react-hook-form이 최근에 제일 잘나가는 것 같습니다. 여러모로 장점들이 많은데, 코드가 직관적이고 간결하며, 불필요한 리렌더링 최소화, ts 지원 etc. 그때 그때 상황에 따라 form을 어떻게 처리할지 조금.. 2022. 5. 1. [회사 제안 #4] 리액트 라이브러리 - recoil recoil 이라고 하는 React 기반 state management library 입니다. 2년 전에 페이스북 엔지니어들에 의해 개발되었는데, useState 훅스를 사용하는 것처럼 코드들이 함수형 컴포넌트를 사용하는 리액트 훅스같은 느낌이 들고 러닝 커브도 적고 코드가 상당히 간결합니다. (setup 시간 소요 x) 캐싱도 지원하고 suspense, 동시성 지원, 미들웨어 필요없음 등 여러 특징이 있다고는 하는데 나중에 기회되면 한 번 써봐도 재밌을 것 같습니다. [Reference] - How to Use Recoil for State Management in Your React Projects 2022. 5. 1. 이전 1 2 3 4 5 다음 반응형