2021년 11월 둘째주 WIL

ESLint

"Jsx-a11y/anchor-is-valid"

<a/> 태그에 기본적으로 href가 들어있어야 적합하다 판단하며, href=# 의 형태 역시 하이퍼링크의 임무를 수행하기에 적합하지 않다고 인식을 해서 오류메세지를 개발자에게 전달해주는 속성이다.  기본값은 true 이며 eslint 파일의 rules 키 부분에 "Jsx-a11y/anchor-is-valid":0 을 추가하면 <a/> 태그에 더이상 href를 넣지않아도 경고 메세지가 보여지지 않는다.

false 값으로 설정해둔다고 해서 딱히 개발하는데 문제될 것 같은 속성이 아니기에 앞으로 쭉 false로 선언하고 시작할 듯하다.

"@typescript-eslint/no-unused-vars"

선언 되었으나 사용되지않는 변수가 있으면 알려주는 규칙이다. 기본값은 마찬가지로 true이며 아마 무조건 걸리게될 규칙이기 때문에 경고 메세지가 상당히 거슬린다면 false로 설정 해두고 개발을 시작하는것이 좋을 것 같다.

 

Sort 함수 성질

작업 중에 useState에 담긴 특정 데이터의 리스트를 오름차순, 내림차순으로 정렬을 해야할 필요가 있어서 원본값을 sort시키고 새로운 변수에 할당시킨다음 setState인자에 담아서 렌더링을 의도했으나 잘 되지 않았다.

// 예시 코드

const [example, setExample] = useState([]);

const let temp = example.sort((a,b) => {
	if(a > b) return 1;
	if(a === b) return 0;
	if(a < b) return -1;
    })
    
setExample(temp);

원인은 sort 함수가 원본값을 변형시킨다는 성질이 있어서 였던 것 같다.

배열은 원시타입이 아닌 참조타입이기 때문에 다른 변수값에 할당해도 복사가 아닌 서로 같은 참조값 주소를 공유한다.

따라서 위 temp는 example 원본 값이 변형된(sort) 참조 주소를 할당받게 되었고, 바뀐 원본 값(sort된 example)과 새롭게 업데이트 시키려는 temp 값은 결국 같은 값을 가지는 셈이 되었다.

 

리액트에서 setState를 활용해 상태를 업데이트할때 원본 상태의 불변성을 유지시키면서 상태를 변화시켜야 리액트에서 기존값과 변화된 값의 차이점을 비교하며 변화를 감지하고 리렌더링이 이루어 져야 하지만 앞서 이야기 했듯이 이미 원본값을 바꿨고(sort를 통한 변형) 새롭게 업데이트 시키려는 temp 라는 변수는 바뀐 원본의 참조값을 똑같이 할당받았기 때문에 둘의 차이를 감지하지 못하고 렌더링되지 않았던 것 같다.

 

불변성을 유지시키는것이 매우 중요하다는 것을 이번 경험을 통해 더 직접적으로 깨달을 수 있었다.

 

 

SASS(SCSS)

- SASS & SCSS 차이

• SASS는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 { }로 범위를 구분한다.

// SASS
.div
  width: 100px
  display: flex
  div
    color: red
    &:last-child
      margin-right: -10px

// SCSS
.div {
  width: 100px;
  display: flex;
  div {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

- MixIn : 재사용 가능한 속성을 만들 때 사용한다. 하나의 속성을 개발자 의도대로 커스터마이징해두고 필요할때마다 가져다 쓸 수 있는 기능을 제공함

// SCSS mixin 예시

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px) }

평소 styled-conponents 만 사용하던중에 회사 코드에 SASS가 사용되어있길래 궁금해서 검색해봤는데 역시나 굉장히 내용이 깊다. 따로 포스팅하는 기회를 만들어둬야겠다.

 

 

 

참고

https://velog.io/@_seeul/React-React%EC%9D%98-state%EA%B0%80-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

React | React의 state가 불변성을 가져야하는 이유