onChange 속성은 사용자가 입력 필드(input)의 값이 변경될 때마다 이벤트를 발생시키기 위해 사용된다. 이는 React에서 사용자 인터페이스(UI)와 컴포넌트의 상태(state)를 동기화하는 데 중요한 역할을 한다. onChange 함수는 다음과 같은 이유로 필수적이다! 1. 양방향 데이터 바인딩 : 사용자의 입력 값이 변경될 때마다, onChange 이벤트를 통해 해당 변경 사항을 컴포넌트의 상태에 반영할 수 있다. 이를 통해 UI가 항상 최신 상태를 반영하게 된다. 2. 폼 유효성 검사 : 사용자의 입력을 실시간으로 검즈앟고, 입력 규칙에 맞지 않는 경우 사용자에게 즉각적인 피드백을 제공할 수 있다. 예를 들어, 이메일 주소 형식이 올바른지, 필수 필드가 모두 채워..
# import React, { useState } from 'react'; const [state, setState] = useState(initalState); useState 훅은 React에서 함수형 컴포넌트에서 상태 관리를 가능하게 하는 핵심 기능 중 하나이다. 이전에는 클래스 컴포넌트에서만 상태를 관리할 수 있었지만, React16.8 버전부터 도입된 Hook API 덕분에 함수형 컴포넌트에서도 상태를 유지하고 업데이트할 수 있게 되었다. initialState: 컴포넌트의 초기 상태값입니다. 문자열, 숫자, 객체, 배열 등 어떤 값이든 될 수 있다. state: 현재 상태값을 나타냅니다. initialState에 의해 초기화된다. setState: ..
리액트에서 'Key'라는 건 사실 모든 컴포넌트에서 사용할 수 있는 굉장히 특별한 props야. 보통은 리스트 같은 배열에서 각각의 항목을 컴포넌트로 만들 때 'Key'를 쓰게 되는데, 예를 들어 이렇게 사용할 수 있어. export default function AppKey() { const list = ['a', 'b', 'c', 'd', 'e', 'f']; return ( {list.map((item, index) => { return {item}; })} ); } 리액트에서 배열에 key를 쓰지 않으면 콘솔에 경고가 출력되기 때문에 key를 유일한 값으로 추가하는 것이 일반적이지만 정작 왜 추가해야 하는지는 모르는 경우가 많다. 왜 key가 필요할까? 리액트에서 'Key'는 리렌더링이 일어날 때 ..
프론트엔드 이야기할 때 '렌더링'이란 단어가 나오면 가장 먼저 떠올리는 건 브라우저야. 간단히 말해서, 브라우저에서의 렌더링이란 HTML과 CSS를 통해 웹페이지에 필요한 UI를 그려내는 과정을 말해. 이 과정은 사용자에게 정보를 보여주는 만큼 중요하고, 어떻게 렌더링을 하느냐에 따라 웹사이트의 성능에도 큰 영향을 줄 수 있지. 그리고 말이 나온 김에, 리액트에서도 렌더링 이야기를 안 할 수 없어. 리액트의 렌더링은, 말하자면, 브라우저가 필요한 DOM 트리를 만드는 과정과 비슷해. 리액트 역시 렌더링을 위한 자기만의 과정이 있어서, 이걸 이해하는 건 리액트를 이해하는 데 정말 중요해. 리액트에서 렌더링은 시간과 리소스를 많이 써서 이루어지는 일인데, 이 비용은 결국 웹 애플리케이션을 방문하는 사용자한테..
Next.js로 블로그를 만들어 보고 있는 와중에 Image에 대한 경고가 발생했다. 블로그에는 우선 로컬 데이터를 이용하여 이미지와 내용들을 Promise를 사용하여 불러오는데, 이미지가 많은 만큼 경고 또한 오지게 많았다. Read more를 통해 해당 경고에 대한 공식 문서를 읽어보았다. `next/image` changed in version 13 Using App Router Features available in /app nextjs.org 내용은 Next.js 13에서 next/image 컴포넌트에 대한 주요 변경 사항을 설명하고 있다. 이전 레거시 컴포넌트와 비교하여 새로운 next/image 컴포넌트의 변경 사항을 다음과 같은 설명 한다. 이 오류가 발생한 이유 주위의 래퍼를 제거하고 네..