프론트엔드/리액트를 다루는 기술13 리액트를 다루는 기술, 외부 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. 리액트를 다루는 기술, 컴포넌트 성능 최적화 [ 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. 리액트를 다루는 기술, ref: DOM에 이름달기 HTMl에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference의 줄인말)개념 더보기 리액트 컴포넌트 안에서도 id를 사용할 수는 있지만 JSX안에서 DOM에 id를 달면 해당 DOM을 렌더링할때 그대로 전달됨 하지만 특수한 경우가 아니면 사용을 권장하지 않음 HTML내에서는 DOM의 id는 유일해야하는데 중복id를 가진 DOM이 여러개 생기는 잘못된 사용이기 때문 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제가 생기지 않음 대부분 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만 다른 라이브러리나 프레임워크와 함께 id를 사용해야하는 상황에는 컴포넌트를 만들때마다 id 뒷부분에 추가 텍스트를.. 2023. 6. 17. 이전 1 2 다음
