빵 입니다.

리액트 모든 이벤트 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 => ( ))} ); }

Next.js 강의 중 라우팅 챕터를 보는데... Next.js에서 태그를 이용해서 을 만들었더니 태그를 이용해서 페이지를 이동하지 말라고 ESLint가 떴다. React에서 태그를 이용해 페이지 이동하지 않는 이유와 같다고 했다. 생각해 보니 정확한 이유를 모르고 있었다. 막연하게 react-router-dom을 이용해서 컴포넌트를 이용해 페이지 이동을 구현했었다. 창피했다. 제대로 쓰기 위해 열심히 찾아보았다. ⭐️ 페이지 전환 시 태그를 사용하지 않는 이유는? 페이지 전환의 SPA 장점 상실 React로 만들어진 앱은 주로 SPA 방식으로 개발되었다. 브라우저의 페이지 전환없이 동적으로 콘텐츠를 보여준다. 태그를 사용하면 전체 페이지가 새로고침되므로 SPA 장점 사라진다. React Router 기..