프론트엔드63 리액트를 다루는 기술, 외부 API를 연동하여 뉴스 뷰어 만들기 [ 14.1 비동기 작업의 이해 ] 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있음 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신함 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라 응답을 받을때까지 기다렸다가 전달받은 응답 데이터를 처리함 이과정에서 해당 작업을 비동기적으로 처리하게 됨 만약 작업을 동기적으로 처리한다면 요청을 끝날때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없음 요청이 끝나야 비로소 그 다음 예정된 작업을 할 수 있음 하지만 이를 비동기적으로 처리하며 웹 애플리케이션이 멈추지 않고 동시에 여러 가지 .. 2023. 7. 11. 리액트를 다루는 기술, 리액트 라우터로 SPA 개발하기 정리하기에 앞서 현재 쓰이는 것은 react-router-v6인데 책에서는 react-router-v5를 다루고 있어 많은 차이가 있음 검색하면 안쓰이는 것이랑 없어진것 등 나름 정리했지만 현재 쓰이는 것이랑 차이가 있을 수 있음 [ 13.1 SPA란 ] SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어 말 그대로 한 개의 페이지로 이루어진 애플리케이션 전통적인 웹페이지는 여러 페이지로 구성되어 있음 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌 사용자에게 보이는 화면은 서버 측에서 준비함 사전에 html 파일을 만들어서 제공하거나 데이터에 따라 유동적인 html을 생.. 2023. 7. 10. 리액트를 다루는 기술, immer를 사용하여 더 쉽게 불변성 유지하기 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있음 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것이 매우 힘듬 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서임 객체 안에 객체가 있는 식에 구조일 경우 전개연산자를 여러번 사용하는 것은 꽤 번거롭고 가독성도 좋지 않음 이러한 상황에 immer라는 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있음 [ 12.1 immer를 설치하고 사용법 알아보기 ] ▶ 12.1.1 프로젝트 준비 라이브러리 설치 yarn add immer ▶ 12.1.2 i.. 2023. 7. 3. 리액트 렌더링 최적화 [ 미리 알고 있어야 하는 개념들 ] ▶ 브라우저 렌더링 Html 파싱을 해서 DOM을 만들고 CSS를 파싱 해서 CSSOM을 만듦 DOM과 CSSOM을 활용해서 렌더트리를 만듦 그리고 layout과 repaint 과정을 거쳐 화면에 웹사이트가 렌더링 됨 즉 사용자가 웹 사이트를 볼 수 있게 되는 것 ▶ 리액트에서의 렌더링 리액트가 함수를 호출하는 것. 리액트 렌더링은 render phase와 commit phase로 구성되어 있음 - render phase render phase에서는 컴포넌트를 호출하여 리액트 엘리먼트를 반환하고 새로운 virtual DOM을 생성해 줌 만약 이번이 첫 번째 렌더링이 아니라면 재조정과정을 거친 후 Real DOM에 변경이 필요한 목록들을 체크함 재조정이란 간단히 말해서.. 2023. 7. 1. 리액트를 다루는 기술, 컴포넌트 성능 최적화 [ 11.1 많은 데이터 렌더링하기 ] import React, { useRef, useState } from "react"; function createBulkTodos() { const array = []; for (let i = 1; i setNumber(prevNumber=>prevNumber+1), [], ); setNumber(number+1)을 하는 것이 아니라 어떻게 업데이트할지 정의해주는 업데이트 함수를 넣어줌 그러면 useCallback을 사용할 때 두번째 파라미터로 넣는 배열에 number를 넣지 않아도 됨 const onInsert = useCallback((text) => { const todo = { id: nextId.current, text, checked: false, };.. 2023. 6. 30. 리액트를 다루는 기술, 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있음. 회사마다 요구하는 스펙이 다르고 개발자마다 각자 취향에 따라 선택하기 때문에 여러 방식 중에서 딱히 정해진 방식이란 없음 일반 CSS: 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass: 자중 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하면 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줌 CSS Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동을 생성해 주는 옵션 styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일을 적용된 컴포넌트를 만들 수 있.. 2023. 6. 24. 리액트를 다루는 기술, Hooks [ 8.1 useState ] useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됨 const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; useState는 코드 상단에서 import 구문을 통해 불러오고 다음과 같이 사용함 const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어줌. 기본값(초기값)으로 0을 설정하겠다.. 2023. 6. 23. 리액트를 다루는 기술, 컴포넌트의 라이프사이클 메서드 모든 리액트 컴포넌트에는 라이플사이클(수명 주기)이 존재함 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 컴포넌트를 처음으로 렌더링 할때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트 하기 전후로 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지할 수도 있음. 이럴때 컴포넌트의 라이프사이클 메서드를 사용 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있음 함수형 컴포넌트에서는 사용할 수 없지만 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있음 [ 7.1 라이프사이클 메서드의 이해 ] 라이프사이클 메서드의 종류는 총 9가지 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업.. 2023. 6. 20. 리액트를 다루는 기술, 컴포넌트 반복 리액트프로젝트에서 반복적인 내용을 효율적으로 부여 주고 관리하는 방법에 대해 배워봄 [ 6.1 자바스크립트 배열의 map( ) 함수 ] JS 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있음 ▶ 6.1.1 문법 arr.map(callback, [thisArg]) 함수의 파라미터 callback:새로운 배열의 요소를 생성하는 함수 currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 잇는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 ▶ 6.1.2 예제 let numvers = [1,2,3,4,5] let propcessed = numbers.ma.. 2023. 6. 17. 이전 1 2 3 4 5 6 7 다음
