초보 개발자의 일기

Virtual DOM이란? https://ko.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom Virtual DOM과 Internals – React A JavaScript library for building user interfaces ko.reactjs.org 리액트는 컴포넌트가 바뀔 때 이전 컴포넌트와 비교를 해 다른 부분을 리랜더링 한다. 코드를 보면 return 아랫부분이 Virtual DOM인데 이전 컴포넌트의 Virtual DOM과 현재 상태의 Virtual DOM을 비교한다. 둘이 비교를 하였을 때 달라진 부분이 있으면 그 부분만 리액트에서는 리렌더링을 한다. 예시 return ( 로그인 회원가입 ); }; 이렇게 코드를 작성하면..

사이트의 화면 크기를 줄이고 늘려보면 창의 크기에 따라서 배치가 바뀌는 것을 쉽게 볼 수 있다. 이번에 antd에서 반응형 디자인을 한 번 사용해 본다. grid 사용하는 방법 https://4x.ant.design/components/grid/ Grid - Ant Design Child elements depending on the value of the start, center, end, space-between, space-around and space-evenly, which are defined in its parent node typesetting mode. 4x.ant.design xs: 모바일 sm: 태블릿 md: 작은 데스크탑 이렇게 각 단위마다 화면크기가 정해져 있다. 또 반응형을 만들..

react에서는 react router를 이용하여 link를 걸고 페이지를 이동을 하였다. next에서는 import Link from 'next/link';를 작성하면 자체적으로 지원이된다. 형태는 아래처럼 사용을 한다. 노드버드 프로필 회원가입 href 안에 이동하고 싶은 페이지의 이름 태그안에 사용하고 싶은 이름을 작성해주면 이렇게 링크가 걸리며 각 페이지로 이동을 할 수 있다. 또 next에는 react hor loader 기능이 알아서 적용되어있다. 서버를 키고 코드를 바꾸면 알아서 바꾸어 진다.