SW Engineer & Developer 23

React에서 useState와 useReducer

비교특징useStateuseReducer복잡도간단한 상태에 적합복잡한 상태 트랜지션에 적합상태 갱신 방식직접 상태를 업데이트 (setState)액션과 리듀서 함수로 상태 관리코드 구조코드가 짧고 간단리듀서를 별도 정의하여 구조화 가능공유 상태 관리상태 공유가 쉽지 않음Context와 함께 사용해 확장 가능성능단순한 컴포넌트에 적합큰 상태나 복잡한 로직 처리에 적합어떤 상황에서 사용할까?useState상태가 단순하고 한두 개의 값만 관리하면 충분한 경우.로컬 상태 관리.useReducer상태가 복잡하거나 여러 액션 타입을 처리해야 하는 경우.상태 업데이트 로직을 모듈화하거나 구조화하려는 경우.Context API와 함께 글로벌 상태 관리가 필요한 경우.useState 예시import React, { use..

array.map() 아직 어색한...

구분array.map(callback(currentValue, index, array), thisArg)callback() : 배열 각 요소에 대히 호출되는 함수 - currentValue: 배열의 현재 처리 중인 요소.  - index (선택): 현재 요소의 인덱스.  - array (선택): map()을 호출한 원본 배열.thisArg : 콜백 함수 내부에서 this로 사용할 값. 생략하면 기본적으로 undefined입니다.  Case 1. 2를 곱한 배열을 Returnconst numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8] Case 2. index를 활용한..

React 시작

Node.jsNode.js는 크로스 플랫폼 자바스크립트 런타임 환경으로, 서버와 클라이언트에서 동일한 언어(자바스크립트)로 코드를 작성할 수 있도록 지원합니다. npm(Node Package Manager)npm은 Node.js의 기본 패키지 관리자입니다. JavaScript 라이브러리와 모듈을 검색, 설치, 관리, 공유할 수 있는 도구로, Node.js 생태계의 핵심 요소 중 하나입니다. - package.json : 프로젝트 정보를 기록하는 핵심 파일로, 의존성, 스크립트, 버전 등의 정보를 포함합니다.  - package-lock.json : 패키지와 하위 의존성의 정확한 버전을 기록하여 일관성을 보장합니다. npx(Node Package eXecute)npx는 Node.js의 패키지 관리자 npm..