Will find a way

지난번 글에서 Redux에 대해서 포스팅 했는데 제대로 이해가 되지 않아서 예제로 확인해보려고 한다.(App.js 는 작성하지 않아도 있다고 가정하고 예제를 만들어 보려고 한다.모든 컴포넌트는 src에 있음을 염두해두고 코드를 작성해보려고 한다.) Reducer 부분reducer/orderReducer/index.js// Reducer 함수// 초기값을 기본으로 할당// state// 기본값을 할당// 초기에는 기본값이 사용된다.const initialState = { order: ""}const reducer = (state = initialState, action) => { // state 초기에는 기본값으로 할당한 initialState가 할당되ㅏ고 // 상태를 업데이트 이후에는 이전 상태값을..

https://despiteallthat.tistory.com/192 [Redux] Redux란?오늘은 Redux에 대해 알아보겠습니다. :) [ Redux ] Redux(리덕스)란 JavaScript 상태관리 라이브러리입니다. 여기서 말하는 상태(State)란 간단하게 말하자면 데이터를 말합니다. 덧붙이자면 상태는 컴포despiteallthat.tistory.comhttps://jwdevv.tistory.com/37 [Redux toolkit] 2 - Slice, Reducer, Action, Thunk란?지난 글에서 Redux와 Redux Toolkit의 차이점에 대해 알아보았다. [Redux Toolkit] 1 - Redux Toolkit이란? | Redux와 Redux Toolkit 차이 Redu..

들어가기 전우리는 단순히 상태를 관리할 때 useState를 사용해왔다. 하지만 여러개의 상태의 값을 구분 지어서 사용할 때가 있을 것이다. 그때에도 과연 useState만을 고집할 것인가? 그래서 오늘 그 문제를 해결해보고자 useReducer에 대해서 알아 볼 것이다.  목차1.  useReducer 란?2.  state, dispatch, initialState3.  사용방법 및 사용예제 1.  useReducer 란?- useReducer는 상태관리를 하는 hook으로 useState를 대체할 수 있다.- 복잡한 여러개의 상태를 다룰 경우 사용할 때 용이하다.- 비동기 처리시에도 가독성의 장점을 가질 수 있다. 2.  state, dispatch, initialStateuseReducer를 사용하..

목차1.  클로저란?2.  어휘적(Lexical) 환경3.  스코프 (블록 스코프 / 함수 스코프 / 렉시컬 스코프)   클로저 - JavaScript | MDN클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생developer.mozilla.org출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 1. 클로저클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합이다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공한다.Javascript에서 클로..

들어가기 전에학원에서 프로젝트를 하면서 React를 사용하게 됐는데 React의 가상 DOM의 높이값을 가져와야 할 때가 있었다. 일반 JS라면 tag에 접근하고 싶을 때 getElementById 또는 querySelector 를 사용하면 된다. 하지만 코드는 위에서 아래로 실행하기 때문에 React에서 내가 알던 기존의 방법으로는 태그를 참조할 수가 없었다. 그렇게 공부하던중 useRef라는 React에서 사용하는 Hook을 알게 됐다. useRef는 사용하는 방법도 매우 간단하기 때문에 짧게 알아보도록 하자 useRef란?useRef는 태그의 접근할 떄 사용할 수 있는 리액트 hook 중 하나다. 사용방법 및 예제import { useRef } from 'react';function App() { ..

목차1. Context API 란?2. Context API를 사용하는 이유?3. 사용방법 및 실행 예제  1. Context API 란?React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법이다.Context를 사용하면 props를 사용하지 않고도 상태변수에 접근이 가능하다. 2. Context API 를 사용하는 이유리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐른다. 그러기 위해서 우리는 지금까지 props를 사용하여 부모 컴포넌트에서 직계 자식 컴포넌트로 데이터를 전달했다. 하지만 props로 상태를 전달하면 계속적으로 중간 컴포넌트를 거쳐야하는 불편함이 있다. (이러한 것을 'Prop Drilling' 이..

목차1. useMemo 란?2. useMemo 사용법3. useMemo 사용 예제4. 결론 및 요약  1. useMemo 란useMemo는 리액트에서 사용하는 hook 중에 하나로 컴포넌트 성능을 최적화 해준다.그럼 어떻게 컴포넌트의 성능을 최적화 해준다는 걸까? 좀 더 자세히 알아보자. useMemo를 알기위해서는 memoization을 알아야한다. 메모이제이션을 검색하면 다음과 같이 정의가 나온다.메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.- 나무위키 참고메모이제이션을 이용하는 hook은 useMemo..

1. useState 란?리액트 16.8 이전 버전에는 함수형 컴포넌트에서 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능을 도입하고 함수형 컴포넌트에서 상태를 관리할 수 있게 됐다. 상태관리를 하는 Hook 중에 가장 기본이 되는 것 중에 하나가 useState이다.  2. useState의 사용법1. 상단에 useState 함수를 import 한다.import { useState } from 'react';2. 배열 구조분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정한다.const [state, setState] = useState(1);3. state는 상태값이고, setState 함수는 상태값을 바꿔준다. 3. useSt..

Link 컴포넌트란?Link 컴포넌트는 리액트에서 사용하는 페이지 이동을 하기 위한 컴포넌트이다.우리는 리액트를 접하기 html 을 이용하여 태그를 만들었다.HTML 에서는 a 태그를 이용하여 페이지 이동을 했는데 왜 굳이 Link 컴포넌트가 있을까? Link 컴포넌트와 a태그의 차이Link 컴포넌트를 이용하면 페이지가 새로고침이 되지 않고 자연스럽게 페이지를 이동할 수 있고 더 빠르다.이러한 특징으로 마치 어플을 사용하는 느낌을 준다. 반면에 a 태그를 이용하여 새로고침이 되면서 페이지를 이동하기 떄문에 페이지 이동이 느리며 끊기는 듯한 느낌을 준다.사용자 입장에서는 Link 컴포넌트가 사용하는데 있어서 더 편리함을 느낄 것이다.그럼 이제 Link 컴포넌트를 어떻게 쓰는지 알아보자. Link 컴포넌트 ..

이번글에서는 React의 class 컴포넌트와 setState를 이용하여 state의 숫자가 1씩 증가하는 함수를 만들어 보자.(리액트의 상태변화를 중점을 두어서 CSS는 별도로 올리지 않았다.) index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );reportWebVitals(); create-react-app 을 실..