react

들어가며: useEffect와 SSR의 만남 🌱  최근 Next.js를 활용한 프로젝트에서 햄버거 메뉴를 구현하던 중 흥미로운 문제에 직면했습니다. 단순해 보이는 햄버거 메뉴 기능이었지만, Next.js의 서버 사이드 렌더링(SSR) 환경에서 예상치 못한 도전 과제를 마주하게 되었죠.처음에는 단순히 다음과 같이 구현했습니다:const [isMenuOpen, setIsMenuOpen] = useState(false);const toggleMenu = () => { setIsMenuOpen(!isMenuOpen);};하지만 이 코드는 SSR 환경에서 문제를 일으켰고, 결국 다음과 같이 수정해야 했습니다:"use client";import { useState, useEffect } from "react";..

React로 웹 애플리케이션을 만들다 보면, 여러 개의 데이터를 화면에 표시해야 하는 경우가 많습니다. 예를 들어, 할 일 목록을 보여주거나 상품 목록을 나열하는 경우가 그렇죠. 이때 React 개발자들은 map 함수를 사용하여 데이터를 하나씩 꺼내 화면에 보여주는 방식을 자주 사용합니다.이때 중요한 것이 바로 key prop입니다. React는 화면을 효율적으로 업데이트하기 위해 key prop을 사용하는데, key={index}처럼 배열의 인덱스를 key 값으로 사용하면 예상치 못한 문제가 발생할 수 있습니다.이 글에서는 React의 reconciliation 알고리즘과 key 값의 역할을 바탕으로, 왜 key={index}가 문제인지, 그리고 안전하게 리스트를 렌더링하는 방법은 무엇인지 자세히 알아..