CH's 개발 공부 일지

4. key를 써야 하는 이유(1) key가 없으면 어떻게 될까?function FruitList() { const fruits = ['사과', '바나나', '오렌지']; return ( {fruits.map(fruit => ( {fruit} {/* Warning: Each child should have a unique "key" prop */} ))} );} 개발자 도구 콘솔에 빨간 경고가 뜸. 화면은 일단 그려지긴 하지만 리스트가 변경될 때 문제가 터짐 (2) key가 필요한 진짜 이유key가 없을 때 '딸기'를 맨 앞에 추가:이전: 이후:사과 → 딸기 (사과를 딸기로 변..

1.1 React로 데이터 다루기(1) 데이터 주도 UI란?데이터가 바뀌면 화면이 저절로 바뀐다 코드 비교❌ 바닐라 JS - 직접 DOM을 만지는 방식const users = ['홍길동', '김철수', '이영희'];// 화면에 그리기const ul = document.createElement('ul');users.forEach(user => { const li = document.createElement('li'); li.textContent = user; ul.appendChild(li);});document.body.appendChild(ul);// 사용자 한 명 추가하면?users.push('박민수');// 화면은 그대로! DOM을 또 조작해야 함 ✅ React - 데이터만 바꾸면 끝funct..

학습 목표: React의 엔진룸을 들여다봄. 어떻게 그렇게 빠르게 화면을 업데이트 하는지? (1) React에서 말하는 "렌더링"이 정확히 무엇?렌더링 = 컴포넌트 함수를 실행하는 것function Counter() { const [count, setCount] = useState(0); return {count};}렌더링된다 = React가 Counter()를 호출한다는 뜻 충격의 진실렌더링 ≠ 화면이 실제로 바뀌는 것!"렌더링" ↓함수 실행 → JSX 반환 → 가상 DOM 만들기 ↓"그 다음에" 화면 업데이트 (별개의 단계!)렌더링은 "계산"이고, 화면 업데이트는 "반영"(2) 두 단계로 나뉨 1️⃣ Render Phase (계산 단계) — "설계도 그리기" 컴포넌트 함수 호출JSX 반..

(1) 반복은 개발자의 적!function App() { return ( 홍길동 개발자 김철수 디자이너 이영희 기획자 );} 이 코드의 문제점반복 지옥 : 같은 구조를 3번 복붙수정 지옥 : 디자인 바뀌면 3곳 다 고쳐야 함사용자 10,000명이면? 답이 없(2) 컴포넌트로 추출하기 - Before / After ❌ Before: 반복되는 코드 홍길동 개발자 ✅ After: 재사용 가능한 컴포넌트 // 틀 하나 만들고function UserCard({ image, name, job }) { re..

학습 목표: 객체와 배열을 State로 쓸 때의 함정을 피하고, 불변성을 지키며 안전하게 업데이트함 (1) "참조형"이란?구분예시특징원시형숫자, 문자열, 불린값 자체를 비교참조형객체, 배열메모리 주소를 비교 // 원시형 — 값이 같으면 같은 것5 === 5 // true'hi' === 'hi' // true// 참조형 — 모양이 같아도 '다른 것'!{ a: 1 } === { a: 1 } // false 😱[1, 2] === [1, 2] // false 😱왜 false? 참조형은 "같은 메모리 주소를 가리키는가"로 비교함모양은 똑같아도 새로 만든 객체는 다른 주소라 false임 React랑 무슨 상관?React는 State가 변했는지 확인할 때 ==..

학습 목표: 시간에 따라 변하는 값을 React답게 다루는 법을 익힘 (1) State란?한 줄 정의: 컴포넌트가 기억하는 값. 변하면 화면도 자동 업데이트 📺 TV 리모컨 비유useState는 TV 리모컨에 비유할 수 있음const [count, setCount] = useState(0);// ↑값 ↑변경함수 ↑초기값count = 현재 채널 번호(지금 값)setCount = 채널 바꾸는 버튼(값 바꾸는 도구)useState(0) = 리모컨 초기 설정(처음 값은 0)중요: 반드시 setCount로 바꿔야 React가 알아차림. count = 5 이렇게 직접 바꾸면 React는 모름 🔄 Props vs State PropsState누가 관리?부모 컴포넌트가 전달자기 자신이 관리수정 ..

학습 목표: 컴포넌트를 박스처럼 만들고, 그 속에 내용을 자유롭게 담는 법을 배움(1) children 받아쓰기children은 특별한 이름의 Props임(고정임)function Button({ children }) { return {children};}// 사용저장하기삭제하기특별 버튼(2) Props vs children - 언제 뭘 쓸까? 📛 Props: 정해진 데이터 전달 각 props가 역할이 정해져 있음(name, price, imageUrl)주로 값(문자열, 숫자, 불린) 전달컴포넌트마다 미리 정의된 슬롯에 꽂아넣는 느낌 📦 children: 자유로운 내용물 전달 무엇이든 넣어도 되는 자유 공간정해진 구조가 없음텍스트, JSX, 다른 컴포넌트 뭐든 OK컴포넌트를 범용 컨테이..

학습 목표: 컴포넌트에 데이터를 전달해서, 같은 컴포넌트를 다양하게 활용함 (1) Props란?Props = Properties의 줄임말한 줄 정의: 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터 기본 예제// 자식 컴포넌트function Greeting(props) { return 안녕하세요, {props.name}님!;}// 부모 컴포넌트function App() { return ( );}// 결과안녕하세요, 홍길동님!안녕하세요, 김철수님!안녕하세요, 이영희님!(2) 구조 분해 할당 - 더 깔끔하게기본 방식function UserCard(props) { return ( {props.name} {props.age}세 ..

학습 목표: React의 핵심인 컴포넌트가 무엇이고, 어떻게 쪼개고 재사용하는지 익힘 (1) 컴포넌트란?한 줄 정의: 화면을 구성하는 독립적인 부품 🛍️ 쇼핑몰 페이지├── 📋 Header (로고 + 검색창 + 장바구니)├── 📦 ProductList│ ├── 🃏 ProductCard (상품 1)│ ├── 🃏 ProductCard (상품 2)│ └── 🃏 ProductCard (상품 3)└── 📜 Footer각 부품(컴포넌트)은 독립적이고, 재사용 가능함 ProductCard 하나를 잘 만들어두면, 상품이 100개든 1000개든 그냥 끼워 넣으면 됨 🎯 컴포넌트의 3대 장점 장점설명재사용성한 번 만들면 여러 곳에서 쓸 수 있음유지보수버그 나면 해당 컴포넌트만 고치면 됨협업팀원들이..

(1) 변수와 상수 - 기본 중의 기본function UserCard() { const userName = '김철수'; const userAge = 28; return ( {userName} 나이: {userAge}세 );}(2) 객체 사용 - 점(.)으로 접근function UserProfile() { const user = { name: '이영희', age: 32, job: '디자이너' }; return ( {user.name} {user.age}세, {user.job} );}(3) 함수 호출 - 복잡한 로직은 함수로function Greeting() { function getGreeting(hou..