react12 [React] CRUD 삭제 react-student-crud 1. Studnt.js에 수정,삭제 버튼과 함수 만들어주기 //수정, 삭제를 하려면 상태값이 변경되어야하니까 클래스 컴포넌트를 써야함 import { Component } from "react"; import '../css/Student.css'; class Student extends Component{ constructor(props){ super(props) this.state={ } } updateStudentInfo=()=>{ alert('수정!') } deleteStudentInfo=()=>{ alert('삭제!') } render(){ return( 학번:{this.props.id} 이름:{this.props.name} 전공:{this.props.major}.. 2023. 6. 3. [React] map 메서드 map메서드를 이용한 컴포넌트 반복생성 map 메서드를 사용하기 전에는 화면에 띄울 데이터를 다 적어야 했음. render(){ return( ) } map() 메서드를 이용하면 하나의 코드로 몇번이고 화면에 자동으로 출력할 수 있음 . render(){ const result = this.state.personList.map( (data) => () ) return( {result} ) } 화면 출력해보면 위와 같은 결과를 볼 수 있음. **personList JSON배열 class App extends Component{ constructor(props){ super(props) this.state={ personList:[ //길이가 3인 JSON배열 {profile:lee, name:'이민호',a.. 2023. 5. 21. [React] 클래스형 컴포넌트로 클릭카운터 만들기 step-1 클래스형 컴포넌트 기본틀 import './App.css'; import {Component} from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ } } render(){ return( ) } } export default App; render는 화면을 그리는것. step-2 카운터될 화면 띄우기 import './App.css'; import {Component} from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ num:0 } } render(){ return( {this.st.. 2023. 5. 20. 이전 1 2 다음 728x90
