Route를 들어가기 앞서 SPA를 다시 한번 알아보자 SPA? Single Page Application의 약자로, 말 그대로 페이지가 1개인 애플리케이션이란 뜻이다. 전통적인 웹 어플리케이션의 구조는 여러 페이지로 구성되어 있다. react-router는 써드파티 라이브러리로, 공식은 아니지만 가장 많이 사용되고 있는 라이브러리이다. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해 준다. react-router-dom 기본적으로 react-router-dom이 브라우저에서 사용되는 리액트 라우터이다. import React from 'react'; import {Route} from 'react-router-dom'; import { Home, About } from 'pages'..

JSX ? JSX는 Javescript와 XML을 합쳐서 만들어진 자바스크립트 확장 문법이다. 브라우저에서 실행되기 전에 코드가 빌드되는 과정에서 바벨을 사용해 일반적인 자바스크립트 형태로 변환한다. 리액트를 사용할때만 사용되므로 공식적인 자바스크립트 문법은 아니다. 그렇기때문에 사용하기위해서 바벨에서 설정을 해야한다.

1. SPA? Single Page Application(싱글 페이지 애플리케이션)의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 과거의 웹 사이트 전통적인 웹 사이트는 요즘보다 문서 하나의 용량이 적었다. 그래서 새로운 페이지를 요청하면 서버가 완전히 새로운 페이지를 전송했다. 하지만 요즘엔 웹 사이트가 고도화되어, 한 페이지의 용량이 커지고, 그럴때마다 새로운 페이지를 전달하기엔 버거워졌다. SPA! 용량이 커진 웹 사이트를 무리없이 전송하기 위해서 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가면서 표현하는 것이 SPA인것이다. 우리가 무언가를 클릭하거나 스크롤하면 홈페이지는 상호작용을 위해서 최소한의 요소만 변경한다. 페이지 이동이 발생한 경우에도 최초 ..

1. 컴포넌트? 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. => 이것을 보여주는 것이 렌더링 말이 너무 어려운데, 한마디로 앱을 이루는 최소한의 단위이다. 2. 컴포넌트의 종류 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다. 1. 함수형 컴포넌트 function Componenet(props) { return Hello! World! } JavaScript 함수의 형태로 만들기 때문에 함수형 컴포넌트라고 불린다. 장점 클래스형 컴포넌트보다 선언하기 편하다 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 결과물의 파일 크기가 더 작다.( 큰 차이까진 아니다) 단점 state와 라이프사이클 API의 사용이 불가능하다.(Hooks라는 기능이 도입되므로 대부분 해결..

1. 리액트? 리액트는 facebook에서 제공해주는 웹과 앱의 View를 개발할 수 있는 프런트엔드 라이브러리이다. 여기서 React가 프레임워크인지 라이브러리인지 많은 논란이 있다. 프레임워크란 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것이다. 라이브러리는 활용 가능한 도구들의 집합이다. 이 둘의 차이점은 제어 흐름에 대한 주도성이 누구에게 그리고 어디에 있는가에 있다. 프레임워크는 자신이란 틀에 맞게 사용자가 필요한 기능을 입력하는 것이고, 라이브러리는 개발자가 필요한 기능을 원할 때 입력한다. 리액트는 필요로 할때 useEffect() 같은 함수를 사용해서 특정한 동작을 할 수 있게 해 주기 때문에 라이브러리라고 한다. 2. 특징 Virtual DOM을 사용한다. ..