그린티_

서론React 프로젝트를 하다 보니 API 호출이 정말 많았음useEffect에서 fetch로 데이터를 받고, 로딩 상태, 에러 상태를 관리하고... "매번 이렇게 해야 하나?" 싶었음그리고 데이터를 받은 후에 같은 데이터를 또 받으려고 하면 불필요하게 API를 또 호출하더라"이미 받은 데이터인데 왜 다시 받아?"라는 생각이 들었음, 그러다가 React Query와 SWR 같은 라이브러리를 발견했음이들이 어떻게 다르고, 언제 뭘 써야 하는지 정리해봄본론문제 1: 반복되는 데이터 페칭 코드// 모든 컴포넌트에서 이렇게 해야 함...function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoa..

서론React 코드를 작성하면서 항상 궁금했음 "React가 뭐가 그렇게 빠르지? 매번 다시 렌더링하는데?" 찾아보니 Virtual DOM이라는 게 있고, Reconciliation이라는 과정이 있더라 "실제 DOM을 직접 건드리지 말고, 가상의 DOM에서 비교한 다음에 필요한 것만 업데이트한다"는 거 같았음 그래서 Virtual DOM이 뭐고, Reconciliation이 뭐고, 어떻게 빠르게 하는지 정리해봄본론DOM이 뭐냐?먼저 DOM(Document Object Model)을 이해해야 함 안녕하세요 첫 번째 문단 이 HTML을 브라우저가 해석하면 이런 구조의 DOM 트리가 생김:Document └── html └── body └── d..

서론React를 쓰다 보니 useState, useEffect 같은 Hook들을 자주 쓰게 됨근데 같은 로직을 여러 컴포넌트에서 반복하게 되는걸 확인함"이걸 어디 따로 빼서 재사용할 수 없을까?" 싶었음그러다가 Custom Hooks라는 게 있다는 걸 알게 됨Custom Hooks를 쓰면 로직을 재사용 가능한 함수로 만들 수 있다고 함그래서 Custom Hooks가 뭐고, 어떻게 만드는지 정리해봄본론Custom Hooks란?Custom Hook은 state 로직을 재사용하기 위한 JavaScript 함수여러 컴포넌트에서 같은 로직이 반복되면, 그걸 Custom Hook으로 만들어서 공유할 수 있음Custom Hook의 규칙:함수 이름은 use로 시작해야 함 (useXxx 형태)Hook은 Hook 안에서만..

Framer Motion으로 React 애니메이션 마스터하기서론React에서 애니메이션을 만들려고 하니까 CSS 애니메이션도 있고, 라이브러리도 여러 개더라 그 중에 Framer Motion이라는 게 있다고 들었음. 처음엔 "그냥 CSS로 하면 되지 않나?" 싶었는데, 찾아보니 훨씬 강력하더라 Framer Motion을 쓰면 복잡한 애니메이션을 간단하게 만들 수 있다고 함. 그래서 Framer Motion이 뭐고, 어떻게 쓰는지 정리해봄.본론Framer Motion이 뭐야?Framer Motion은 React를 위한 애니메이션 라이브러리 선언적 문법으로 복잡한 애니메이션을 간단하게 만들 수 있음Framer Motion의 철학:애니메이션을 "선언적으로" 작성 (CSS 프레임처럼)JSX 안에서 완전히 제어 ..

서론React로 프로젝트 만들다가 컴포넌트 구조가 깊어지니까 답답한 상황이 생기는걸 볼 수 있음최상위 컴포넌트에 있는 데이터를 맨 아래 컴포넌트에서 써야 하는데, 중간에 있는 컴포넌트들한테도 전부 props로 넘겨줘야 했음중간 컴포넌트들은 그 데이터를 쓰지도 않는데 단순히 전달만 하는 용도로 props를 받고 있었음"이거 뭔가 비효율적인데?" 싶어서 찾아보니까 이게 props drilling이라는 문제였고, 해결 방법도 있더라그래서 props drilling이 뭔지, 어떻게 해결하는지 정리해봄본론props drilling은 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐가는 현상을 말함쉽게 말하면 데이터를 아래로 계속 파내려가는(drilling) 느낌props drillin..

