서론 React를 사용하면서 페이지 이동에 가 아닌 Router를 사용해야하는 이유가 궁금해졌다. SPA란? React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다. SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. 를 통한 이동이 가능하다. 하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 ..

서론 React 파일은 'create-react-app'을 통해 만들었다. GitHub Repository 생성 테스트를 위해 gh-pages-test 명으로 repository를 만들었다. 로컬 저장소와 연결 default 브런치명이 main으로 변경되었지만, create-react-app을 통해 설치하면 브런치명이 master로 나온다. 아래 명령어를 터미널에 입력하여 로컬 저장소와 원격 저장소를 연결한다. git init git remote add origin [repository 주소] gh-pages 설치하기 gh-pages를 이용하기 위해서는 패키지를 설치해야 한다. npm install gh-pages package.json에 주소 추가 패키지 설치가 완료되면 package.json에 "ho..

Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..

Class component component 선언하는 두 가지 방법 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재는 자주 사용 되지 않음. state, lifeCycle등 사용 가능. Class component 사용 방법 class로 정의하고 render() 함수를 통해 JSX를 반환. Component로 상속 받아야 함. import React from 'react'; class App extends React.Component{ render(){ ... } export default App; state Component 내부에서 바뀔 수 있는 값 Class component - state 사용 constructor(생성자) 안에서 this.state 초기 값 설정 가능 constructor..

React 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. [위키백과] facebook에서 제공해주는 프론트앤드 라이브러리. 사용자가 조작하기 위한 UI를 만들도록 도와줌. component 기반 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용 React 특징 1. Component 기반 구조 2. Data Flow 3. JSX 4. Virtual Dom 5. Props and State 1. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다. 스마트폰 배터리가 고장 나면 배터리를 고치면 된다. '액정', '배터리' 이를 Component 비유할 수 있..