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값으로 사용될만한 데이터를 사용하세요 상태안에서 배열을 변형할 때는 배열에..
ref: DOM에 이름 달기 리액트에서는 HTML의 요소인 id를 사용할 수 없다. 왜냐하면 id는 고유한 값인데 컴포넌트를 여러 번 사용할 경우 id의 고유성을 잃기 때문이다. 하지만 그렇다고 id 자체를 사용하지 못하게 된다면 그것 또한 문제이기 때문에 리액트에서는 ref라는 기능을 사용한다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위와 같은 문제에 대처 가능하다. 이렇게 id처럼 쓸 수 있으니 다른 라이브러리나 프레임워크와 함께 잘 사용이 가능하다. 그렇다면 ref는 언제 사용하면 좋은걸까? DOM을 꼭 직접적으로 건드려야 할 때 입니다. 보통은 아래와 같은 경우에 자주 사용된다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 ..
import React, { Component } from "react"; class EventPractice_class extends Component { state = { username: "", message: "" }; handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; hendleClick = () => { alert(this.state.username + " : " + this.state.message); this.setState({ message: "", username: "" }); }; render() { return ( 이벤트 연습 확인하기 ); } } export default EventPractic..