Developer

React 리액트 - 맵(Map)

FoodContainer 컨테이너를 사용해 성능을 높이기 위함 import React from 'react';import Food from './Food';const FoodContainer = () => { const foods = [ // 배열: 객체들이 순서대로 모여 있는 자료 구조 // 객체: 순서가 없는 자료 구조 { id : 1, name : "리코타치즈샐러드" }, { id : 2, name : "떡볶이" }, { id : 3, name : "신김치생삼겹살" }, { id : 4, name : "모쯔나베" }, { id : 5, name : "감자뇨끼" } ] // 1. 위에 있는 값을 받아서 처리 -> ..

React 리액트 - 상태(state)

State 리액트에서는 상태를 바꾸어 주어야 한다 V.D > State > View 리액트에서는 위와 같은 흐름으로 동작하기 때문에V.D에서 View에 반영되는 부분을 바꾸고 싶다면State(상태)를 바꾸어야 한다 setCount : 숫자가 하나씩 늘어나거나 줄어들게 동작하는 버튼 만들기 기존에 아래와 같이 JS에서 사용하던 방식은 사용이 어려움1. selector -> DOM API2. addEventListener3. +=, -= 리액트에서는 기존에 사용하던 dom은 eventListner를 사용할 수 없다 따라서 핸들러를 사용한다이런 코드가 수천 개 있어도 실제 DOM에는 클릭 이벤트가 딱 한 번만 등록됨 (delegation 방식).- 리액트가 이벤트 바인딩을 최적화해줌- 리액트는 내부적으로..