Sweet But Psycho

https://velog.io/@kym123123/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94-react%EC%9D%98-setState%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC 비동기로 동작하는 react의 setState에 대하여 Constructor 메서드 내에서 state를 초기화 하는 작업이 없다면, 해당 React 컴포넌트에서 생성자를 구현하지 않아도 된다. 초기화를 위해서는 아래와 같이 작성한다또는 멤버변수(클래스 필드)를 사 velog.io

React 프로젝트를 진행하다보면 아래와 같이 import 형식에 차이가 있는 것을 확인할 수 있다. //the case of A import { A } from A.js //the case of B import anything from B.js { }의 유무에 따라 어떤 차이가 있는 것일까 ✔️A의 경우에는 A 파일에서 export로 내보내면서 지정된 변수로 현재 파일에 불러온다. ✔️B의 경우에는 B 파일에서 default export로 내보내면서 현재 파일에서 다른 변수명으로 지정할 수 있다. //the file of A const A = () => { /// } export A; //the file of B const B = () => { /// } export default B;

함수형 컴포넌트 ✔rafce react arrow functional export component import React from 'react' const Blockchain = () => { return ( ) } export default Blockchain ✔rfc react functional component import React from 'react' export default function Blockchain() { return ( ) } ✔rfce react functional export component import React from 'react' function Blockchain() { return ( ) } export default Blockchain 클래스형 컴포넌트 ✔..

Virtual DOM을 알아보기 전에 HTML이 웹 브라우저에 표현되기까지의 과정을 이해하는 것이 필요하다. ✔브라우저 Rendering Workflow ▶ HTML ~~ 와 같은 elements로 이루어진 HTML을 브라우저에 전달한다. ▶ HTML parsing 브라우저 Render Engine이 코드를 분석(parsing)한다. ▶ DOM Tree elements를 기준으로 DOM nodes를 생성하고 이 DOM nodes로 이루어진 DOM tree를 만든다. ▶ Render Tree DOM tree에 node가 생성될 때마다 동기적으로 attach method를 실행하여 그에 따른 Render Tree를 생성한다. *attach method : 외부 CSS 파일 또는 element의 inline ..

📌useSelector() : 리덕스 스토어의 데이터를 추출 React-Redux Hook, 참조하는 상태와 일치 여부를 판단하고 상태를 가져온다. react-redux 공식 소스코드는 다음과 같다. >> 더보기 import { useReducer, useRef, useMemo, useContext, useDebugValue } from 'react' import { useReduxContext as useDefaultReduxContext } from './useReduxContext' import Subscription from '../utils/Subscription' import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEf..

📌frontend : _actions/types.js 액션 타입 정의하기 export const LOGIN_USER = "login_user"; 📌frontend : _actions/user_action.js axios 모듈과 액션 타입 불러오기 import axios from "axios"; import { LOGIN_USER } from "./types"; LoginUser 로그인 액션 함수 정의하기 export function loginUser(dataToSubmit) { const request = axios .post("/api/auth/login", dataToSubmit) .then((response) => response.data); console.log("로그인 페이로드", request..

📌리덕스를 왜 쓸까? 컴포넌트의 데이터를 관리할 때, 서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우에 사용한다. (컴포넌트마다 공통되는 데이터를 통합적으로 관리하는 경우에는 컨텍스트를 사용한다. ) property : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 state : 컴포넌트의 state를 저장하고 변경할 수 있는 데이터 context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 redux : 서버에서 받은 데이터를 앱 전체에 전달하거나 관리함. (노드의 세션 같은 것인가) 📌redux의 동작 과정 component는 dispatch 함수를 통해 action 을 reducer에 넘겨준다. action은 리듀서에서 처리해야 할 작업의 이름과 ..

입력한 데이터를 화면에 바로 렌더링해보자. 📌useReducer useState보다 다양한 컴포넌트 상황에 따라 다른 값으로 업데이트해주고 싶을 때 사용한다. reducer 함수는 현재 상태, 업데이트를 위해 필요한 정보를 담은 값 (action)을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜줘야 한다. 리덕스에서 사용하는 액션 객체에는 아래와 같이 반드시 어떤 액션인지 알려주는 type field가 꼭 있어야 하지만 { type : '뭐시기', } useReducer 에서 사용하는 액션 객체는 꼭 type을 지니고 있을 필요는 없다. 그리고 굳이 객체가 아니라 문자열이나 숫자여도 상관없다. ✔ Counter.js useReducer를 사용했을..

평균값을 구해보자. 📌Average.js import React, {useCallback, useMemo, useRef, useState} from 'react'; const getAverage = (numbers)=>{ console.log('평균값 계산 중'); if(numbers.length === 0) return 0; const sum = numbers.reduce((a, b)=>a+b); return sum/numbers.length; }; getAverage 함수에 numbers 배열 인자를 받으면 reduce 함수에 의해 numbers의 모든 원소 값을 합산하고 이 반환값을 변수 sum에 할당한다. getAverage 함수의 반환값은 sum/numbers.length이 된다. 따라서 모든 ..

props란 ? 컴포넌트 속성을 나타내는 데이터! 함수 컴포넌트와 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안된다!!! 수정할 수 있는 것은 state이다. props 를 다룰 때에는 순수함수처럼 동작해야 한다. 👉순수함수는 입력값을 바꾸지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수이다. function pureFunc(a, b){ return a + b; } function notPureFunc(account, amount){ account.total -= amount; return amount } 📌함수형 컴포넌트 function Welcome(props){ return Hello, {props.name} } 해도 되고 const Mycomponent = ({nam..