이안의 평일코딩

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

SPA(Single Page Application) public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고, src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다. 그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다. index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는? 원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다. 위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다. 하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 ..

웹은 Client와 Server로 나누어진다. Client는 요청을 보내는 역할을 하고 Server는 요청을 보고 알맞은 응답을 해준다. 그리고 Client는 그 응답을 바탕으로 DOM에 그린다. (css처리 + javascript로드) 이 과정을 반복한다. 웹의 발전으로 수많은 요청과 응답을 처리해야 되기 때문에 Server 부하, Client도 페이지 깜빡임이 나타남. Ajax라는 기술을 통해 일부분만 정보를 가져올 수 있게 되고 더 나아가 SPA라는 개념이 등장한다. SPA(Single Page Application) SPA는 url을 움직이더라도 html을 새로고침하지 않는 것이다. React는 SPA를 지원하는 라이브러리이며 Client Side Rendering 방식으로 동작한다. Server..