빵 입니다.

📌 key를 추가하는 이유 key는 각 항목을 구별할 수 있도록 도와주는 유일한 식별자이다. 리액트가 배열 목록을 효율적으로 업데이트하고, 순서가 변경되어도 정확하게 변경된 요소만 업데이트하는 데 도움을 준다. (key를 기준으로 변경된 요소만 업데이트하고 나머지는 그대로 유지한다.) ➡️ key가 없으면 배열 아이템들을 식별하지 못 해서, 다 다시 그려준다. ➡️ key가 있으면 변경된 것만 새로운 것만 그려준다. ➡️ key가 없으면 배열의 순서를 기준으로 각 요소를 식별한다. ➡️ key가 없으면 리액트는 순서에 의존하여 모든 요소를 업데이트한다. 📌 테스트 const MyComponent = () => { const items = [ { id: 1, text: 'Item 1' }, { id: 2,..

제어된 컴포넌트 vs 제어되지 않은 컴포넌트 프레젠테이셔널 컴포넌트 vs 상태 유지 컴포넌트 dumb vs smart Stateless vs Statefull 📌 상태가 없는 컴포넌트 (Stateless) const StatelessComponent = (props) => { return {props.message}; }; 상태(state)를 갖지 않는 컴포넌트 props를 받아 렌더링하고 UI를 표시하는 역할 렌더링만 담당하므로 생명주기 메서드나 상태 변경에 따른 부가적인 작업을 수행하지 않는다. 리액트 훅을 사용하지 않는다. 단순하고 가벼워서 성능이 좋다. 📌 상태가 있는 컴포넌트 (Statefull) import React, { useState, useEffect } from 'react'; con..

리액트의 양방향 바인딩(Two-Way Binding)은 부모 컴포넌트의 상태가 자식 컴포넌트의 props로 전달되는 동시에 자식 컴포넌트에서 변경된 값이 부모 컴포넌트의 상태에도 즉시 반영되는 메커니즘을 의미한다. 주로 사용자 인터페이스 요소(입력 필드)의 값과 상태를 동기화할 때 유용하다. 📌 state를 이용한 양방향 바인딩 부모 컴포넌트가 inputValue라는 상태를 가지고 있고, 이 상태를 자식 컴포넌트에 value의 props으로 전달한다. 자식 컴포넌트에서는 입력 필드의 값이 변경될 때마다 handleChange 함수를 통해 onInputChange 콜백을 호출하여 부모의 상태를 갱신한다. import React, { useState } from 'react'; // 부모 컴포넌트 funct..

시작하기 전... HOOK React 버전 16.8부터 도입된 기능 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능 등을 사용할 수 있도록 하는 기능 훅은 use로 시작한다. 훅들은 리액트 컴포넌트 함수 안에서 호출되어야 한다. 🔥함수형 컴포넌트 기반으로 정리를 했습니다! useState 훅을 이용하면 컴포넌트에서 상태를 추가하고 관리할 수 있다. 컴포넌트 내에서 변수를 선언하면, 해당 변수의 값이 변경되어도 React는 컴포넌트를 다시 렌더링하지 않는다. React는 컴포넌트의 상태나 props가 변경되었을 때에만 다시 렌더링을 수행한다. 이것이 React의 "재평가" 개념이다. useState를 사용하여 상태를 선언하면, React가 해당 상태를 추적하고, 상태가 변경될 때마..

리액트 모든 이벤트 on으로 시작한다. onClick={clickHandler} 📌 이벤트 리스너 속성에 함수 전달하는 방법 onClick 같은 이벤트 리스너 프로퍼티는 이벤트가 발생했을 때 실행해야 하는 함수의 ‘포인터’를 값으로 전달해야 한다. 그래야 이벤트가 발생했을 때 사용자를 대신하여 리액트가 함수를 실행한다. 📌 부모 컴포넌트로 이벤트 전달하는 방법 프로퍼티를 통해 함수를 받아들이고, 이를 자식 컴포넌트 내부로부터 호출하고, 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거 할 수 있다. 자바스크립트에서 함수는 단순한 객에(일반 값)이므로 프로퍼티를 통해 값을 자식 컴포넌트에 전달할 수 있다. 그리고 (전달받은) 자식 컴포넌트가 해당 함수를 호출하면 함수가 실행된다. 이런 식으..

import Expenses from "./components/Expenses"; const expenses = [ {}, {} ]; const Expense = (props) => { return ( 안녕하세요. ); } 위 코드를 순수 자바스크립트로 작성한다면 import React from 'react'; const Expense = (props) => { return React.createElement( ‘div’, {}, React.createElement(‘h2’, {}, ‘안녕하세요.’), React.createElement(Expenses, { items: expenses }) ); 옛날엔 .createElement 메서드를 사용하려면 모든 페이지에서 react를 임포트 해줘야 했지만 지금..

함수형 컴포넌트 방식 함수형 컴포넌트를 많이 쓴다. 기존의 자바스크립트 문법에 익숙한 개발자들이 쉽게 적응할 수 있는 방식이다. function Expenses(props) { return ( {props.items.map(item => ( ))} ); } 화살표 함수 표현식 화살표 함수는 간결하고 직관적인 문법을 가지고 있어 가독성이 좋고, this 바인딩에 대한 동작이 다르기 때문에 몇 가지 상황에서 유용할 수 있다. 개인의 취향과 프로젝트의 코드 스타일에 따라 선택하면 된다. const Expenses = (props) => { return ( {props.items.map(item => ( ))} ); }

내가 생각했던 라이브러리 ➡️ 메서드 모음집. 메서드를 가져다 조립해서 사용한다. 정적인 구조. 내가 생각했던 프레임워크 ➡️ 자동화된 시스템. 동적인 구조. ⭐️ 라이브러리와 프레임워크 차이 라이브러리와 프레임워크 사이의 주요 차이는 제어의 흐름(구조와 동작 방식)이다. 라이브러리는 개발자가 호출하여 사용하는 도구 모음이며, 애플리케이션의 제어 흐름은 개발자에게 있다. 프레임워크는 애플리케이션의 흐름을 제어하며, 개발자는 프레임워크가 정의한 규칙에 따라 코드를 작성한다. React는 라우팅을 제공하지 않기 때문에 react-router-dom를 설치해서 사용해야 한다. Next는 내부적으로 React를 가지고 있기 때문에 react-router-dom을 따로 설치하지 않고, 규칙에 따라 파일을 만들면 ..