리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API 를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리 할 수 있다. 특히, Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 매우 개발 방식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용한다. Redux는 Context API 가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReducer 라는 Hook 이 존재하기도 전 부터 만들어진 라이브러리다. 사실 C..

1. 클로저란? 클로저는 프로그래밍 언의 스코프와 관련된 속성으로, 특히 함수형 프로그래밍에서 중요하다. 여기서 함수형 프로그래밍에서 중요한 이유는 1. 테이터 은닉 : 클로저를 사용하면, 특정 함수에 한정된 변수를 만들 수 있다. 이는 외부에서 해당 변수에 접근하거나 수정하는 것을 막을 수 있다. 이런 특성은 모듈화, 정보 은닉, 캡슐화 등의 개념과 일치하며, 프로그램의 안정성을 높인다. 2. 상태유지 : 클로저는 함수가 종료된 이후에도 특정 데이터를 기억하는데 사용한다. 이는 함수가 일종의 상태 유지하는 것이다. 예를 들어 함수 호출 간에 일종의 메모리를 갖게 해준다. 이러한 특성은 반복자, 비동기 프로그래밍, 함수 메모이제이션 등에 유용하게 사용된다. 3. 고차 함수와의 상호작용 : 클로저는 고차 ..

React context 1. react context의 필요성 우리는 일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달해준다. 이를 props를 사용했다. 그러나 부모->자식-> 그의 자식-> 그의 자식의 자식 / 이렇게 너무 깊어지면 prop drilling 현상이 일어난다. prop drilling의 문제점은 1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로 왔는지 파악이 어렵다. 2. 어떤 컴포넌트에서 오류가 발생할 경우 오류 파악이 어렵다. 출처 : https://www.copycat.dev/blog/react-context/ Your Guide To The React Context API - CopyCat Blog This article explains the drawbacks ..

useRef란? useRef는 React Hooks의 하나로, DOM 노드나 다른 React 컴포넌트와 관련된 값을 기억하고 업데이트 할 수 있는 객체를 생성한다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 콘솔을 확인해보면, ref이 값은 이렇게 출력된다. 이 뿐만 아니라 변경이 가능하다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useR..

useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 한다. const [state, setState] = useState(initialState); 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( )안에 수정할 값이 아니라 함수를 넣는 것이다. 그리고 그 함수의 인자에서 현재 state를 가져올 수 있고, { }안에서는 이 값을 변경하는 코드를 작성할 수 있습니다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return curren..

useEffect를 사용하는 이유 useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무엇가를 실행하고 싶다거나 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무엇가를 실행하고 싶을 때 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React { useEffect } from 'react'로 import 해서 사용한다. useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행된다. 전체의 흐름은 아래와 같다. inpust 값을 입력 value 즉 state가 변경 state가 바뀌었기 때문에 → app 컴포넌트가 리렌더링 리..