리액트의 컴포넌트(Component)UI를 구성하는 독립적이고 재사용 가능한 코드의 조각이다.컴포넌트는 리액트 애플리케이션의 기본적인 빌딩 블록이며, 화면에 표시할 요소를 정의한다.리액트에서는 컴포넌트를 사용하여 복잡한 UI를 작은 단위로 나누고, 이를 조합하여 전체 애플리케이션을 구축한다. 컴포넌트 주요 개념Propsfunction Welcome(props) { return Hello, {props.name}!;}부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.읽기 전용입니다(수정 불가).Stateimport React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); ..
[React] 리액트 투두앱 todoApp 만들기
컴포넌트와 props, map함수 개념을 복습할 겸 간단한 투두앱을 만들어보았다. 완성화면 구현 기능1. 데이터 입력 후 추가하기2. 추가한 데이터가 리스트에 노출되게 하기3. 건별로 데이터 삭제하기 레이아웃 구성하기 todoApp의 가장 바깥 영역(하얀색) 부분은 App.jsx 이다.이곳에 입력란, 추가버튼, 할일 리스트를 보여준다. 할일 리스트는 TodoBoard.jsx 컴포넌트로 관리한다.TodoBoard 컴포넌트에서는 반복되는 영역인 TodoItem을 map을 이용하여 출력하도록 한다. 반복되는 영역이자, 할일의 건별 데이터는 TodoItem.jsx 컴포넌트로 관리한다.건별 데이터와 삭제버튼을 출력하도록 한다. App.jsximport { useState } from 'react'import..
자바스크립트가 진화되어 현재는 ES6 문법을 사용한다.ES6에서 자바스크립트를 쓰는 방법 몇가지를 정리해본다. 1. object shorthand assignmentlet name="traveler0"let age="20"/*let person={ name : name, age: age}*///위 내용을 아래처럼 줄여쓸 수 있다. (Key와 Value 이름이 같을 때만)let person={ name, age}console.log (person) // { name: 'traveler0', age: 20 } 객체 선언시, Key 와 Value 이름이 같으면 줄여서 쓸 수 있다. 2. Destructuringlet person={ name : "traveler0", age: 20}/*let na..