Frontend/React18 [ 리액트(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. [ 리액트(React) ] 객체 내의 객체(이중객체)를 구조분해할당 하기 📍 객체 내의 객체를 구조 분해 할당(Double Destructuring Assignment) 하기 만약, A학생의 성적표와 기타 점수를 갖고있는 객체(Object)가 있다고 가정해보자. 그리고 alert 함수에서 DEFAULT_SCORE를 인자로 받고, 이때 subjects의 객체만을 구조분해할당을 하고 싶다면 다음과 같이 선언할 수 있다. // @ param { Object } const DEFAULT_SCORE = { subjects : { korean : 80, math : 85, english: 80 }, etc : { attitude: 90, volunteer: 95 }, } const alert = ( DEFAULT_SCORE ) => { const { subjects: {korean, m.. 2021. 5. 29. 이전 1 2 3 4 다음
