jjangsh 님의 블로그

01. Zustand의 등장배경 (1) 상태관리의 중요성 상태관리는 모든 리액트 애플리케이션에서 매우 중요합니다. 작은 규모의 애플리케이션에서는 상태관리가 간단하지만, 애플리케이션이 커질수록 상태관리는 점점 더 복잡해집니다.  상태(state)는 리액트 애플리케이션에서 데이터와 UI의 현재 상태를 나타냅니다. 상태가 변경되면 UI도 업데이트되어야 합니다.  (2) Zustand의 필요성 기존의 상태관리 라이브러리인 Redux는 제공하는 기능과 연계된 미들웨어 등 매우 강력한 퍼포먼스를 자랑하지만, 설정과 사용법이 복잡했죠! Zustand는 상태관리 본연의 기능에 집중하여 위와 같은 복잡성을 줄이고, 보다 간단하고 직관적인 상태관리 기능을 제공합니다.  02. Zustand의 주요 개념 (1) Zu..

(1) 등장배경 (1)-1. 비동기 로직의 복잡성 해결 필요기존의 useEffect와 useState를 사용한 비동기 데이터 처리 방식은 상태 관리가 복잡하고 코드 중복이 많아 유지보수가 어려웠어요.Redux Thunk와 같은 미들웨어를 사용해도 비동기 로직의 테스트가 복잡하고 보일러플레이트 코드가 많이 생기기 때문에 더 효율적인 도구가 필요했습니다.  (1)-2. 서버 상태 관리의 어려움 서버 상태는 클라이언트 상태와 달리 캐싱, 동기화, 재검증 등 관리해야 할 요소가 많아 기존 방법으로는 관리가 어려웠어요.이를 해결하기 위해 등장한 것이 TanStack Query로, 서버 상태 관리를 쉽게 해 주고 복잡한 비동기 로직을 단순화해 줍니다.  (2) 개념 (2)-1. 서버 상태 관리 라이브러리 TanS..

01. Custom hook이란? (1) input 개수만큼 늘어나는 useState, event handler 들 // src/App.jsximport React from "react";import { useState } from "react";const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState("..

01. useContext 소개  (1) react context의 필요성 우리는 일반적으로 부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때, props를 사용했습니다.그러나 부모 → 자식 → 그 자식 → 그 자식의 자식 이렇게 너무 깊어지게  prop drilling 현상이 일어나요. prop drilling의 문제점은깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워져요.어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수밖에 없죠. 그래서 등장한 것이 바로 react context API라는 것이고, useContext hook을 통해 우리는 쉽게 전역 데이터를 관리할 수 있게 되었습니다.   (2) context API 필수 개념createCon..

01. useRef란?  (1) useRef hook 소개useState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 hook이라고 할 수 있어요. Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것이 본질적 특징이죠. 이 특징을 이용해 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소를 다루기 위한 용도로도 자주 사용된답니다.  (2) 사용방법 import "./App.css";import { useRef } from "react";function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. );}export default App;..

01. useEffect (1) useEffect는 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용합니다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React, { useEffect } from "react"; 로 import 해서 사용합니다. (2) 코드로 보는 useEffect 기초브라우저에서 우리가 App 컴포넌트를 눈으로 보는 순간, 즉 App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있..

01. useState  (1) 정의useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해 줍니다. (2) 복습 useState의 기본적인 형태는 아래처럼 생겼습니다.const [state, setState] = useState(initialState);원래는 useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습일 뿐입니다. 우리는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있었습니다. 그리고 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 합니다.   02. 함수형 업데이트   (1) 함수형 업데이트란? setState를 사용하는 방식에는 우리가 알고 ..

01. CSS-in-JS란?  (1) css-in-js란 무엇일까? CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이죠. CSS-in-JS 방식을 사용하기 위해 우리는 새로운 패키지를 사용할 것입니다.  ☝ css-in-js를 사용할 때, 이런 장점이 있어요!기존에 css 파일을 작성하고, import하는 방식에서는 style을 작성할 때 조건문 등의 로직을 적용할 수 없었어요. 하지만, css-in-js를 사용함으로써 style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있어요.  (2) styled-components란 무엇일까? style..

01. Component  (1) 컴포넌트는 리액트의 핵심컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 그렇지만 우리 모두, 리액트 이전에 프론트엔드 개발 환경을 경험하시지 못했다면 무엇이 불편했고 리액트와 같은 컴포넌트 기반의 UI 라이브러리가 무엇을 편하게 해 주는지 모르실 거예요.시작하면서 얘기드렸듯, 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 말이 조금 어려운데,  컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 ..

01. state  (1) state란 무엇일까요? 💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.바뀌는 이유는 UI(엘리먼트)로의 반영을 위해서입니다.  (2) state 만들기 💡 State를 만들 때는 useState()를 사용한다. import React, { useState } from 'react';function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state return ;} const name = “김할아” 라는 코드는 const [name, setName] = useState("김할아");  라는 state로 작성할 수 있습니다. 우리는 앞으로 useState 라는 함수를 이용해서 st..