서론React 공부하면서 useState는 익숙해졌는데, 어느 날 코드 보다가 useRef라는 게 나오더라고 처음엔 "이것도 상태 관리하는 건가?" 싶었는데 막상 써보니까 useState랑은 완전 다른 용도였음특히 input 태그에 자동으로 포커스 주고 싶을 때 useRef 없이는 방법이 없더라 그래서 useRef가 정확히 뭐고 언제 쓰는 건지 정리해봄본론useRef는 렌더링에 영향을 주지 않고 값을 저장하거나 DOM 요소에 직접 접근할 때 사용하는 Hook임useState와 비슷해 보이지만 완전 다른 용도로 쓰임useState vs useRef 차이점useState의 특징값이 바뀌면 컴포넌트가 다시 렌더링됨화면에 보이는 데이터를 관리할 때 사용값이 변경되면 사용자가 즉시 확인 가능useRef의 특징값이..

서론요즘 프론트엔드 공부하면서 React를 배우고 있는데, 처음엔 그냥 "웹 만드는 라이브러리구나~" 정도로만 생각했음근데 쓰다보니까 일반 HTML/CSS/JS로 만드는 것과 확실히 다른 느낌이 들더라고 특히 버튼 클릭하면 화면이 바뀌는 거 만들 때 코드가 훨씬 깔끔해지는 게 신기했음그래서 React가 정확히 뭔지, 왜 다들 쓰는 건지 궁금해서 찾아봤음본론React는 페이스북(지금은 Meta)에서 만든 UI를 만들기 위한 JavaScript 라이브러리임쉽게 말하면 웹 페이지의 화면을 더 편하게 만들 수 있게 도와주는 도구라고 보면 됨React의 핵심 특징1. 컴포넌트 기반화면을 레고 블록처럼 작은 조각(컴포넌트)으로 나눠서 만들 수 있음버튼, 헤더, 카드 같은 걸 각각 컴포넌트로 만들어서 조립하는 느낌코..

상태(state)란?상태는 컴포넌트의 동작에 영향을 주는 데이터!사용자의 입력이나 외부 데이터에 따라 변할 수 있는 값React 안에서 예를 들어,버튼이 눌렸는가?입력창에 적힌 값은 무엇인가?현재 로그인한 사용자는 누구인가?이런 것들이 모두 상태라고 볼 수 있음상태 관리란?상태를 저장하고, 변경하며, 그에 따라 UI를 업데이트하는 과정React는 이런 상태 관리를 아주 잘 도와주는 라이브러리 상태 관리를 왜 해야 할까?상태가 변할 때 화면이 자동으로 다시 렌더링되도록 만들기 위해서!예를 들어, 버튼을 클릭해서 숫자가 올라가야 하는데 이 숫자 상태를 관리하지 않으면 화면은 그대로인 경우가 있죠또한, 규모가 커질수록 상태가 여러 컴포넌트에서 동시에 쓰이거나, 상태 변화에 따라 여러 컴포넌트가 영향을 받을 수..

React란?React는 Facebook에서 만든 UI 라이브러리로, 사용자 인터페이스를 컴포넌트 기반으로 구축할 수 있게 도와줌!대부분의 React 프로젝트는 SPA(Single Page Application) 형태로 개발됨 SPA는 하나의 HTML 파일로 시작해서, 필요한 화면을 브라우저에서 JavaScript로 동적으로 렌더링하는 구조특징컴포넌트 기반: 화면을 작은 단위로 나눠 재사용 가능Virtual DOM: 효율적인 렌더링을 위한 가상 돔 구조CSR 방식 기본: 초기 로딩 이후 빠른 사용자 경험 제공SPA란?SPA(Single Page Application)는 말 그대로 하나의 HTML 페이지에서 모든 화면을 구성하는 웹 애플리케이션 구조특징최초에 서버에서 index.html 한 장만 내려받음이..

1. Node.js 설치 및 개요https://nodejs.org/ko/ Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org노드JS(Node.js)는 자바스크립트를 이용하여 서버사이드 개발을 가능하게 하는 오픈소스 플랫폼!페이지에서 Node.js 다운로드를 진행 해주시면 됩니다!2. React Project 생성하기터미널을 실행하고 아래 명령어 한 줄이면 프로젝트가 생성됨 ) 프로젝트 이름 : my-app npx create-react-app my-app 그 후 생성된 파일 폴더 경로로 가서 아래 명령어를 입력npm start 그러면 이렇게 실행 되는 ..