React

React는 사용자 인터페이스를 만들기 위해 사용되는웹 프레임워크, 자바스크립트 라이브러리React는 facebook에서 제공해주는 프론트엔드 라이브러리싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.즉, 현재 많이 활용되고 있는,

바닐라 JS 클릭 버튼 구현 코드 구현 화면

⚠️ Props는 읽기 전용이므로 어떤 방식으로든 수정 x➡️ props는 객체 지금 Header 컴포넌트의 props에는 key 값으로 title, value 값으로 REACT인 속성이 들어있음즉 props.title === 'React'➡️Headers 컴포넌트에

React 애플리케이션 만들 때 DOM 조작은 지양해야 하지만,DOM을 건드려야하는 상황이 발생하는데 이 때 사용하는 Hook 함수useRef로 DOM노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있음이 주소값은 컴포넌트가 re-render 되더라도 바뀌지

"styled-components" css 코드를 작성할 때 발생하는 여러가지 어려움을 CSS 컴포넌트화를 통해서 해결하는데 사용되는 라이브러리 설치하기 : 터미널 입력 - npm install --save styled-components import : 라이브러리를

useState

어떤 액션을 취할 것인지 정의해 놓은 객체Action -> Reducer 전달해주는 함수Dispatch로부터 받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수상태가 관리되는 오직 하나뿐인 저장소의 역할Redux앱의 state가 저장되어 있는 공간np

Hook이란? > 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드 useState >state를 함수 컴포넌트 안에서 사용할 수 있게 해주는 Hook useState 사용법 import { useState } from 'react'

컴포넌트가 가지는 속성으로 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.단방향 데이터 흐름 (상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터)수정할 수 없는 읽기 전용 데이터상위 APP컴포넌트의 속성 expense를 ExpenseItem 컴포넌트에 prop

📚 컴포넌트 추가 버튼 구현 각 컴포넌트 데이터 목록 ❌ 추가버튼 실행 Error <img src="https://velog.velcdn.com/images/soshin0112/post/