props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리.Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있다.모든 컴포넌트에서는 Redux에 있는 데이터(상태)를 가져다가 사용할 수 있다. Redux라는 커다란 저장소 내에 데이터(상태)가 저장되어 있어,사용자는 정보를 가지러 멀리 있는 창고로 갈 필요 없이 Redux내에서 가져오면 된다.깊이가 깊어질수록 state 관리가 어렵고 가독성이 떨어지는 문제 해결 가능.  이 때문에 엄청 멀리있는 컴포넌트에도 귀찮은 props 전송을 할 필요가 없다!(React는 부모 ➡ 자식으로만 데이터가 전달 가능한 단방향 데이터 흐름을 갖기 때문에 자식 ➡ 부모로 데이터를 전달하기 위해서는 state를 사용해 전달해야한다.)모듈 단..

1. SPA(Single Page Application) SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식을 의미한다. CSR(Cliend-Side Rendering)으로 동작한다. 어플리케이션과 상호작용할 때마다 서버에 요청해 전체 HTML을 받아오는 방식이 아닌, 화면 렌더링을 로컬 PC에서 생성해 빠른 화면 전환 가능 전체 웹페이지를 다시 표시하는 대신에 특정 부분만 동적으로 업데이트하는 것!사용자 경험을 향상시킬 수 있다. 최초 한번 방문으로 전체 웹 어플리케이션용 파일이 다운로드. 이후 웹서버에선 화면구성을 위한 HTML이나 CSS 전송X (한번에 필요한 데이터를 전송받고, 필요한 부분만 업데이트함) 페이지간 이동시 필요한..

상위 컴포넌트에서 props로 useState상태 변경 함수를 넘길 때 void가 아닌 타입을 지정해줄 수 있었다. type propsType = { setVisible: ()=>void}import {Dispatch, SetStateAction } from "react";type propsType = { setVisible: Dispatch>;} void로 넘겨도 문제 없지만, 타입을 지정해주게 되면 어떤 타입의 값을 넣어야하는지 쉽게 알 수 있다.

function add(a: number, b: number) { return a + b;}function printOutput(value: any) { console.log(value);}함수에서 아무것도 반환하지 않으면 (return문이 없으면) 반환타입 void를 사용한다.void는 null 또는 undefined랑 비슷하지만 항상 함수와 결합해서 사용한다는 특징이 있다. 제네릭(generic)function insertAtBeginning(array: T[], value: T) { const newArray = [value, ...array]; return newArray;}// 이 함수가 있으면 호출하기만 해도 기존 배열은 유지한 상태로 새로운 값을 추가할 수 있다.// 이 함수의 장점:..

type inference(타입추론)let cousre = "React - The Complete Guide";cousre를 이렇게 선언하면 string이라고 타입을 추론해준다.// cousre = 12341;하지만 이렇게 cousre에 int를 할당하면 오류가 발생하는데, 이를 해결하기 위해서 유니온타입을 사용해야한다.let cousre string | number = 'React - The Complete Guide';cousre = 12345;유니온타입을 지정하는 방법은 첫번째 타입 | 다른 타입 (타입은 2개 이상 추가해도 가능) 유니온타입은 타입추론을 사용하는 경우가 아니라면, 타입을 지정한 곳이라면 어디서든 사용 가능하다.  타입 별칭(Type Alias)중복되는 코드를 줄이고 재사용성을 높이..

타입스크립트는 자바스크립트의 superset 언어로 자바스크립트를 기반으로 하되, 보다 더 확장된 프로그래밍 언어대신 타입스크립트는 리액트와 달리, 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하진 않는다.대신 자바스크립트의 주요 문법보다 확장된 문법을 가진다. ** 타입스크립트는 정적타입(Statically Typed)을 가진다는 것자바스크립트는 동적인 언어라, 변수 타입을 따로 지정해주지 않아도 자동으로 인식해서 결과값을 출력한다.fucntion add(a, b){ return a + b;}const result = add(2,5);console.log(result);//7fucntion add(a, b){ return a + b;}..

리덕스는 상태관리 라이브러리로, UI/UX에 맞게 데이터를 관리하거나 서버와 주고받는 데이터를 관리한다. 기존의 상태관리는 state를 사용해 props를 전달하고, 다시 props로 전달하고.. props로 전달해 상태를 변경시킨다.props계층이 2계층을 넘어서면 관리하기 어려울 뿐 만 아니라 오류 발생시 해결하기도 어렵다. 하지만, Redux와 store를 사용하면 복잡한 과정을 간편하게 관리할 수 있다.  Store : 컴포넌트 상태를 관리하는 저장소. 하나의 프로젝트는 하나의 저장소만 가질 수 있음. Action: 스토어 상태를 변경하기 위한 action. 액션은 객체이며 반드시 type를 가져야한다. 액션 객체는 액션 생성함수에 의해 만들어진다. Reducer: 리듀서는 현재 상태와 액션 객체..

* Redux Toolkit Redux Toolkit | Redux ToolkitThe official, opinionated, batteries-included toolset for efficient Redux developmentredux-toolkit.js.org$ npm install @reduxjs/toolkit리덕스 툴킷 패키지 설치 후, package.json에서  "redux": "^4.2.1",삭제(redux toolkit에 redux가 포함되어있기 때문)store폴더 내에 있는 index.js에서 사용.(리덕스 store에서 redux toolkit사용)* createSlice리듀서 함수의 대상인 초기 상태(state)와 "슬라이스 이름(name)"을 받아 리듀서와 상태에 해당하는..

* Redux: 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템상태를 변경하고 화면에 표시해주는 데이터를 관리해준다. 1. Local state(로컬상태)  데이터가 변경되어서 하나의 컴포넌트에 속하는  UI에 영향을 미치는 상태  ex) 사용자 입력을 받아와서 useState를 사용해서 그 입력을 모든 키 입력과 함께 state 변수에 저장  ex) 세부 정보 필드를 켜고 끄는 토글 버튼  >> 보통 useState 사용. 컴포넌트 내에서 로컬 상태 관리. 혹은  useReducer사용(복잡하면) 2. Cross-Component State(로컬보다 조금 더 복잡)  하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태  ex) 모달 오버레이 열거나 닫는 버튼 있으면, 그 모달 ..

* React Hook의 규칙1. 리액트 훅은 리액트 함수에서만 호출해야한다.(=리액트 컴포넌트 함수/사용자 정의 훅)ex) 리액트 컴포넌트 함수 = 컴포넌트 내에서 jsx 코드를 반환하는 함수(Login.js에서 const Login = ()=> {})2. 리액트 훅이나 리액트 컴포넌트 함수는 사용자 정의 훅 함수의 최상위에서만 호출해야한다.(중첩함수나 block문(=if문)에서 호출 금지)ex) useEffect (() => { useContext() }) 불가. useEffect내에서 useContext 호출할 수 없다.여기서 말하는 사용자 정의 훅 함수의 최상위는 Login.js 파일 내의 const Login = () =>{//여기}를 말한다.3. useEffect를 사용할 때, 참조하는 모든 ..