리액트 기본부터 복습일지 0305

1️⃣ import { useState } from "react";

* 설명: useState는 React의 훅중 하나로, 컴포넌트에서 상태(state)를 관리 할 수 있도록 해준다.

* 동작 방식: useState를 사용하면서 변수처럼 상태를 저장할 수 있고, 이 값이 변경될 때 리액트가 자동으로 리렌더링을 해준다.

//react 예시코드
import {useState} from "react";

function Counter(){
	cosnt [count, setCount] = useState(0); // 현재 상태값, 상태를 변경하는 함수, 초기값을 0으로 설정.
    
    return (
    <div>
    	<p> CountL  {count{</p>
        <button onClick={() => setCount(count + 1)]>Increase</button>
	</div>
    );
    }

 

 

2️⃣ import "./style.css";

* 설명"./style.css"파일을 현재 컴포넌트에서 불러와서 스타일을 적용하는 코드다.

* 동작 방식 : import를 사용해 CSS 파일을 포함하면, 해당 스타일이 컴포넌트에 적용된다.

// style.css 예제
p {
	color: blue;
    font-size: 20px;
  }

// App.js 예제코드
import "./style.css";

function App(){
	return <p>Hello, React!</p>; //파란색으로 보인다.
}

export default App;

 

 

 

 

3️⃣  {}중괄호 내부의 JS 표현식

설명: JSX 내부에서는 중괄호({})를 사용해서 JavaScript코드를 실행한다.

<ul>
	{content[activeContentIndex].map((item) => (
    	<li key={item}>{item}</li>
    ))} //중괄호 안의 코드가 실행되며, 리스트 요쇼들이 동적으로 렌더링된다.
</ul>

 

 

4️⃣ 대괄호 []을 이용한 배열 접근

설명: 배열명[n]은 특정 인덱스에 해당하는 배열을 가져오는 코드다.

const content = [
  ["Home", "About", "Contact"],
  ["Apple", "Banana", "Cherry"]
];


console.log(content[0]); //["Home", "About", "Contact"]
console.log(content[1]); //["Apple", "Banana", "Cherry"]

 

 

5️⃣ .map()을 이용한 배열 반복

설명: .map()은 각 배열의 요소를 변환하여 새로운 배열을 생성하는 메서드다.

const fruits = ["Apple", "Banana", "Cherry"];
const listItems = fruits.map((item) => '<li>${item}</li>);

console.log(listItmes);
// ["<li>Apple</li>", <"li>Banana</li>", "<li>Cherry<li>"]

 

 

 

6️⃣ 화살표 함수 =>

설명: 화살표 함수는 간결한 함수 표현식으로, 한 줄로 작성할 경우, {} 없이 괄호 ()를 사용하면 return키워드 없이도 값을 반환할 수 있다.

(item) => (
	<li key={item}></li>
)
// item을 받아서 <li key={item}><{item}</li> JSX 요소를 반환하는 구조다.

 

 

 

 

7️⃣ key 속성 (React에서 고유 키)

설명: React에서는 리스트를 렌더링 할때 각 요소에 고유한 key 속성을 부여한다. key는 react가 리스트를 효율적으로 업데이트하는데 도움을 주는 특성이다. 여기서는 litem 자체를 key 값으로 사용하고 있다.

 

주의할 점: key값은 중복되지 않는 고유한 값이어야한다. 만약 item이 중복될 가능성이 있다면, id 같은 고유한 값을 key로 사용해야한다.

 

🔑 React에서 key 값을 사용하는 이유

1. 리액트가 변경 사항을 빠르게 감지할 수 있다. / key가 없으면 리액트는 모든 리스트 항목을 새로 렌더링 해야한다.

2. 최소한의 DOM 변경으로 성능을 최적화 할 수 있다. / key를 사용하면 변경된 항목만 업데이트 된다.

3. 리스트가 추가/삭제/순서 변경될때 안정적이다. / 항목의 순서가 바뀌어도 리액트가 올바르게 업데이트한다.

 

🔍 key가 필요한 이유를 쉽게 이해하는 예제

조건: 기존 리스트에서 새로운 항목을 추가하는 상황

 

❌ key 없이 새로운 요소 추가

1. 기존 리스트에 "Cherry"를 추가하면, 리액트는 모든 <li>태그를 새로 렌더링 해야하다.

2. 기존의 "Apple", "Bnanana"도 다시 렌더링된다. -> 비효율적!

//jsx

function ListWithoutKey() {
	const [items, setItems] = Ract.useState(["Apple", "Banana"]);
    
    return (
    <>
    	<button onClick={() => setItems(["Cherry", ...itmes])}>
        Add Cherry
        </button>
        <ul>
        	{items.map((item) => (
            	<li>{item}</li>
                ))}
            </ul>
        </>
    );
}

 

 

✅ key를 사용한 경우

1. "Cherry"만 새로운 요소로 인식하고 추가된다.

2. "Apple", "Banana"는 기존요소 유지된다. 즉, 리액트가 기존 요소를 재사용하므로 성능이 향상된다.!

//jsx

funtion ListWithKey() {
	const [items, setItems] = React.useState(["Appple", "Banana"]);
    
    return (
    <>
    	<button onClick={()=> setItems(["Cherry",...items])}>
        Add Cherrry
        </button>
        <ul>
        	{items.map((item) => (
            	<li key={item}>{item}</li>
            ))}
        </ul>
    </>
);
}

 

 

 

 

 

8️⃣ 리액트에서 리스트라는 개념은 두 가지의미로 사용될 수 있다.

✅ DOM 요소로서의 리스트 (<li>태그 등)

설명: JSX 에서 <li>태그를 반복적으로 생성하는 경우로, 여기서 "리스트"는 <li>요소들의 모음을 의미한다.

✅ 데이터 구조로서의 리스트(배열)

설명: 리액트에서는 보통 map()을 사용해서 배열의 데이터를 화면에 렌더링할 때 "리스트"라고 표현한다.

 

📌 React에서 key는 반복되는 요소들(보통 JSX)요소들에 적용됀다. 따라서, 실제 UI로 렌더링되는 리스트 항목 (예: <li>, <div>, <turn> 등)에 key를 부여한다.

// items 배열 (리스트) -> li 태그로 변환된 요소 리스트
const items = ["Apple", "Banana", "Cherry"];

<ul>
	{items.map((item) => (
    	<li key={item}</li> 
    ))}
</ul>
// 여기서 key는 li요소의 리스트를 구분하는 역할을 한다.

 

* items는 데이터 구조로서의 리스트(배열)

* map()을 사용해 생성된 <li>요소들이 React가 관리하는 실제 리스트 (UI요소 리스트)

 

즉, key는 배열자체에 적요되는게 아니라, 그 배열을 기반으로 렌더링되는 JSX요소(리스트 항목)에 적용하는 것이다.

 

💡 정리하면:
✔ "리스트" = 배열(Array) 데이터 자체 (ex: items)
✔ "리스트" = UI 요소들(보통 JSX 요소) 모음 (ex: <li> 태그들)
✔ React에서 key가 필요한 리스트는? JSX 요소 리스트!