REACT (3) 썸네일형 리스트형 8/19 - 개 XX와 0개 XX 의차이 "0개 아이템을 찾았습니다." "개 아이템을 찾았습니다." 위 두 문구의 차이는 올바른 값에 대한 처리를 어떻게 했는지에 대한 차이이다. 전자는 '갯수' 필드에 `null`이나 `undefiend`값을 허용하지 않고 0을 사용한 경우라 할 수 있다. 후자는 그대로 값을 사용해서 ''값이 노출된 경우라고 볼 수 있다. 이는 보통 로딩바 없이 기본값을 null이나 undefined로 설정한 경우에 주로 발생하게 된다. 이런 부분들은 프론트 개발자가 아니라면 인지하기 어려운 부분이기 때문에 null값을 사용할 때에는 이런 부분들을 신경써서 개발하는 것이 사용자 경험에 좋다. React에서 잘못된 랜더링 조건문을 작성하는 경우 React에서 인라인 조건문을 삼항식 대신에, && 연산자를 사용하여 표현하는 경우가 있다. 위의 코드에서 의도 했던 동작은, 리스트의 길이가 0보다 클 때 Count를 반환하고, 0이면 아무것도 반환하지 않는 것이다. 하지만 실제 실행결과는 리스트의 길이가 0인 경우에, '0' 자체가 랜더링되게 된다. 분명 React에서는 일반적으로 거짓으로 취급되는 몇몇 값들이 반환될 경우에는, 랜더링을 하지 않는다. 그러나 숫자 0은 예외적으로 그대로 랜더링하게 된다. 그렇기 때문에, 위와 같은 코드를 사용해서는 안된다. 위의 코드는 ' > 0 '을 추가하여 의도한 대로 코드가 동작될 수 있도록 하였다. 이처럼 &&연산자를 사용하여 인라인 랜더링 조건문을 작성할 때에는 앞의 조건식이 boolean을 반환하도록 하는.. mobx 6 출시와 변경된 점 9월일에 mobx 6.0이 출시되었다. mobx 6 요약 ECMAScript에 적합한 라이브러리 & Proxy (모던브라우저) 및 비 Proxy (ES5) 동시지원 mobx가 데코레이터를 버리는 이유 가장 큰 이유는 데코레이터가 현재 표준으로 지정되어 있지 않은 점이다. 그렇기 때문에, 데코레이터를 사용하려면 복잡한 설정이 꼭 동반된다. 예를 들면 create-react-app로 프로젝트를 생성한 경우에는 순정상태로 사용할 수 없고 eject를 통해서 설정을 해줘야한다. 또한 비표준 데코레이터를 버림으로써, 추후에 등장할 표준 데코레이터(?)를 잘 지원할 수 있고, 당장은 비지원으로 인한 코드 용량 절감을 들 수 있다. mobx 6 With ES5 기존에는 IE를 지원하는 프로젝트에서는 mobx 5를 사.. 이전 1 다음
