본문 바로가기

전체 글78

A Multi-Page SPA with React Router A Multi-Page SPA with React Router 라우팅이 하는 일 도메인 이름 뒤의 경로에 따라 웹페이지의 콘텐츠를 변경시키는 것 단순히 다른 경로에 대해 다른 콘텐츠와 다른 HTML를 로딩하는 것으로 라우팅를 구현할 수는 있지만, 항상 새로운 콘텐츠를 가져와야 하는 단점이 있다. 매번 새로운 HTTP 요청을 하고, 새로운 HTTP 응답을 받는 과정에서 지연이 발생하여, 결국은 사용자 경험이 저하된다. 그래서 SPA에서는 HTML 요청을 한번만 전송하고, HTML과 추가적인 JavaScript가 다운로드된다. 그 후, 클라이언트에서 실행되는 추가 JavaScript 코드가 사용자가 화면에서 경험하는 것들을 실제로 조절하게 된다. 클라이언트 측의 리액트 코드가 현재 사용중인 URL을 감시하고.. 2024. 3. 29.
Advanced Redux Advanced Redux Redux and Side Effects with Async 리덕스의 중요한 규칙 리듀서 함수는 pure, side-effect free, synchoronous여야 한다.(순수 함수, 사이드 이펙트 x, 동기식) 리덕스 리듀서는 이전 상태 및 액션인 입력이 무조건 필요하며, 새로운 상태인 출력을 무조건 만들어낸다. 리덕스를 작업할 때 비동기 코드는 두 곳에 위치한다. useEffect를 사용하여 컴포넌트에 직접 비동기 코드를 작성한다. 리덕스 툴킷을 사용하지 않고, 직접 action creator를 작성한다. 리덕스는 실제로 action creator의 일부로 side effects를 수행하고, 비동기 작업을 실행할 수 있는 솔루션이 있다. 리덕스 복습 만약 구성을 이렇게 했.. 2024. 3. 29.
React Redux React Redux State의 종류 Local State 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 무조건 useState나 useReducer 등으로 관리를 해줘야 한다. 예를 들면, 버튼의 on/off 같은 것들을 UI에 표시하는 것 Cross-Component State 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태 props chains나 props drilling을 필요로 한다. 예를 들면, 모달 컴포넌트 등 App-Wide State 어플리케이션의 모든 컴포넌트에 영향을 미치는 상태 props chains나 props drilling을 필요로 한다. 예를 들면, 사용자 인증 등 React Redux를 사용하는 이유 React Context는 Re.. 2024. 3. 29.
Forms & User Input Forms & User Input Forms 입력 필드의 집합 Form의 용도 사용자의 양식 제출을 관리하고 사용자가 입력한 값을 추출 사용자가 입력한 데이터를 검증 폼 제출 다루기 class와 for은 자바스크립트에서 사용되는 이름이기 때문에 속성이름으로 사용할 수 없다. 따라서 htmlFor를 사용해야 한다. Email 폼에서 버튼은 폼을 제출하는 용도로 쓰인다. 폼에서 버튼을 클릭하면 HTTP 요청이 발생하고, 웹사이트의 서버로 전송된다. 다음과 같은 절차로 폼 제출이 진행된다. 서버로 재전송 : 사용자가 폼을 작성하고 제출하면, 입력된 데이터는 HTTP POST 요청을 통해 서버로 전송된다. 전송된 데이터는 서버로 넘어가게 되며, 이때 사용자가 입력한 정보가 포함된다. 서버에서의 데이터 처리 : .. 2024. 3. 29.
Custom Hooks Custom Hooks React Hooks Rules 컴포넌트의 내부에서 호출해야 한다. 최상위 레벨에서 호출해야한다. 생성하기 보통 hooks라는 폴더를 따로 만들어서 관리한다. 함수의 이름은 무조건 use로 시작한다. use로 시작하는 함수는 훅으로 인식되며, 특정 규칙이 부여된다. 컴포넌트의 간결화와 재사용성을 높이기 위해 주로 사용된다. State 관리 및 반환 state를 이용하기 위해서, 새롭게 값을 입력하고, 사용한다. 연관된 모든 state 값을 관리하면서 재사용성이 높아지게 된다. 커스텀 훅에서 state 값을 업데이트하면 컴포넌트 안에서 state 값을 조정한 것과 같은 효과가 나타난다. import { useEffect, useState } from 'react'; export fu.. 2024. 3. 29.
Data Fetch & HTTP Requests Data Fetch & HTTP Requests HTTP Requests React로 직접 데이터를 가져오거나 저장하는 것을 절대 해서는 안 된다. 만약에 클라이언트 내부에서 DB에 직접 연결을 하게 된다면, 브라우저의 자바스크립트 코드를 통해 DB의 인증 정보를 노출시킬 수 있다. 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만이 아니라 클라이언트도 접근할 수 있다. GET fetch() 브라우저가 제공하는 fetch() 인자로 url을 받는다. fetch()는 값을 감싸는 객체인 Promise를 반환하는데, 이 때 Promise는 받은 Response 객체를 감싼다. Promise는 자바스크립트 표준 객체이며, Promise의 상태에 따라 다른 값을 산출해낸다. API 호출이 성공했을 경우.. 2024. 3. 29.

티스토리툴바