Front-End/React7 [리액트를 다루는 기술] 리액트 라우터_1 13.1 라우팅이란? 웹 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트 라우터(React Router) : 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용한다. 컴포넌트 기반으로 라우팅시스템을 설정할 수 있다. Next.js : 리액트 프로젝트의 프레임워크이다. Create React App 처럼 리액트 프로젝트를 설정하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공한다. 파일 경로 기반으로 작동하며 리액트 라우터의 대안으로 많이 사용한다. 13.2 싱글 페이지 어플리케이션(SPA) 하나의 페이지로 이루어진 어플리케이션 13.3 리액트 라우터 적.. 2022. 5. 17. [리액트를 다루는 기술] 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. [리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 7장 컴포넌트의 라이프사이클 메서드 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하다. Hooks 기능을 활용해 함수컴포넌트에서도 비슷한 작업은 가능하다. 라이프사이클 메서드의 이해 마운트 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props 에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링.. 2022. 5. 3. 이전 1 2 다음