코딩기록

1. map const extractedCards1 = cards.map(card1 => { console.log('card1: ', card1); return card1});console.log('extractedCards1: ', extractedCards1);//printcard1: {}card1: {}extractedCards1: [ {}, {} ] 2. forEach cards.forEach(card2 => { console.log("card2:", card2);});//printcard2: {}card2: {} 3. for for (let i = 0; i  4. for...of for (const card4 of cards) { console.log( card4);}//print{..

useEffect는 React의 훅(hook) 중 하나로, **부수 효과(side effects)**를 처리하기 위해 사용된다.컴포넌트가 렌더링된 후 특정 작업을 수행하거나, 상태나 props의 변경에 따라 동작을 정의할 수 있게 해준다. 클래스형 컴포넌트에서 사용했던 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체하는 역할을 한다. 특징1. 의존성 배열에 따라 동작 2. 클린업(Cleanup)반환값으로 클린업 함수를 정의할 수 있음.이는 주로 이벤트 리스너 제거, 타이머 정리, 구독 취소 등에 사용.import React, { useState, useEffect } from 'react';export default fu..

코드의 주석이 조금 복잡하지만 요지는React의 setState 함수에서 콜백을 사용하는 것은 상태 업데이트가 비동기적이라는 점을 고려해 최신 상태를 안전하게 참조하기 위한 메커니즘이라는 것이다. const [number, setNumber] = useState(1);number는 현재 상태 값(배열)이고, setNumber는 이 상태를 업데이트하기 위한 함수.초기값( useState(1))은 원시타입 Number다.import React, { useState } from "react";export default function Counter2() { const [number, setNumber] = useState(1); // 비동기 적으로 실행됨-콜백사용하지 않아- 상태 업뎃시 최신 상태 반영안됨..

원시타입 state와 참조타입 state는 리액트에서 상태를 업뎃하는 방식과 리렌더링 조건에 차이가 있다.[ state, setState ]스테이트, 셋스테이트 통상적으로 이렇게 부른다. 살펴보면,  1. 원시 타입(Primitive Type) State원시 타입은 값 자체를 저장하는 데이터 타입.string, number, boolean, null, undefined, symbol, bigint특징값 자체가 변경되면 React는 해당 상태를 새 값으로 인식하고 리렌더링을 트리거함.업데이트가 간단하며 불변성(immutability)을 비교적 쉽게 유지할 수 있음.예제 [ jsx ]import React, { useState } from "react";function Counter() { const [c..