React-study/presentation6 [9장 발표] 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기npm init//package.json을 만드는 CLI를 실행할 수 있다.npm i react react-dom next//핵심 라이브러리인 react, react-dom, next 설치npm i @types/react @types/react-dom eslint eslint-config-next typescript --save-dev//devDependencies에 필요한 패키지를 설치 9.1.2 tsconfig.json 작성하기 9.1.3 next.config.js 작성하기poweredByHeader- 보안 취약점으로 취급되는 헤더를 제거한다.- 웹서버에서 사용되는 프로그램 엔진 정보가 노출될.. 2024. 12. 8. [모던리액트 Deep Dive] 5장 발표자료 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.웹 서비스에서 보여지는 거의 모든 부분을 이 상태로 관리한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장리액트처럼 SPA의 경우, 하나의 페이지로 앱을 다뤄야 하다보니 단 하나의 Controller가 여러가지 View와 Model을 관리하면서 복잡해졌다.한 View에서 일어난 상호작용 때문에 여러 Model이 변경되거나, 그 반대의 일이 벌어지는 부수효과도 여러 발생하여 어디서 발생한건지 추적이 어렵다보니 유지보수에도 안 좋다.양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함.. 2024. 11. 15. [발표] useTransition과 useDeferredValue useTransition란복잡하거나 오래 걸리는 작업을 하는 동안 웹사이트가 부드럽게 작동할 수 있도록 돕는 도구로비동기 작업을 효율적으로 관리한다. useTransition 사용 방법1. 기본 사용법isPending : 현재 어떤 작업이 진행 중인지를 나타내는 값. 작업이 진행중이면 'true', 아니면 'false;.startTransition : 비동기 작업을 시작하는 함수. 이 함수 안에서 오래 걸리는 작업을 수행하면 된다.import React, { useState, useTransition } from 'react';function ExampleComponent() { const [isPending, startTransition] = useTransition(); const [data, .. 2024. 6. 25. [발표] useMemo와 useCallback useMemo란?컴퓨터나 스마트폰에서 프로그램이 작업을 더 빠르고 효율적으로 할 수 있게 돕는 도구이다.반복해서 계산해야 하는 값이 있다면 미리 저장해두었다가 다음에 바로 꺼내어 쓸 수 있다. useMemo의 사용법const cachedValue = useMemo(calculateValue, dependencies)calculateValue : 캐시 저장할 함수 dependencies : calculateValue 코드 내에 있는 모든 반응형 값(props, state, 모든 변수와 함수 포함 가능)메모이제이션( memoization ): 'useMemo'는 함수의 반환값을 기억하고, 의존성 배월의 값이 변경될 때만 함수가 다시 실행된다. 그렇지 않으면 이전에 계산된 값을 반환한다. * 메모이제이션.. 2024. 6. 18. [발표] useEffect와 useLayoutEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트의 훅으로 구조는 다음과 같다.useEffect(setup, dependencies?) setup : 흔히 화살표함수로 할당하는 셋업함수이다. dependencies : 흔히 [] 로 useEffect 훅이 다시 실행될지 여부를 결정한다. 1. 기본사용 : 아래 예제에서 useEffect는 count가 변경될 때마다 실행된다. 의존성 배열 안에 count 확인.import React, { useState, useEffect } from 'react';function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('coun.. 2024. 6. 4. [발표] useReducer / useContext / useRef useReducer상태 관리를 위해 사용하는 훅 중 하나로 상태가 복잡하거나 상태 변화 로직이 여러가지로 나뉠 때 유용함.상태(state): 컴포넌트의 현재 상태. 어떤 값이나 객체일 수 있음reducer: 상태와 액션을 받아 새로운 상태를 반환하는 함수이다. 액션 : 상태를 어떻게 변경할지를 설명하는 객체이다. 일반적으로 type 속성을 가집니다. 예: { type: 'increment' }useReducer를 사용하기 위해서는 다음 세 가지가 필요하다.초기 상태 (initial state)리듀서 함수 (reducer function)디스패치 함수 (dispatch function) import React, { useReducer } from 'react';// 초기 상태 정의const initial.. 2024. 5. 30. 이전 1 다음
