connecting dots

React Profiler로 성능 측정하기App.js A.js모든 요소를 하나의 컴포넌트에 코드 설명posts 배열을 순회하며 각 post 객체를 기반으로 리스트 항목()을 생성{posts.map((post) => { return ( {post.title} );})} 1. posts 배열:• posts는 객체 배열입니다. 각 객체는 블로그 포스트와 같은 데이터 항목을 나타내며, id와 title 속성을 가집니다.2. map 메서드:• map 메서드는 배열의 각 요소를 순회하며 콜백 함수에서 반환된 결과로 새로운 배열을 만듭니다.• posts.map((post) => { ... })는 posts 배열의 각 요소에 대해 콜백 함수를 실행합니다.3. 콜백 함수:• post는 post..

제어 컴포넌트과 비제어 컴포넌트1. 제어 컴포넌트리액트 상태로 입력 값을 관리하며 상태를 업데이트하여 입력 값을 제어함 1. 설명: • 상태(state)가 컴포넌트 내에서 관리됩니다. • 사용자가 입력 필드에 입력하는 모든 변화는 useState로 관리되는 상태를 통해 반영됩니다. • 예제 1에서 value={title}와 onChange 핸들러가 이를 관리합니다.  2. 장점: • 컴포넌트의 상태를 React에서 완전히 제어할 수 있습니다. • 입력 값에 대한 즉각적인 유효성 검사나 다른 로직을 쉽게 추가할 수 있습니다.  3. 단점: • 상태 업데이트가 빈번하게 일어나므로 더 많은 리소스를 소모할 수 있습니다. --> 제어 컴포넌트에서는 value와 onChange를 사용하여 상태를 관리합니다.사용자..

todo 리스트 만들기 실습input에 할 일 써서 추가버튼 누르면 리스트에 할 일 추가import { useState } from "react";function App() { const [todos, setTodos] = useState([]); const [todoText, setTodoText] = useState("");}const onChangeTodoText = (e) => { setTodoText(e.target.value); // target은 실제로 이벤트가 발생한 요소 = input 태그 // input type="text"는 value 속성을 가지고 있어서 value 속성을 통해 입력된 값을 가져올 수 있음};const onAddTodo = () => { // 새로운 배열 ..

fetch 함수에서 옵션 넣기async function getTodos() { try { // await new Promise(resolve => setTimeout(resolve, 2000)) const res = await fetch( 'https://~~~~', { headers: { 'content-type': 'application/json', apikey: '~~~', username: '~~~' } } // 수강생 전용 정보는 '~~~'로 처리함 fetch('주소', { headers: {}, body: {}. method:..

팩토리함수(Factory Function)객체 데이터(참조형 데이터)를 반환하는 함수function getUser() { return { name: "John", age: 30, };}const user = getUser();console.log(user); // { name: 'John', age: 30 }console.log(getUser()); // { name: 'John', age: 30 }console.log(user.name); // Johnconsole.log(getUser().name); // John// 모든 함수는 호출되면 return으로 반환하는 값을 가지고 있다. 고차함수함수를 인수로 전달하거나(콜백함수) 반환값으로 사용하는 함수function useUser() { ..

즉시실행함수(IIFE)익명함수를 ( )로 감싸고 그 전체를 바로 (호출)하는 방식--> 원래 익명함수는 호출할 수 없음 (이름이 없으니까). 이를 가능하게 해주는 방식 ! 세미콜론을 명령 뒤에 안 붙이는 경우에는 위쪽의 명령과 섞이지 말라는 의미로즉시실행함수 앞에 ';'을 붙여줌. 이렇게 하면 오류가 나지 않음  비동기 처리 용어 쉽게 이해하기상황: 빵을 사러 서울에서 1시에 출발 ! 사고 다시 서울로 돌아온 시간 9시 !1. 대기(pending)- 1시부터 9시까지, 출발해서 다시 돌아올 때 까지, 8시간동안의 시간이 대기상태 (기다리고 있는 것)- 가져오고 있는 중 (ing)- 도착했으면 대기 끝 2-1. 이행(fulfilled)- 빵을 잘 사왔으면 '빵을 사러 다녀오다' 미션이 제대로 이행됨 -->..

리액트에서 불변성이란 ?한 번 값이 설정되면 그 값을 변경할 수 없는 성질사전적 의미: 값이나 상태를 변경할 수 없는 것 자바스크립트를 통한 불변성 의미 살펴보기원시타입: Boolean. String, Number, null, undefined, Symbol (불변성을 가짐 - 값을 변경할 수 없음)참조타입: Object, Array, 함수(불변성을 가지지 않음 - 값을 변경할 수 있음) 메모리에서의 불변성자바스크립트는 원시 타입과 참조 타입을 다르게 저장합니다.  1. 원시 타입: • 원시 타입 값은 Call Stack이라는 메모리 공간에 저장됩니다. • 예: let age = 30; 여기서 age는 Call Stack에 30이라는 값으로 저장됩니다.  2. 참조 타입: • 참조 타입 값은 Heap이라..

useState와 UseEffectuseState와 useEffect는 React 훅으로, 각각 상태(state)와 사이드 이펙트(side effect)를 관리하는 데 사용됩니다.1. useStateuseState는 함수 컴포넌트에서 상태를 관리하기 위해 사용됩니다.이는 컴포넌트가 상태를 가지고 있고, 이 상태가 변경될 때 컴포넌트를 다시 렌더링할 수 있게 합니다. 예제import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 상태 변수와 그 상태를 변경하는 함수 return ( Count: {count} setCount(count + 1)}>Incr..