귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

2025/04/06 2

리액트 공부하기 - map() 메소드 코드 분석해보기

map()예제로 코드 공부하던 중, 난관에 부딪히게 되어..코드를 다시 하나 하나 뜯어보는 시간을 가졌고요, 그렇게 알게 된 점을 공유 및 정리 하려고 합니다. 🧚‍♀️하나 하나, 맛보고 뜯어봅시다 ! ✨1. import React, { useState } from 'react';React 라이브러리를 가져오고 있다.useState는 React의 훅(hook) 중 하나로, **상태(state)**를 사용할 수 있게 해줌.더보기이건 React 라이브러리 전체를 가져오는 코드야.🔍 왜 필요할까?React를 쓰는 컴포넌트에서는 JSX 문법 (, , 이런 거) 을 쓰지?JSX는 사실 자바스크립트가 이해할 수 있게 변환되면서, 내부적으로 React.createElement() 같은 걸 호출해.그래서 JSX를..

Studying/React 2025.04.06

<수정 중 : 필터 부분 채우기>리액트 공부하기 - map(), filter() 을 활용한 반복 렌더링

오 ! 자바스크립트 할 때 열심히 했던 배열메소드 🧚‍♀️1. map 복습하기2. map()으로 컴포넌트 반복 렌더링3. key란?4.key를 사용하는 방법5. filter 복습하기6. 데이터 필터링. filter()가, map()과 함께 주로 사용 되는 이유✨map() 빠르게 복습하기map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 콜백을 호출한 결과를 모아 새로운 배열을 반환. 이때 원본 배열은 변경되지 않는다!const array = [1, 2, 3];array.map((el, index, arr) => { console.log(`arr의 요소:${el}, arr의 index:${index}, 순회하는 배열:${arr}`);})// arr의 요소:1, arr의 index:0, 순회하..

Studying/React 2025.04.06