![]()
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를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.
![]()
에러 코드 초기 개발 환경을 구축하기 위해 구성 요소를 설치하고 터미널에 npm run start를 입력하자 위 사진과 같은 오류가 발생했다. 오류 발생 이유는 구성 요소가 설치된 폴더와 터미널 경로가 일치하지 않았기 때문이었다. 해결 방법 터미널 경로와 폴더 경로를 일치시키자 해당 명령어가 정상적으로 실행되었다.
![]()
에러 코드 VS Code에서 npx create-react-app 명령어 실행 중 다음 에러가 발생했다. 해결 방법 npm uninstall -g create-react-app npm add create-react-app npx create-react-app [폴더 이름]
![]()
Virtual DOM React의 주요 특징 중 하나는 virtual DOM을 사용한다는 것이다. 그래서 virtual DOM에 대해 알아봐야 하는데 그 전에 우선 브라우저가 렌더링하는 과정을 살펴봐야 한다. 웹페이지 빌드 과정(Critical Rendering Path, CRP) 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계를 거친다. 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰표트에 표시하는 과정이다. 여기에서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 render tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산하고 레이아웃, 리페인트 과정까지 다시 거친다. 이러한 문제로 인해 나온 것이 virtual DOM이다. ..
![]()
리액트는 여러 컴포넌트를 이용해 웹 앱을 개발한다. 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위다. 리액트는 여러 개의 컴포넌트 조각으로 이루어져 있다. 만약 하나의 페이지를 리액트로 만든다고 했을 때 여러 개의 컴포넌트가 모여 하나의 페이지를 구성한다. 예를 들어 인스타그램 페이지는 검색, 프로필, 스토리, 포스트 컴포넌트 등으로 구성되어 있는데, 이렇게 컴포넌트가 여러 개로 나뉘어 있으므로 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 원래 리액트로 개발할 때는 클래스형 컴포넌트를 이용해 많이 개발했지만 리액트에서 리액트 훅스(React Hooks)를 발표한 이후부터는 주로 함수형 컴포넌트를 이용해 개발한다.
![]()
리액트의 용도 React는 상호 작용(Interaction)이 많은 웹 앱을 개발하기 위해 주로 사용된다. 그러므로 이러한 웹 앱을 만드는 다른 툴인 Vue나 Angular와 많이 비교된다. 처음으로 볼 수 있는 가장 큰 차이점은 프레임워크와 라이브러리의 차이다. Angular와 Vue는 프레임워크이며 리액트는 라이브러리다. 프레임워크와 라이브러리의 차이점은? 프레임워크는 어떤 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떤 특정 기능을 모듈화해 놓는다. 프레임워크는 라이브러리를 포함하고 사용자가 작성한 코드를 호출한다. 그리고 코드는 특정 기능을 구현하기 위해 라이브러리를 호출한다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문이다. 한편 화면..
![]()
초기 설정 git init git remote add origin 주소 git branch -m main git add . git commit -m "넣을메시지" git push -u origin main 이후 업데이트하기 git add . git commit -m "넣을메시지" git push -u origin main 다른 컴퓨터로 복제하기 git clone 주소 가져와서 병합하기 git pull 강제로 푸시하기 git push -u origin +main 리모트 저장소 삭제하기 git remote rm origin
