IT오류잡기17 [React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결) react를 사용할 때 useEffect로 초기 데이터를 불러올 시 loading 여부를 확인해야 합니다. List 페이지를 구현할 때 "데이터가 없습니다"가 뜬 다음 데이터가 뜨는 현상을 자주 겪었을 것입니다. 보통 loading 플래그를 사용해서 이를 해결했는데, 이 과정 없이 해결할 수 있는 방법이 useLayoutEffect입니다. useLayoutEffect 사용방법은 useState와 동일합니다. 차이점을 간략히 설명드리겠습니다. 예를 들어, useEffect(()=>{ setData("data"); }, [ ] } 이렇게 초기 함수를 선언해주면 data은 화면이 모두 띄운 후 작동하게 됩니다. 즉, "데이터가 없습니다"를 화면에 띄운 후 깜빡임으로 변하면서 "data"를 띄웁니다 하지만 us.. 2022. 11. 16. [React.js] useReducer, useState은 언제 사용 하는가? React 함수형 컴포넌트를 사용하면서 가장 많이 사용되는 useState가 있다 useReducer 등 여러 함수가 있는데, 차이점과 사용 용도를 공부하여 정리해 보았다. state를 관리하기 위한 함수 - useState, useReducer 대부분의 사람들이 useSate는 사용할 줄 안다. 하지만 useReducer은 무엇인가 ??????? 차이점은??? 인터넷을 찾아보면 useState 와 useReducer의 사용방법 등 예시가 많이 널려있다.(모든 블로그에 사용 방법이 친절히 설명되어있어 해당 블로그에서는 스킵한다.) 그래서 언제 useSate를 사용하고 언제 useReducer를 사용한다는 말인가? 글쓴이는 useSate와 useReducer를 언제 사용하는지 필자의 온전한 의견으로 설명하.. 2022. 11. 16. [React.js] yarn.lock / package-lock.json 파일을 혹시 .gitignore에 포함 하셨나요 ? 안녕하세요. 오늘 문득 yarn.lock 파일에 대해서 궁금하여 공부를 해 보았습니다. 1. yarn.lock / package-lock.json 파일은 왜 있는 건가요? 패키지 잠금 파일로 패키지 매니저 npm을 사용할 경우 package-lockjson 파일을 , yarn을 사용할 경우 yarn.lock 파일이 생성됩니다. 프로젝트의 패키지는 package.json에 모두 정의되어있습니다. 해당 파일에 패키지 이름과 버전이 나열되어있습니다. package.json에 보면 패키지 버전 앞에 ^ 혹은 ~ 혹은 아무것도 없는 경우로 나누어집니다. ^ 의미 : 해당 버전 이상 ~ 미만의 버전을 설치 (예를 들어 "^12.4.1" 이면 "12.4.1"이상 , "13.0.0"미만) 패키지는 끊임없이 버전이 변경.. 2022. 11. 15. [React js] input, textarea 글자 수 제한 안녕하세요. 고집프로그래머 입니다. 오늘 간단히 react에서 input이나 textarea 글자 수 제한 관련 포스팅 입니다. 정말 간단 히 "maxlength"만 추가해 주면 됩니다. 그럼 이 이상 작업 되도라도 끝~! 추가로, 글자 수 표현하기 변수 (value) value.replace(//gm, "\n").length 하면 띄어쓰기, 엔터 등 모두 카운트 되도록 길이를 실시간으로 변화하는 값을 볼 수 있습니다. 감사합니다. 2022. 7. 7. 이전 1 2 3 4 5 다음