전체 글

Memoization 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환해 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이다. function Component({ a, b }) { const result = compute(a, b); return {result}; } 컴포넌트 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는 데 오랜 시간이 걸린다. 이럴 때 컴포넌트가 계속 리렌더링되면 연산을 계속 수행하는 데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치게 되며 UI 지연 현상도 일어나게 된다. 이러한 현상을 해결해주기 위해 사용하는 것이 useMemo이다. compute 함수에 넘겨주는 a, b의 값..

VS Code에서 단축어로 함수형 컴포넌트가 간단히 생성할 수 있다. 사용하려면 ES7+ React/Redux/React-Native snippets 익스텐션이 필요하다. rafce

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

구조 분해 할당 ES6의 구조 분해 할당(Destructuring)은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. 객체 구조 분해 할당 클린 코드를 위해 사용한다. function buildAnimal (animalData) {...} function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: "horn", animal: "horse", color: "purple", hairTyp..

Props Props는 Properties의 줄임말이다. Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법이다. Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하려면 부모 컴포넌트에서 State를 변경해야 한다. State 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내지 않고 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 이용한다. 예를 들어 검색창에 글을 입력할 때 글이 변하는 건 State를 바꾼 것이다. State는 변경 가능(mutable)하다. State가 변하면 re-render된다. Props와 State의 차이점은? Props와 State는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결..

에러 코드 React 환경에서 Drag and Drop 기능을 활용하기 위해 npm install react-beautiful-dnd --save 명령어를 실행하던 도중 다음과 같은 오류가 발생했다. 해결 방법 기존의 명령어 끝에 --legacy-peer-deps를 추가하면 오류가 해결된다. npm install react-beautiful-dnd --save --legacy-peer-deps 설치 과정에서 추가로 약간의 오류가 발생하긴 했지만 사용에는 지장이 없었다.

React Hooks React Hooks는 React Conf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기술이다. React Hooks가 필요한 이유 React Hooks는 주로 클래스형 컴포넌트를 사용했던 React에서 발생한 문제점을 해결하기 위해 개발되었다. React Hooks의 또 다른 이점 왼쪽 코드와 오른쪽 코드를 보면 코드가 훨씬 더 간결해진 걸 볼 수 있다. 클래스형 컴포넌트에서는 생명 주기를 이용할 때 componentDidMount와 ComponentDldupdate 그리고 componentWillUnmount로 서로 다르게 처리하지만, React Hooks를 사용할 때는 useEffect 안에서 한꺼번에 처리할 수 있기 때문이다. HOC(Higher ..

에러 코드 해결 방법 에러가 발생한 라인 끝에 다음 명령어를 추가하면 된다. // eslint-disable-next-line

디렉토리(폴더) 생성 mkdir 폴더명 이동 경로로 디렉토리 이동 cd [이동경로] 현재 폴더의 상위 폴더로 이동 cd .. 파일 생성 touch 파일명.확장자 폴더 내에 있는 파일들 출력 ls 코드에디터 실행(VS Code) code .

SPA(Single Page Application) 요즘에는 웹의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 이것을 SPA(Single Page Application)라고 한다. SPA에서 화면 변경이 일어나는 방식 전통적인 웹은 a page 에서 b page로 페이지 전환할 때 a.html 을 보여주다가 b.html을 보여주면 됐지만 index.html 밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 할까? HTML 5의 History API로 그것이 가능해졌다. JavaScript 영역에서 History API를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.