react dataset, immutable

2021.08.01 8월의 시작과 함께 짧은 생활코딩 react 강의는 끝이 났습니다.

간단한 CRUD 기능을 구현하고 마무리 짓는 강의이기에 더 디테일한 내용은 따로 찾아봐야 할 것 같습니다.

오늘은 생활코딩 react 수업에서 언급한 dataset과 immutable에 대해서 따로 찾아 보고 정리해보려합니다.

 

 

1. dataset이란

 

dataset은 HTML 표준에 정의된 기능입니다. DOM요소에 값을 저장하고 Javascript 코드로 값을 읽어들일 수 있습니다.

사용법은 이렇습니다. ' data- ' 를 시작으로 이름을 지정하면 됩니다   ex) data-user-name, data-contents-id

Javascript에서 dataset을 읽어들이게 되면 data-는 제거 되고 카멜케이스로 변경됩니다.

data-user-name -> {Javascript} -> userName

 

어디에 dataset을 이용할까 고민해보고 검색도 해봤습니다.

data라는 state에 저장된 값들마다 onClick 이벤트가 생성되는 상황을 예로 들면

data의 길이가 길어 질 수록 계속해서 메서드가 생성될 수 있습니다.

이때 dataset을 이용하면 이 문제를 해결 할 수 있습니다.

(더 정확한 이해를 위해 추후에 더 공부해야 할 듯합니다.)

 

 

2. immutable

 

리액트를 사용할 때 컴포넌트의 state를 변경해야 할 땐, 무조건 setState를 통해서 업데이트 해주어야 합니다. 

업데이트 과정에서 기존 객체 값을 직접적으로 수정해서는 절대 안됩니다. 

이유는 setState를 통해 state를 변경하지 않으면 리렌더링이 되지 않기 때문입니다. 이때 state를 업데이트 할 때,

불변함(Immutable)을 유지하면서 업데이트 해주어야 합니다. 지금 제가 하는 규모의 프로젝트에서는 리랜더링 과정에서의 CPU 쪽의 낭비를 신경쓰지 않아도 되지만, 추후에 규모가 커지면 어쩌면 서비스에 버벅임을 발생 시킬 수도 있다고 합니다. 

-> 이러한 이유 때문에 state를 업데이트할 땐 불변함을 유지하면서 업데이트해줘야 합니다.

 

 

어떤 경우에 불변함을 유지하려다보면 코드가 복잡해질수 있습니다. 이 때 immutable.js 를 사용합니다.