Hooks는 리액트 16.8 버전에 새롭게 추가되었고 클래스를 사용하지 않고도 state나 다른 리액트 기능들을 사용할 수 있게 되었다. Effect Hook은 함수 컴포넌트에서 side effect를 수행하도록 한다. import React, {useState,useEffect} from 'react'; function Example(){ const [count,setCount]=useState(0); //componentDidMount와 componentDidUpdate와 유사함 useEffect(()=>{ //브라우저 API를 사용하여 문서의 제목을 업데이트함 document.title=`You clicked ${count} times`; }); return( You clicked {count} t..

1. SPA란? SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 왔습니다. 리액트 같은 라이브러리 혹은 프레임워크를 시용하면 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해 줍니다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있습니다. SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 ..

React Intro 브라우저를 열고 사이트에 들어가면 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 굉장히 많다. 이러한 이유로 요새는 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션이(Web Application)라는 단어가 많이 사용되기도 한다. React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. 리액트는 VDOM을 더블 버퍼링 형태로 관리합니다. DOM에 마운트된 current..