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

map()예제로 코드 공부하던 중, 난관에 부딪히게 되어..

코드를 다시 하나 하나 뜯어보는 시간을 가졌고요, 그렇게 알게 된 점을 공유 및 정리 하려고 합니다. 🧚‍♀️

---

하나 하나, 맛보고 뜯어봅시다 ! ✨

---

1. import React, { useState } from 'react';

React 라이브러리를 가져오고 있다.

useState는 React의 훅(hook) 중 하나로, **상태(state)**를 사용할 수 있게 해줌.

이건 React 라이브러리 전체를 가져오는 코드야.

🔍 왜 필요할까?

React를 쓰는 컴포넌트에서는 JSX 문법 (<div>, <h1>, <button> 이런 거) 을 쓰지?
JSX는 사실 자바스크립트가 이해할 수 있게 변환되면서, 내부적으로 React.createElement() 같은 걸 호출해.

그래서 JSX를 쓸 거면 반드시 React를 import 해야 해!
(※ 최신 버전에서는 자동으로 처리되기도 하지만, 기본적으로는 필요한 습관이야.)

 

 

✅ 2. { useState }

이건 React 안에 있는 useState라는 함수만 따로 꺼내서 가져오는 것이야.

useState란?

컴포넌트 안에서 상태(state) 를 사용할 수 있게 해주는 React의 Hook(훅) 중 하나야.

import React, { useState } from 'react';

👉 JSX 문법과 state 기능을 쓰기 위해 꼭 필요한 코드야!

 

💬 참고로

만약 상태 말고도 useEffect, useRef 같은 다른 Hook을 쓰고 싶다면 이렇게도 쓸 수 있어:

 

import React, { useState, useEffect, useRef } from 'react';

 

2. export default function RecipeList() { ... }

이건 함수형 컴포넌트. RecipeList라는 이름으로 컴포넌트를 만들고 있다.

export default는 이 파일을 불러올 때 기본적으로 이 함수를 가져오겠다는 뜻이다.

 

3. const [recipes, setRecipes] = useState([...]);

여기서 useState를 써서 recipes라는 상태 변수를 만들었어.

초기값으로는 3개의 레시피가 들어간 배열을 넣었고, 각각은 객체야:

- id: 고유한 키 값 (리스트를 만들 때 꼭 필요해!)

- name: 레시피 이름

- ingredients: 재료 리스트 (배열)

 

*setRecipes 자리의 역할?  ↓

setRecipes는 recipes라는 **상태(state)**를 변경(업데이트) 할 때 사용하는 함수야.

 

구조분해 할당이 된 상태인데, 그렇게 하지 않을 경우, 코드는 아래와 같다.

 

const state = useState([...]);
const recipes = state[0];       // 상태값
const setRecipes = state[1];    // 상태변경 함수

 

→ 근데 매번 [0], [1] 하는 게 번거롭고 가독성도 안 좋아서 보통은 구조 분해 할당을 써서 이렇게 표현한다.

const [recipes, setRecipes] = useState([...]);

 

상태(state)란?

화면(UI)에 영향을 주는 값이야.
즉, 사용자가 뭔가를 하면 바뀌는 값, 그리고 그 값이 바뀌면 화면도 자동으로 바뀌는 거야!

상태 변수(state variable)란?

그 "상태(state)"를 저장해두는 변수야.
리액트에서는 이 상태 변수를 만들고, 이 값을 바꾸면 화면도 똑같이 바뀌어!

 

해당 내용은 아래에서 더 정리해보겠다.

4. return ( <div>...</div> )

컴포넌트의 화면에 보여줄 UI를 작성하는 부분이야.

JSX 문법을 사용해서 HTML처럼 코드를 쓰는 거야.

 

5. <h1>Recipes</h1>

그냥 제목이야. 큰 제목으로 Recipes 라고 나올 거야.

 

6. recipes.map((recipe) => ( ... ))

recipes 배열을 .map()으로 반복하면서, 각각의 레시피를 recipe 변수로 받아서 화면에 그려주는 부분이야.

key={recipe.id}: React에서 리스트를 만들 때는 고유한 key를 줘야 해. 그래야 React가 잘 인식해.

왜 두번째 div 요소에 키 값을?

.map()이 만들어내는 건 실제로는 <div>, <h2>, <ul> 세트를 하나로 묶은 거예요.

div() div() div() 총 3덩어리의 div

 

7. <h2>{recipe.name}</h2>

각각의 레시피 이름을 제목으로 보여줘.

 

8. <ul> ... </ul>

ul은 리스트를 만들기 위한 HTML 태그야.

그 안에 li 태그로 재료들을 표시해.

 

9. recipe.ingredients.map((ingredient, index) => ( ... ))

재료 배열을 .map()으로 돌려서 하나씩 li로 보여줘.

key={index}: 각 재료에도 고유한 key를 줘야 해서 index(순서)를 쓴 거야.

 

💡 key={index} 왜 써?

React는 리스트를 효율적으로 다시 그릴 때(업데이트할 때),
각 아이템이 어떤 건지 구분할 수 있어야 해.
그래서 key라는 특별한 속성을 꼭 넣어줘야 해.

 

그럼 왜 recipe.ingredients.map(...) 이렇게 또 .map 해?

그 이유는:

• recipe.ingredients도 배열이기 때문이야!
• 각각의 레시피 안에는 ingredients 라는 배열이 있고,
• 그 안에 있는 각 재료들을 <li>로 하나하나 보여줘야 하니까,
  또 .map()을 써서 돌리는 거야.

 

• recipes.map(...) → 레시피 전체를 순회
• recipe.ingredients.map(...) → 각 레시피 안의 재료들 순회

 

🎨 실제 예시로 보면:

['치즈', '토마토', '피망'] 이 배열이 있을 때,

.map()으로 돌리면 👇

<li key={0}>치즈</li>
<li key={1}>토마토</li>
<li key={2}>피망</li>

이렇게 나와서 웹 화면에 예쁘게 리스트가 보여지는 거야!

---

too much 괄호 이슈로, 이렇게 색깔별로 크게 구분해서 공부해봤습니다.

"일단 이 코드는 전체적으로 recipes라는 배열을 하나하나 순회할 거야.
레시피 하나하나를 돌면서 그 안에 있는 정보를 꺼내서 화면에 보여주는 거지.

먼저 <h1>Recipes</h1> 이렇게 큰 제목을 하나 보여주고,
그 아래부터는 본격적으로 레시피들을 순회하면서 각각 화면에 뿌릴 거야.

recipes.map((recipe) => (...)) 이 부분에서,
recipes 배열 안에 들어 있는 각 레시피를 하나씩 꺼내.
그러니까, 예를 들면 김치찌개, 된장국 이런 게 있다고 치면
하나하나씩 돌면서 그 안의 정보 — 예를 들어 이름이나 재료 같은 걸 꺼내서 보여줘.

그 다음에 <h2>{recipe.name}</h2> 이 부분에서
지금 돌고 있는 그 레시피의 이름을 <h2>로 보여주는 거야.
예: "김치찌개"

그리고 재료도 또 배열이잖아?
그래서 recipe.ingredients.map(...) 이 부분에서
이번엔 그 레시피 안에 있는 재료들을 하나하나 순회해.
재료 하나하나를 <li> 태그로 감싸서 목록처럼 보여주지.

결국 이 코드는 뭐냐면,
전체 레시피들을 쭉 순회하면서,
각 레시피마다 이름 보여주고 → 그 아래에 재료들 보여주는 구조인 거야."**

---

결과물 :-)

---

출처 : 오즈코딩스쿨, 챗지피티, 구글링, 공식문서