1. useAsyncEffect useAsyncEffect는 React Hooks중 하나인 useEffect를 통해 제작한 커스텀 훅입니다. 기본적으로 useEffect를 비동기 작업에 사용 할 수 있게 확장한 커스텀 훅이라고 할 수 있습니다. 이를 사용하면, useEffect 내에서 async/await를 사용하여 비동기 작업을 수행할 수 있습니다 (useAsyncEffect 코드) import { useEffect, DependencyList } from "react" export const useAsyncEffect = (asyncEffect: () => Promise, deps?: DependencyList) => { useEffect(() => { const asyncEffectWrapper =..
🐛 도입 리액트(React)는 보통 HTML과 유사한 JSX 코드로 작성하는 경우가 대부분입니다. 이 JSX의 편리함 때문에 리액트를 좋아하는 사람도 많지만, 이 JSX 때문에 리액트를 싫어한다는 사람도 많다고 합니다. 이번 블로깅에서는 이러한 JSX와 JSX를 변환(transpile) 해주는 babel에 대해서 알아보도록 하겠습니다. 📝 JSX가 뭘까? JSX를 설명하는 리액트 문서를 바탕으로 살펴보도록 하겠습니다. // 아래 변수 선언을 살펴보자 const element = Hello, world! ; 위 선언문을 보면 문자열도 HTML도 아닙니다. 이 문법을 JSX라고 부르며, JSX는 HTML 태그를 변수로 할당하고, 호출하며, return 할 수 있는 확장 문법이라고 볼 수 있습니다. 이를 통해..
⚡️ useState는 동기? 비동기? 삐삐 프로젝트를 진행하며, 멘토님과 얘기를 하던 도중 useState는 동기일까 비동기일까에 관련된 내용이 나오게되었다. 단순히 useState는 상태를 관리하는 훅으로만 알고 있었던 나를 반성하며, useState의 정체를 파헤쳐 보도록 할 예정이다. 📌 useState는 비동기 이다! 결론부터 얘기하자면 useState는 비동기 이다. 좀 더 자세히 얘기하자면, 상태를 변경시키는 setter 메소드인 setState가 비동기적으로 동작한다. Q. 리액트는 왜 setState를 통해서만 상태를 변경시키는 걸까? A. 직접 상태값을 변경하지 말아야하는 이유는, 이전 상태값을 바탕으로 업데이트된 상태값을 비교해 리액트가 감지하기 때문이다. 리액트는 가상 DOM(Vir..
⚡️ Counter 만들어 보기 +, - 버튼 생성 후 + 버튼을 누를 시 +1을 -버튼을 누를 시 -1이 되도록 Counter 컴포넌트 구현해보기 App.js import React from "react"; import { Routes, Route, Link } from "react-router-dom"; import Home from "./pages/Home"; import Counter from "./pages/Counter"; function App() { return ( Home / Counter ); } export default App; Counter.js import React, { useState } from "react"; const Counter = () => { const [num,..
⚡️ React 실습하기 지난주부터 react 학습을 진행했는데, 아직 익숙하지 않고 개념이 명확히 정리되지 않는 부분이 많은거같음 작은 기능들부터 구현해가며 복습할 예정임 기초부터 복잡한것까지 순차적으로 실습해볼 예정입니다 ⚡️ 무엇을 만들어볼까? 버튼 눌럿을때 카운트 올라가는거 만들어보기 메모 앱 만들어보기 추후 만들어볼 목록은 이전 과제들을 진행해나가며 업데이트 예정 ... ⚡️ 어떤 플랫폼을 사용할까? 코드샌드박스나 코드펜을 써보려고 했으나, vs code와 실제 사용법이 조금 다른것 같아서 vs code를 이용해서 실습 예정임
