Input + Output = True

😎 yarn 리액트 설치] 자주 쓰는 리액트 라이브러리 설치 명령어 모음 리액트 yarn create react-app . 리덕스 yarn add react-redux 리덕스 툴킷 yarn add react-redux @reduxjs/toolkit 리코일 yarn add recoil 주스탠드 yarn add zustand 리액트 라우터 yarn add react-router-dom 악시오스 yarn add axios 리액트 쿼리 yarn add react-query 스타일드 컴포넌트 yarn add styled-components 퍼시스트 yarn add redux-persist 크로스엔브 yarn add cross-env json 서버 yarn add json-server json 서버 실행 yarn ..

😎리액트 가상돔 / 브라우저 렌더링 방식 리액트는 가상돔(Virtual DOM)을 사용하고, 가상돔은 실제 DOM을 추상화한 것으로, 실제 DOM과 동일한 구조를 가지고 있다. DOM (Document Object Model 문서객체모델) 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델 DOM은 root(뿌리) node에서 시작된다. 트리형 자료 구조는 위쪽 노드를 부모(parent) 노드, 아랫쪽 노드를 자식(child) 노드라고 하며 root node는 가장 위에서 시작되는 node로 parent(부모)가 없는 node이고, 이를 뿌리(root) node 라고도 부른다. 반대로, children(자식)이 없는 node를 잎(leaf) node라고도 ..

formdata react file upload / 리액트 이미지 업로드 / 리액트 이미지 전송 이미지를 서버에 전송하려면 보통 FormData라는 것이 필요하다. 방법은 간단하고, 이전 프로젝트에서 사용한 코드로 설명하겠다. react + axios를 사용했다. 1. html 세팅 - 이미지 첨부 2. react 세팅 - 이미지 FormData 추가 const [fileImg, setFileImg] = useState(); //formData func; const formData = new FormData(); const onChangeFile = (e) => { encodeFileToBase64(e.target.files[0]); const formImg = e.target.files[0]; setF..

😎 리액트 axios instance & interceptor/ axios 에러 핸들링 이번 프로젝트 코드를 예시로 사용하겠다 ✅ axios instance (인스턴스) axios instance는 axios를 사용할 때 공통으로 들어가는 기본 코드를 모듈화 할 수 있는 방법이다. import axios from "axios"; export const api = axios.create({ baseURL: "기본으로 지정할 서버 url", timeout: 1000, //요청이 해당 설정 시간보다 지연될 경우 요청은 중단되며, catch로 에러가 전달된다 headers: { "content-type": "application/json;charset=UTF-8", //"Accept": "application/..

리액트 카카오 로그인 (프론트 소셜 로그인) 이번 프로젝트에서 진행한 코드를 예시로 설명드리겠습니다. 1. 로그인 클릭 버튼에 클릭시 실행할 함수 추가 2. 실행할 함수에 소셜로그인 기본 코드 추가 const onClickSocialLoginKakao=()=>{ //카카오 로그인 const restApiKey = '카카오 디벨로퍼에서 받은 REST_API_KEY' const redirectUrl = '인가코드 발급 받을 때 돌아올 페이지' //예시 const restApiKey = 'abcdefghijklmnopqrstuvwxyz' const redirectUrl = 'http://localhost:3000/oauth' const KAKAO_AUTH_URL = `https://kauth.kakao.com..

😎 동기 비동기 / 서버 통신 (feat. react axios) ✅ 동기와 비동기 1. 동기 (synchronous: 동시에 일어나는) 요청과 결과가 동시에 일어난다는 의미. 요청을 하면 시간이 걸리더라도 요청한 자리에서 결과가 출력되어야 한다. 장점 : 설계가 간단하고 직관적이다. 단점 : 이번 결과가 주어질 때까지 다음 작업 진행을 못하고 대기해야 한다. 2. 비동기 (Asynchronous: 동시에 일어나지 않는) 요청과 결과가 동시에 일어나지 않는다는 의미. 요청한 그 자리에서 결과가 주어지지 않음. 데이터를 불러오는 서버와의 통신 절차에서 주로 사용된다. 장점 : 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 진행할 수 있다. 단점 : 동기식보다 설계가 다소 복잡하다. 예를 들자면 동기:..

😎 라이프사이클(클래스형 vs 함수형), React hooks ✅ 라이프사이클(클래스형 vs 함수형) 라이프사이클(LifeCycle) 리액트의 컴포넌트들은 라이프사이클(생명주기)을 가지고 있다. 라이프사이클은 컴포넌트의 생성부터 업데이트, 그리고 소멸(제거)되는 과정을 의미한다. 클래스형 컴포넌트 : 라이프사이클 메서드를 통해서 해당 시점에 따라 컴포넌트를 조작한다. 함수형 컴포넌트 : 라이프사이클 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 라이프사이클 메서드와 비슷하게 동작하도록 구현한다. 라이프사이클은 크게 세 단계로 나눠진다. 생성(Mount), 업데이트(Update), 제거(Unmount) Mount: 컴포넌트를 생성하는 단계 Update: 아래 5가지 경우로 인해 업데이트 된다(리..

😎 redux-persist 사용법 ✅ redux persist를 사용하는 이유? 리덕스의 store는 페이지 새로고침이 될 때 state 값이 초기화 된다. 만약 페이지 새로고침을 해도 state 값을 유지하고 싶다면 저장하고자 하는 reducer state를 LocalStorage 또는 SessionStorage에 저장해서 새로고침을 해도 저장공간에 있는 데이터를 redux에 불러오는 방법을 사용할 수 있다. 이 방법을 redux-persist를 통해 사용할 수 있다. ✅ redux persist 세팅 방법 redux가 이미 세팅되어 있는 상황을 가정하고 진행 redux persist 설치 yarn add redux-persist reducer에 persist store 정의 //configStore..

😎 React - 리덕스(redux) 이해하기 ✅ Redux란? Redux 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리입니다. 상태가 예측 가능한 방식으로만 업데이트될 수 있도록 하는 규칙과 함께 전체 애플리케이션에서 사용해야 하는 상태에 대한 중앙 집중식 저장소 역할을 합니다. -redux 공식문서- 한 마디로 리덕스는 "state 사용을 더 편하게 해주는 라이브러리"라고 이해할 수 있다 Local State 리액트를 사용하다 보면 A 컴포넌트 안에 있는 data라는 state를(Local State) B 혹은 C 컴포넌트에서 사용하기 위해 A 컴포넌트에서 B나 C 혹은 B를 통해서 C로 전달해주어야 하는 불편함이 있다 만약 그 depth가 깊다면? 이미지(Without Redux..

😎 State, Props, 리렌더링 발생 조건 State State State는 컴포넌트 안에서 관리되고 데이터 또는 정보를 담은 javascript 객체이다. (함수 내에 선언된 변수처럼) 렌더링된 값을 나타낸다. (화면에 보이는 값) 사용자 또는 네트워크 변경에 따라 state를 수정할 수 있다. 객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 리렌더링한다. (setState()를 사용한다.) Props Props (Properties) Props는 데이터 또는 정보를 담은 javascript 객체이다. (함수 매개변수처럼) 단방향 데이터 흐름 : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. 수정할 수 없다. (전달받은 하위 컴포넌트 입장에서는 읽기 전용 데이터이다.) Stat..