TIL 220823 클린코드 + React에서 map에 key가 필요한 이유

클린코드

함수를 작성할 때 함수는 한가지 일만 하도록 작성하는 것이 좋고, 함수 안에서 let으로 임시변수를 선언한 뒤 계속해서 값을 재할당 해 사용하는 것은 직관적이지 않고 유지보수가 힘들다. let의 유혹을 떨쳐버리고 const를 사용하는 습관을 들여야한다. 그리고 값을 변수에 담아 리턴하기 보다는 함수 자체에서 리턴 되도록 하는 것이 좋다.

 

eqeq(==)사용을 줄이고 eqeqeq(===)를 써야한다. ==를 사용하면 암묵적인 형변환이 되기 때문에 원치않은 결과를 발생시킬 수 있다. ==와 ===는 큰 차이가 있다. (참고 사이트 확인) 개발을 혼자하는 것이 아니라면 지켜서 사용하는 것이 좋다.

타입이 다를 때 비교를 해야한다면 JS가 암묵적으로 형변환을 하게 두기보다 개발자가 명시적으로 형변환을 해서 ===를 사용하는 편이 좋다. 

Number(ticketNum.value) === 0

// DOM에서 value를 가져올 때 이렇게 가져오는 방법도 있음
ticketNum.valueAsNumber === 0

참고

 

 

!!를 사용하면 불리언타입으로 변환된다.

!!'string' // true
!!'' // false

 

parseInt를 사용할 때 두번째 인자에 몇진수 인지 넣어주는 것이 좋다. 10진수가 나오기를 기대하지만 10진수가 기본값은 아니기 때문에 혹시 발생할 오류를 줄일 수 있다.

// Bad
parseInt(9.999)

// Good
parseInt(9.999, 10)

 

isNaN은 검사를 뒤집어서 하는 꼴이기 때문에 헷갈릴 수 있으며 검사결과에 문제가 많다. 그래서 ES2015에 나온 Number.isNaN으로 검사하는 것이 좋다. Number.isNaN은 isNaN보다 엄격한 검사를 한다.

// Bad
isNaN(123 + '테스트') // true

// Good
Number.isNaN(123 + '테스트') // false

---

React에서 map을 쓸 때 key가 필요한 이유

공식문서

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

 

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 ID를 key로 사용한다. 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다. 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용한다.

 

Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

 

아티클

key는 리액트가 DOM 엘리먼트를 식별하기 위해 사용하는 유일한 값이다. 인덱스를 key로 사용하면 아이템을 리스트의 중간에 넣거나 뺐을 때 문제가 발생하며 예측할 수 없는 결과를 초래할 수 있다. 참고의 링크에서처럼 아이템이 위에서부터 추가되어야하는데 인덱스를 key로 사용하면 원치않는 결과가 나온다. 참고

key를 위해 Nano ID라는 유니크한 id값을 만들어주는 플러그인을 사용할 수도 있다. 하지만 구성 요소 렌더링에서 직접 사용하는 것은 좋지 않다고 공식문서에 나와있다.

리스트나 리스트아이템이 절대 계산되거나 바뀔 일이 없거나, 리스트 아이템이 id가 없거나, 리스트가 절대 재정렬되거나 필터링 될 일이 없을 때는 인덱스를 key로 사용해도 된다.