[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

[개발환경] npm vs pnpm 차이 ? (ft. 범부)

npm , pnpm패키지 설치 및 의존성 관리 툴 (node , react, next, 이외의 라이브러리, 프레임워크 등등..) 로 쓰이는 기술설치 : npm install 라이브러리명 , pnpm install 라이브러리명 이런식으로 사용업데이트 : npm install , pnpm install 형태npm 단점 (pnpm이 나오게 된 이유)프로젝트마다 같은 패키지가 중복 설치됨node_modules 가 너무 무거움 + 패키지 중복 다운로드node_modules 내부 레벨이 너무 많음 (타고 들어가는 폴더가 많음)pnpm하드 링크 기반의 저장소 (즉, 하나만 설치하고 다른 프로젝트는 링크로 연결만 함)npm 에서 쓰던 명령어 대부분 호환 가능설치도 간단함 (npm install pnpm) ;;;작업np..

• format_list_bulleted JavaScript
• · 2025. 9. 24.
• textsms

[JavaScript] var , const , let ? (ft. 빌려온 고양이)

자바스크립트의 변수 선언자바의 경우 int, string 등으로 선언하므로 간단하게 연산이 필요하면 int , 연산이 필요없으면 string 이런식으로 모든걸 어떤 식으로 사용할지 정한다는 점에서 처음 봐도 구분이 가능한 반면자바스크립트의 경우 자료형이 아닌 var , const , let 으로 선언하는데 이것들은 각각 어떤 용도인지 알아보자 var ? 요즘엔 잘 안써요 ....전역 변수처럼 아무대서나 콘솔 찍으면 찍혀요 ... (호이스팅)값을 바꿔도 그냥 받아들이고 그 값을 가져가요 ...좋게 말하면 자유로운 영혼?... 그래서 잘 안 써요 const 빌려온 고양이 같이 ( + 변화에 둔감해요)자바로 치면 final 과 그나마 유사?..한 번 자리를 잡으면 이동은 없어요 (재할당이 불가능해요..)단,..

• format_list_bulleted JavaScript
• · 2025. 9. 19.
• textsms

[JavaScript] 동기 ? 비동기 ? async , await ? (ft. What's your ETA?)

동기 ? 비동기 ? What's your ETA? 너의 언제 도착해 ?동기의 경우 위에서부터 차례대로 진행하는 형식console.log("What's")console.log("your")console.log("ETA?")위에서부터 진행하므로 결과는What'syourETA?비동기의 경우 먼저 처리가 가능한 내용부터 먼저 진행하는 방식 (대표적으로 api 호출의 경우 백엔드에서 부르고 백엔드가 반응해야 하므로 순서가 밀림)console.log("What's")setTimeout(()=>{ console.log("your")}, 2000)console.log("ETA?")setTimeout으로 인해 바로 처리가 불가능하므로 결과는What'sETAyourCallback? 태초의 비동기 함수 해결책비동기 함수를..

• format_list_bulleted JavaScript
• · 2025. 9. 15.
• 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