서버, 클라이언트 사이드 렌더링이란? 서버 사이드 렌더링은 UI를 서버에서 렌더링 하는 것을 의미합니다. 서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문 했을 때 서버쪽에서 초기 렌더링을 대신 해주는 것 입니다. 그리고 사용자가 html을 전달 받았을 때 그 내부에 렌더링된 결과물이 보입니다. 반대로 클라이언트 사이드 렌더링은 브라우저에서 모두 처리하는 것이죠. 즉, 자바스크립트를 실행해야 우리가 만든 화면이 사용자에게 보입니다. 처음에는 빈 페이지로 시작하여 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 화면이 보이는 것입니다. 서버 사이드 렌더링의 장점 일단 구글, 네이버, 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 ..
리액트 앱은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트가 여기저기서 필요한 데이터가 있을 때 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. 만약 C 컴포넌트가 전역 상태를 업데이트 시키는 기능을 담당한다면 App에서는 const [value, setValue] = useState('hello'); 생성하여 App > A > B > C 순으로 전달해야 합니다. 이렇게 여러 번에 거쳐서 전달하게 될 경우 유지 보수성이 낮아질 가능성이 높기 때문에 Context API를 사용하여 Context에 만들어서 단 한 번에 원하는 값을 받아와 사용할 수 있습니다. import { createContext } from "react"; const ColorContext = create..
Route 사용하기 실습할 프로젝트를 생성하고 해당 프로젝트 안에서 react-router-dom을 설치하자. yarn add react-router-dom 그리고 라우터를 적용할 때는 src/index.js 파일에서 BrowserRouter 컴포넌트로 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해 줍니다. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWor..
SPA란? Single Page Application 즉, 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. 전통적인 웹 페이지는 여러 페이지로 구성되어 있습니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다. 이렇게 사용자에게 보이는 화면은 서버측에서 준비 했습니다. 전통적인 웹은 보통 동적인 html을 생성해주는 템플릿 엔진을 많이 사용했죠. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 새로운 화면을 보여주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있습니다. 트래픽이 너무 많이 나올 수 있고, 사용자가 몰려서 높은 부하가 쉽게 걸릴 수도 있습니다..
useCallback useMemo와 상당히 비슷한 함수로, 주로 렌더링 성능을 최적화할 때 사용합니다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다. 보통의 방식으로 하게 되면 컴포넌트가 리렌더링될 때마다 함수들이 새로 생성됩니다. 대부분의 경우 이 방식이 문제를 일으키지 않으나, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화 해주는 것이 좋습니다. useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야합니다. onChange처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 단 한번..
Hooks 리액트 v16.3에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. useState 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. import React, { useState } from "react"; const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상..
모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 랜더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다. 리액트로 플젝을 하다보면 처름으로 렌더링 할 때 어떤 작업을 하거나 컴포넌트 업데이트 전후로 어떤 작업을 처리할 수도 있고, 또 불필요한 렌더링을 방지해야할 때도 있습니다. 이때 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프 사이클 메서드는 클래스형 컴포넌트에섬나 사용가능 합니다. 라이프사이클 메서드의 이해 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, ..
자바스크립트의 map()함수 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 컴포넌트 배열을 렌더링할 때는 key값 설정에 항상 주의해야합니다. 또 key 값은 언제나 유일해야 합니다. 중복이 된다면 오류가 발생할 겁니다. 마땅한 key값이 없다면 map의 index를 사용해도 되지만 권장하지는 않습니다. 가급적 key값으로 사용될만한 데이터를 사용하세요 상태안에서 배열을 변형할 때는 배열에..