connecting dots

hot module replacement모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거함실행 중인 상태의 코드의 변경 된 부분을 바꿔치기하는 것 copilot said ...Hot Module Replacement(HMR)는 리액트 개발에서 코드가 변경될 때 페이지를 새로 고치지 않고도 변경된 내용을 바로 반영해주는 기능이에요. 이 기능 덕분에 개발자가 코드 수정 후 저장할 때마다 페이지를 새로고침하지 않아도 변경된 내용을 즉시 볼 수 있어요.Vite는 기본적으로 HMR을 지원해요. 추가 설정 없이도 바로 사용할 수 있어요.비유로 설명하기한번 상상해보자. 네가 그림을 그리는 중이라고 생각해보자. HMR이 없다면, 색깔을 조금 바꿀 때마다 종이를 새로 갈아야 하는 상황이..

--> 함수형 컴포넌트와 클래스 컴포넌트는 App.js에서 불러오는 것은 같지만 모양이 다름 !클래스는 복잡하지만 다양한 기능을 제공함. 대표적인 기능이 상태 ! (함수형 컴포넌트는 지원하지 않음) 클래스 컴포넌트함수형 컴포넌트상태지원미지원요즘 거의 안 씀리액트가 함수형 컴포넌트에서도상태를 사용할 수 있는 방법을 만들어줌  - 상태(state)많은 데이터 중에 값이 변하는 것, 앱이 실행하고 나서 상황, 시간의 흐름 등에 따라 값이 변하는 것  --> onIncrement 잘 호출되고 숫자도 올라가는데 화면의 숫자는 여전히 1 ?--> 함수를 호출하는게 없고 마크업 처럼 쓴 것도 호출이 아님. 리액트에게 넘겨주는 것임      버튼 클릭 시 정상적으로 숫자 증가    --> 최근에 들어서는 클래스 컴포넌..

React Hooks란 ?ReactConf에서 2018년 발표된, class 없이 state를 사용할 수 있는 새로운 기능 React Hooks가 필요한 이유 ?항상 기술은 그 전의 불편함이나 문제점을 해결하기 위해서 더욱 발전함react hooks도 주로 class component로 사용되어온 react에서 느껴왔던 불편함이나 문제점을 해결하기 위해 개발됨--> 원래 리액트는 주로 class component를 사용하고, react hooks는 functional component를 사용함React ComponentClass ComponentFunctional Component더 많은 기능 제공더 많은 코드 양더 복잡한 코드더딘 성능더 적은 기능 제공짧은 코드 양더 심플한 코드더 빠른 성능 함수형 컴..

JSX Key 속성 이해하기리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 함키는 리액트에서 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됨.요소에 안정적인 id를 부여하려면 배열 내부의 요소에 key를 제공해야 함 리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 반영--> 리스트에서 나열할 때 바뀐 부분을 어떻게 찾을까 ? key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있음 ! 3번을 1,2번 뒤에 추가할 때는 react가 3번만 추가하면 된다고 쉽게알 수 있음3번을 1,2번 앞에 추가할 때는react가 모든 요소가 새롭게 된 것이라고 인식하고 모든 자식 엘리먼트를 새롭게 그려버림이 경우 key를 추가햐서 1,2번을 새롭게 그리는 것이 아닌3번을 추가 후 1,2번은 자리만 이..

type FooterProps = { message: string color?: 'blue' | 'red' | 'green' | 'yellow" // 또는}type HeaderProps = { title: string size?: 'small' | 'medium' | 'large' color?:'blue' | 'red' | 'green' | 'yellow"}function Header(props: HeaderProps) { return ( {props.title} )}function App() { return ( // 오류 발생, color에는 black이 들어갈 수 없음 ! )}vite: 간단해서 많이 사용↓webp..

부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달할 때 !Props- Properties의 줄임말- Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법- Props는 읽기 전용(immutable)으로 자녀 컴포넌트에서는 데이터를 변경할 수 없음 (읽기만 할 수 있음)(변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 함)     App.jsinitialExpenses = [ { id: 1, charge: "렌트비", amount: "1600" }, { id: 2, charge: "교통비", amount: "400" }, { id: 3, charge: "식비", amount: "1200" }, ];{/* expenseList로 데이터를 내려줌 *..

참고 사이트https://playcode.io Javascript Playground (Sandbox, Repl)Javascript Playground (Sandbox, Repl)playcode.io  식1 + 1 (식)1 (값)= 2(값)==> 식 --> 결국 값이 된다 ! 값값의 종류1. 기본형 값 유형, 원시형123 // number_숫자 // Bigint(엄청 큰 숫자를 다룰 때)'123' // string_문자열"123" // string`123` // stringtrue, false // booleannull // null_아무것도 없다는 의미undefined // undefinedSymbol // Symbol 2. Object{object}  값만 있을 때 단점- 의미를 표현할 수 없음..

일급함수함수를 값으로 취급하는 것 --> 일급함수변수에 할당 가능, 인자로 전달 가능, return 가능const obj = { id: 1, title: 'my obj'};function myFunction () { return a;}obj.title = 'change';obj.fn = myFunction();const result = myFunction(myFunction)  함수코드 묶음을 값으로 취급할 수 있는 수단반드시 값(value)을 리턴한다 --> 리턴한 값을 호출한 곳에서 반환한다 !함수 호출 ==> const result = myFeat(); --> myFeat()으로 이동제어문 적인 성격 (코드의 흐름을 바꿈) 1. 이름없는 함수그 자체로는 의미 있지만 호출할 수 없기 때문에 변수..