Virtual DOM Why Virtual DOM? 요즘은 SPA (Single Page App) 이 트렌드로 자리 잡고 있다. SPA는 전체 페이지를 서버에서 매번 보내주는 것 이 아니라 브라우저에서 자바스크립트가 관리하기 때문에 DOM 조작을 효율적으로 할 수 있게 최적화가 필요해졌다. 그래서 기존 DOM을 직접 조작하면 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC자원을 많이 소모하게 된다. Virtual DOM 은 DOM의 복사본 또는 DOM의 추상화라고 표현한다. 기존 DOM과 같은 속성을 가지고 있지만 API는 가지고 있지 않으며 데이터가 변경되면 전체 UI는 Virtual DOM 에 렌더링이 된다. 그리고 바뀐 부분만 실제 DOM에 반영이 된다. Virtual DOM은 자바스크립트 객체를..

MPA (Multi Page Application) 브라우저는 웹서버에게 경로요청을 한다. 그리고 웹서버는 브라우저에게 html 을 제공한다. 우리는 이런 방식을 Multi Page Application (MPA) 방식 이라고 한다. 이러한 MPA방식의 장점은 SEO(검색엔진)에 유리하다는 것이다. MPA는 완성된 형태의 HTML 파일을 서버에서 전달 받기에 검색엔진이 페이지를 크롤링 하기에 유리하다. 또한 첫 로딩이 매우 빠르다. 빠른 이유는 위와 같이 서버에서 이미 렌더링을 해서 가져온다는 것이다. 장점이 있으면 분명히 단점도 있다. 일단 새로운 페이지를 이동하면 깜빡 거린다. 이러한 이유는 ux관점에서 매우 좋지 않다. 위의 장점을 보면 당연하다고 생각 할 수도 있다. 매 페이지의 요청마다 리 로드..

오늘 정리 할 useMemo, useCallback 은 컴포넌트의 최적화에 도움을 준다. 이 두개는 모두 React Hook이다. 컴포넌트의 불 필요한 렌더링을 방지하고자 나온 Hook 이다. 이 전에 알아야 할 기본지식이 있다. 두가지의 Hook의 설명에는 메모이제이션(memoization) 이라는 단어가 들어간다. 메모이제이션(memoization) 이란 - 컴퓨터 프로그램이 동일한 계산을 반환할 때 이 전의 계산한 값을 메모리에 저장해 놓는다는 뜻이다. 예를 들어서 이미 시험을 볼때 풀어본 문제는 다시 풀어보지 않아도 답을 기억하고 있다는 것이다. - 즉 반복적인 수행을 제거하여 프로그램의 실행 속도를 높인다. useMemo memoization 을 이용해서 처음의 값을 저장해놓고 props 의 변..

Udemy 라는 강의 사이트에서 Winterlood 님의 React 강의를 수강하고 있다. 강의 퀄리티도 매우 뛰어나지만 가장 만족한 것은 수강생들의 단체 오픈 카톡방이 존재한다는 것이였다. 학원에서는 주로 java 를 사용해서 서버를 배운다. int a = 10; console.log(10

공식문서 => https://ko.reactjs.org/docs/hooks-reference.html#usestate Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org state 란? 계속해서 변화하는 특정 상태를 의미한다. 상태에 따라 각각 다른 동작을 한다고 말한다. 컴포넌트에서 동적인 값을 상태(state)라고 부른다. React 에서는 useState라는 메서드를 지원한다. 배열을 반환하며 비구조화 할당을 통해서 받아온다. const [state, setState] = useState(initialState); 0번째 index는 state의 값으로 사용되고 1번째 index는 0번..