Frontend/React19 [ 리액트(React) ] useLayoutEffect, useEffect의 차이점 실험으로 쉽게 알아보기 📍 useLayoutEffect, useEffect의 차이점 알아보기 react를 사용할 때 paint screen 단계 이후 즉, 컴포넌트가 화면에 렌더링 된 이후 사이드 이펙트(side Effect) (여기서 말하는 사이드 이펙트는 컴포넌트 내에서 데이터 가져오기, 구독 설정하기, 수동으로 컴포넌트의 DOM을 조작하는 작업 등을 말한다.)를 비동기적으로 호출할 때 주로 useEffect를 사용한다. (아래 사진은 github에서 가져온 hook-flow 사진인데, `flow`를 한눈에 알 수 있어서 가져와봤다.) 다시 본론으로 돌아가서 화면에 state의 값이 바뀌어서 화면이 깜빡이거나 DOM을 호출하기 전에 무언가를 변경하고 싶을 때는 어떻게 해야 할까? paint screen 단계 이전 즉, 화면.. 2021. 8. 19. [ 리액트(React) ] Object value에 NaN값이 있는지 확인하는 함수 만들기 📍 Object value에 NaN값이 있는지 확인하는 함수 만들기 처음에 NaN 값을 확인하기 위해 in, ===, !=를 사용했는데 판별이 되지 않았다. 왜 그런지 MDN공식문서에서 찾아보니까 NaN 판별은 비교 판별 대신 isNaN() 혹은 Number.isNaN() 내장함수로 판별해야 한다고 나와있었다. (⭐️ 공식문서의 중요성 ⭐️) isNaN, Number.isNaN()은 둘다 NaN을 판별하는 함수이지만 순서가 조금 다르다. isNaN(): 현재 값을 숫자로 변환하고 NaN 판별 Number.isNaN(): 현재 typeof => Number && 값이 NaN 일때만 판별 이를 바탕으로 key:value 형태로 이루어진 객체에서 isNaN, Number.isNaN() 함수를 사용하니까 정확한.. 2021. 6. 28. [ 리액트(React) ] console 창에 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때 📍 console 창에서 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때 병과 테스트 프로젝트를 잘 진행하고 있다가 갑자기 console 창에 Warning이 떴다. 구글링을 해보니까 nfl/react-helmet#548, nfl/react-helmet#623 에 비슷한 글이 있었는데 원인은 strict mode에서 UNSAFE_componentWillMount를 사용하는 것은 권장하지 않고 가끔 버그를 일으킬 수 있다는 내용이었다. 해결방법을 찾아보니 보통 React-helmet 버전이 ^6.0.0 이하에서 많이 발생한다는 내용이 대다수였다. 하지만.. 2021. 6. 16. [ 리액트(React) ] Key:Value형태인 Object에 map 함수 사용하기 📍 Key:Value형태인 Object에 map 함수 사용하기 다음 과목:점수 형태인 Object에서 map 함수를 사용할 때 3가지 방법이 있다. Object.entries: array 형태로 [key, value]를 반환한다. 주의 할 점은 반환 시 객체의 순서를 보장하지 않으므로 정렬을 먼저 하고 나서 사용하는 것을 권장한다. (Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));, 출처: MDN) Object.keys: key만 반환한다. Object.values: value만 반환한다. const subjects = { math: 90, english: 100, science: 80 }; // idx는 index 번호를 반환하고 따로 명시.. 2021. 6. 8. [ 리액트(React) ] 구조분해할당 시 변수 이름 변경하기 📍 구조 분해할당 시 변수 이름 변경하기 구조분해할당(Destructuring_assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다. (출처: MDN) 예를들어 information 객체(object)가 alert 함수에 인자(parameter)로 넘어가는데 이때 비구조할당으로 인자를 표현해보자. 다음과 같이 표현 될 수 있다. // parameter: Object information = { name: 'AYW', age: 27, address: 'DongTan', } // alert Function const alert = ({ name, age, address }) => { return {name, age, address} } // dec.. 2021. 6. 1. 이전 1 2 3 4 다음
