[React] 화면에 뿌릴 때 map은 되는데 forEach는 안 되는 이유

map 과 forEach 차이const data.forEach((item) => { return item + 2;})const data.map((item) => { return item + 2;})forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함 선언형 프레임워크선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬 리액트 {items.map(item => ( {item} ))}기존 방식const ul = document.createElement("ul");items.forEach(item => { const li = document.createElement("li");..

• format_list_bulleted JavaScript/React
• · 2025. 10. 8.
• textsms

[React] 상태관리 Redux vs Zustand (ft. 마키마 ? 레제 ? )

상태관리 ?리액트에서 상태란 useState 를 통해 관리를 함 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구Redux (지배의 악마)구조적이고 강력한 상태관리 툴액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재 상태 추적 가능 너무 많은 기능에 오히려 통제가 강함Zustand (시골쥐)기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장 Hook 을 활용하여 직관적임useStore 로 set , get 모두 가능 코드가 짧고 직관적임상태 추적에선 불리 미들웨어 같은 작업은..

• format_list_bulleted JavaScript/React
• · 2025. 9. 29.
• textsms

[React] useState 는 왜 직접 값을 넣지 않을까 ?

useState ?React 사용하다보면 가장 많이 쓰는 상태를 의미하는 메서드항상 선언을 [변수 , set변수] = useState() 형태를 띔 예시 코드const [member, setMember] = useState(0);const num = ['1','2','3'];if(num.length === 3) { setMember(3)}else { setMember(0)}굳이 set ?위의 코드를 보면 setMember 를 통해 member 는 3의 값을 가지게 되는데 사실 바로 member 에 적용하면 되는데 왜 그러는걸까 ? 기본적으로 react는 set을 통해 변화를 감지하는데 set을 통해 변화를 감지하게 되면 렌더링을 진행하여 화면을 업데이트 시켜준다 직접 member = 3; 이..

• format_list_bulleted JavaScript/React
• · 2025. 9. 8.
• textsms

[React] 11. useLayoutEffect (ft. Time is running out)

useLayoutEffect 란 ?브라우저가 화면을 그리기 전에 마지막으로 작업 할 수 있게 해주는 훅 useEffect 보다 먼저 실행됨(단, 브라우저가 화면 그리기 전에 동작하는 동기적 실행이므로 성능에 영향을 줌) useLayoutEffect 렌더링 순서렌더링 시작dom 생성useLayoutEffect 브라우저 화면 그리기 시작 useEffect useLayoutEffect vs useEffect (Time is running out)useEffect 의 경우 브라우저가 화면을 그린 이후에 동작 > 유저 입장에서 화면 깜빡이는게 보임 useLayoutEffect 의 경우 브라우저가 화면을 그리기 전 동작 > 유저 입장에서 자연스러움 즉 마지막으로 화면이 그려지기 직전 화면과 관련해서 수정 할 기회..

• format_list_bulleted JavaScript/React
• · 2025. 9. 3.
• textsms

[React] 10. Shadow DOM (ft. 영역전개)

“접근 금지” – Shadow DOM, 주술회전 ‘영역 전개’“내 스타일에 간섭하지 마세요. 여긴 Shadow 영역입니다.”웹 개발을 하다 보면 이런 생각이 들 때가 있다. “왜 내가 꾸민 스타일이 자꾸 깨지지…?내 버튼은 분명히 예뻤는데…?”(※ 정확히 말하자면 React 개념보단 웹 컴포넌트 쪽에 가까워요.하지만 따로 섹션이 없으니 여기 React 영역에 올려두겠슴다 🙃)스타일의 영역 전개 – Shadow DOM이란?Shadow DOM은 말 그대로 DOM의 그림자 세계.브라우저가 제공하는 웹 컴포넌트(Web Components) 기능 중 하나로,외부 스타일이나 스크립트가 내부에 간섭하지 못하는 독립된 DOM 트리를 만드는 것.마치 자신만의 세계를 펼치는 고죠 사토루의 ‘무량공처’처럼,이 영역 안에..

• format_list_bulleted JavaScript/React
• · 2025. 8. 4.
• textsms

[React] 9. useMemo (최적화)

useMemo (Memoization)최초로 계산하였을 때의 값을 메모리에 저장하고 동일한 계산에 대해서 각자 계산하는게 아닌 첫 번째 계산한 후 저장한 메모리에서 가져옴-> 불필요한 연산을 방지해줌(연산 줄임)import { useMemo, useReducer, useState } from "react";function Exam() { const [count, setCount] = useState(0); const [value, setValue] = useState(1); // 복잡한 연산 const expensiveCalculation = (num) => { console.log("⚡ 계산 중..."); let result = num * 2; for (let i = 0; i ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms