옥수수의 팝콘 성장기

들어가며리액트 개발자라면 누구나 한 번쯤 useEffect의 의존성 배열(dependency array)과 관련된 ESLint 경고를 마주해 본 경험이 있습니다. 저도 현재 회사에서 이미 운영 중인 프로젝트를 인수인계 받아 코드를 열어보니, useEffect의 의존성 배열 때문에 아주 많은 경고를 마주하게 되었고, 그 경고를 하나씩 고쳐나가면서 이 글을 쓰게 되었습니다. useEffect의 의존성 배열을 다루다보면, 특히 함수를 다룰 때 useCallback을 사용하라는 조언을 자주 듣게 됩니다. 왜 함수를 의존성 배열에 넣어야 하고, useCallback은 언제 어떻게 사용해야 할까요?그리고 정말 "처음 한 번만" 실행하고 싶은 useEffect는 어떻게 다뤄야 할까요?이 글에서는 useEffect와 ..

리액트 컴포넌트를 개발하다 보면 예상치 못한 리렌더링으로 성능 저하를 겪는 경우가 있습니다.이 문제를 해결하기 위해 useCallback이나 useMemo 같은 훅을 사용하곤 하죠.이 훅들의 핵심 원리는 바로 '안정성(Stability)'입니다. '안정성'이란 무엇일까요?간단히 말해, 컴포넌트가 다시 렌더링되더라도 특정 값의 메모리 주소(Reference)가 변하지 않고 동일하게 유지되는 상태를 의미합니다. 이 개념을 이해하면 리액트 성능 최적화의 원리를 더 깊이 있게 파악할 수 있습니다. 메모리 주소(Memory Address)란?메모리 주소를 쉽게 비유해 볼까요?컴퓨터의 메모리(RAM)를 거대한 아파트 단지로 생각하면, 메모리 주소는 그 아파트의 동, 호수와 같습니다. 아파트 단지 전체: 컴퓨터의 메..

개발을 하다보면, 특정 변수가 비어있을 때 기본값을 할당하기 위해 ?? 또는 || 연산자를 사용하는 일이 많습니다.const list = data ?? [];const list = data || []; 두 연산자는 무엇이 다를까요???과 || 두 연산자 모두 기본값을 할당한다는 공통점이 있지만, '존재하지 않는 값'을 판단하는 기준이 다릅니다. Falsy 값과 Nullish 값의 차이존재하지 않는 값, 즉 비어있는 값의 기준을 알아보기 위해서는 먼저 Falsy와 Nullish 값의 차이를 알아야합니다.Falsy 값: 자바스크립트에서 Falsy 값은 다음과 같습니다.nullundefinedfalse0, -00n (BigInt 0)"" (빈 문자열)NaN (Not a Number)Nullish 값: Nu..

상태상태컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터→ boolean, String, number 등의 자료형뿐만 아니라 객체, 서버에서 불러오는 데이터 등 모든 것조건부 렌더링✅ 삼항 연산자{조건?(참):(거짓)}{isClicked ? alert("참"):alert("거짓")}✅ &&{조건 &&(참)}{isClicked && alert("참")}✅ ||{조건 &&(참)}{isClicked && alert("거짓")}useState💡 state란 변수. setState는 state값을 변경시켜주는 함수. useState는 state, setState를 return하면서 초기값을 설정해주는 hook. ✅ let, const와는 다르게 렌더링이 되는 변수이기 때문에, useState를 사..

🚀 useReducer ✅ useReducer란? - useReducer는 useState의 심화 버전으로 볼 수 있다. - 복잡하고 수정해야하는 경우의 수가 많은 state일 경우, 여러개의 state를 묶어 useReducer로 관리하는 것이 효율적이다. - state 값이 변경되는 시나리오를 제한적으로 두어 변경을 빠르게 확인하고자 하는 목적성을 지닌다. 즉, dispatcher로만 state를 수정할 수 있게 해서, state 접근은 컴포넌트에서만 가능하게 하는 것이다. ✅ 사용방법 import { useReducer } from 'react'; function reducer(state, action) { if (action.type === 'changed_name') { return { name..

🚀 useContext ✅ context를 사용하는 이유 - 부모 컴포넌트에서 자식 컴포넌트를 내려주는 것을 prop 내려주기라고 하고, 내려주는 prop이 많아지면 props drilling이라고 부른다. 사실 props drilling을 해결하기 위해 정말 다양한 방법이 제시되는데, context도 그 중 하나이다. - 이 context를 함수형 컴포넌트에서 사용할 수 있게 해주는 것이 useContext 훅이다. ✅ 사용방법 import { createContext, useContext } from 'react'; // (1) const Context = createContext(defaultValue); export default function MyApp() { return ( // (2) );..

🚀 useRef ✅ useRef란? - 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장하는 훅 ✔️ useState와 다른점 - useRef의 반환값은 객체여서, current 값으로 접근, 변경 가능하다. - useRef는 값이 변해도 렌더링을 발생시키지 않는다. 즉, useRef는 렌더링에 영향을 미치지 않는 고정값을 관리하기 때문에, 렌더링을 발생시키지 않고 원하는 값을 저장할 수 있다. 🚀 정리 🩵 렌더링에 영향을 미치지 않고 값을 저장하고 싶다면, useRef를 사용한다.

🚀 useMemo ✅ useMemo란? - 비용이 큰 연산에 대한 결과를 메모이제이션해두고, 저장된 값을 반환하는 훅 ✅ 사용방법 import { useMemo } from "react"; const memo=useMemo(()=>{ // 값을 반환하는 생성 함수 // 컴포넌트도 가능 },[// 의존성 배열 ]) 🚀 useCallback ✅ useCallback이란? - 인수로 넘겨받은 콜백 자체를 기억하는 훅. 즉, 특정 함수를 새로 만들지 않고 재사용한다. - useMemo는 값을 기억하지만, useCallback은 함수를 기억한다. ✅ 사용방법 import { useCallback } from "react"; const memo=useCallback( function func(){ },[// 의존성..

🚀 useEffect ✅ useEffect란? 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 ✅ useEffect의 일반적인 형태 import { useEffect } from "react"; useEffect({ // 실행할 부수효과가 포함된 함수 },[// 의존성 배열 ]) - useEffect는 의존성 배열에 담긴 값을 보면서, 이 값이 이전과 하나라도 다르다면 부수 효과를 실행한다.

🚀 useState useState는 리액트를 처음 접했을 때, 가장 먼저 사용하게 되는 훅이라고 할 수 있다. 그렇다면 useState의 정확한 원리를 어떻게 될까? ✅ useState란? - 함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅 ✅ 기본 사용법 import { useState } from 'react' const [state, setState]=useState(initialState) - useState는 기본적으로 위와 같이 사용하고, initialState를 지정해주지 않은 경우에는 undefined로 초깃값이 설정된다. ✅ useState 동작 원리 function Test(){ let state="어서오세요" function handleClick(){..