이안의 평일코딩

React Hooks React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능이다. Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었다. 원래 React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. 위와 같이, Class 컴포넌트와 비교했을 때 함수형 컴포넌트를 이용하면 더 간결한 코드, 더 빠른 성능, 더 나은 가독성을 가진다. 함수형 컴포넌트에서는 클래스 컴포넌트에서 사용하던 리액트의 생명주기를 사용하기 못했기 때문에, 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔지만, 이것은 Reac..

localStorage 값 저장하기 localStorage에 데이터 값을 담으면 페이지를 refresh 해도 데이터가 계속 남아 있다. https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org 리액트의 이벤트핸들러에서 setData시 localStorage.setItem을 이용해 동일하게 값을 담아주면 된다. 객체나 배열을 저장해줄시에는 JSON.stringify를 이용해서 텍스트..

불변성이란? (원시 타입 vs 참조 타입) 사전적 의미로는 값이나 상태를 변경할 수 없는 것을 의미하는데, 자바스크립트 타입을 통해 불변성 의미를 살펴보자. 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 그렇지 않기 때문에(mutable) 둘을 비교해보자. 원시 타입 : Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있다.) 참조 타입 : Object, Array 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만, 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다. 이 경우 Call Stack은 개체 및 배열 값이 아닌 메모리에만 Heap 메..