Front-End15 [리액트를 다루는 기술] 리액트 라우터_1 13.1 라우팅이란? 웹 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트 라우터(React Router) : 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용한다. 컴포넌트 기반으로 라우팅시스템을 설정할 수 있다. Next.js : 리액트 프로젝트의 프레임워크이다. Create React App 처럼 리액트 프로젝트를 설정하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공한다. 파일 경로 기반으로 작동하며 리액트 라우터의 대안으로 많이 사용한다. 13.2 싱글 페이지 어플리케이션(SPA) 하나의 페이지로 이루어진 어플리케이션 13.3 리액트 라우터 적.. 2022. 5. 17. [Javascript DeepDive] 함수_1 12장 함수 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 코드의 재사용 측면에서 매우 유용하다. 자바스크립트에서 함수는 객체이다. 변수 선언과 함수 정의 변수는 선언(declaration)한다고 했지만 함수는 정의(definition)한다고 표현했다. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다. 일급 객체 : 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이러한 값의 성질을 갖는 객체를 일급 객체라 한다. 함수 생성 시점과 함수 호이스팅 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다. 함수 표현식으로 정의한 함수.. 2022. 5. 10. [리액트를 다루는 기술] Hooks_2 (useMemo, useCallback,useRef) 8.4 useMemo useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. import React, { useMemo } from "react"; import { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산중 .."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = u.. 2022. 5. 9. [리액트를 다루는 기술] Hooks_1 (useState, useEffect, useReducer) 8장 Hooks 8.1 useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. import React from "react"; import { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터의 값은 {value}입니다. { setValue(value + 1); }} > +1 { setValue(value - 1); }} > -1 ); }; export default Counter; 8.2 useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hoo.. 2022. 5. 4. 이전 1 2 3 4 다음