[TIL] 2022.05.16

5월 16일 TIL

---

 

자바스크립트 DeepDive

14장 전역 변수의 문제점

• 변수의 생명 주기
  • 지역변수(함수 내부의 변수)의 생명 주기는 함수의 생명 주기와 일치한다.
  • 호이스팅은 스코프를 단위로 동작한다.
• 전역 변수의 문제점
  • 암묵적 결합
  • 전역 변수는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것으로, 암묵적 결합을 허용하는 것이다.
  • 긴 생명 주기
  • 전역 변수는 생명 주기가 길다. 따라서, 메모리 리소스도 오랜 기간 소비한다.
  • 스코프 체인 상에서 종점에 존재
  • 전역 변수는 스코프 체인 상에서 종점에 존재하기 때문에 검색 속도가 가장 느리다.
  • 네임스페이스 오염
• 전역 변수의 사용을 억제하는 방법
  • 즉시 실행 함수
  • 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 지역 변수가 된다.
  • 네임스페이스 객체
  • 모듈 패턴
  • ES6 모듈
• 변수의 스코프는 좁을수록 좋으며, 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면, 지역 변수를 사용해야 한다.

---

리액트를 다루는 기술

react-virtualized를 활용한 성능 개선 확인.

---

12장 immer

//immer 예시코드

import produce form 'immer';
const nextState = produce(originalState, draft=>{
	//바꾸고 싶은 값 바꾸기
	draft.somewhere.deep.inside = 5;
})

• produce라는 함수는 두 가지 파라미터를 받는다.
• 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다.
• 두 번째 파라미터 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성을 유지해 주면서 상태를 생성한다.

import produce from 'immer';

const originalState = [
{
	id:1,
	todo: '전개 연산자와 배열 내장 함수로 불변성 유지'
	checked: true,
},
{
	id:2,
	todo: 'immer로 불변성 유지하기'
	checked: false,
}
];

const nextState = produce(originalState, draft=>{
	const todo = draft.find(t=>t.id===2); //id로 항목 찾기
	todo.checked = true;

	draft.push({
		id:3,
		todo: '일정 관리 앱에 immer 적용하기',
		checked: false,
	});

	draft.splice(draft.findIndex(t=>t.id ===1),1);
})