React19 [React] Router 를 이용한 페이지 이동 npx create-react-app react-router0611 터미널 열어서 다운로드 해주기 npm install react-router-dom 다운로드 완료되면 package.json 에서 확인해야됨. App.js 클래스형 컴포넌트로 변경 import { Component } from 'react'; import './App.css'; class App extends Component{ constructor(props){ super(props) this.state ={ } } render(){ return( ) } } export default App; 2. 라우터 돔 임포트하고 주소 지정해주기 Home = / Profile = /profile import { Component } from 're.. 2023. 6. 11. [React] 페이지네이션2 / 이전다음버튼, 현재페이지 버튼 하이라이트 저번시간 요약 1.npx 2.App.js 클래스형 컴포넌트로 변경 3.PostList.js , Pagination.js 4.App에 state추가 - 길이가 10인 JSON배열 (게시글) (게시글 - 글번호, 글제목, 글쓴이, 글쓴날짜, 파일첨부여부, 조회수) 5.App의 상태값 postlist를 PostList에 주입시킨다 (넘긴다) App- 6. Post컴포넌트를 만들고, PostList에서 import하고 map메서드로 반복생성 (PostList 컴포넌트가 App한테 넘겨받은 postlist 배열데이터를 이용해서 map메서드로 Post컴포넌트에 주입시켜서 Post 컴포넌트 반복생성) PostList컴포넌트 내부 const result = this.props.postlist.map( (data) =>.. 2023. 6. 11. [React] 페이지네이션 투두리스트 - 로컬스토리지 할 수 있게끔 공부하기 ---------------------------------------------------------------------------------- 1. 리액트 프로젝트 생성 npx create-react-app react-pagination-practice 2.vscode App.js 클래스형으로 변경 App.js import './App.css'; import { Component } from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ } } render(){ return( ) } } export default App; App.css 기본틀 생성.. 2023. 6. 10. [React] To do list 데이터 배열+1 / map() CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 추가된 id 값이 없었다. App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다. 추가 이벤트 함수 App.js addTodoList=(id,todo)=>{ alert('추가(App)') alert('넘어온 id : ' + (this.state.todolist.length + 1) ) //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함 //(strin.. 2023. 6. 5. [React] To do List 만들기 / CRUD 수정하기 완료 + 완료파일첨부 To do list 만들어보기 구조 App - InputComp - Todo -Todo -Todo 투두리스트 만들고 로컬스토리지 추가해서 만들기 npx create-react-app react-todo-list 1. App.js 클래스형으로 작성 App.js import './App.css'; import { Component } from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ } } render(){ return( ) } } export default App; 2. state에 배열 만들어주기 App.js class App extends Component{ constructor(props){ .. 2023. 6. 4. [React] CRUD 수정 react-student-crud 1.수정 버튼 누르면 함수 실행되는지 확인하고 updateStudentInfo 함수 Student.js랑 App.js 연결하기. Student.js updateStudentInfo=()=>{ alert('수정!(Student)') this.props.updateStudentInfo() } App.js updateStudentInfo=()=>{ alert('수정!(App)') } render(){ const result = this.state.studentList.map( (data) => () ) 2. 수정할 수 있는 input 있어야함. 7ways react conditional render 구글에 검색해보면 좋은 예를 볼 수 있음 **혼자서 연습해보기 (로그인이 되어.. 2023. 6. 4. [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] CRUD 추가 오늘 공부 : 0603 리액트 crud 연습 다음주는 페이지네이션, 라우터 npx create-react-app react-student-crud vscode 내부터미널에서는 이미 react-student-crud 폴더 위치로 잡혀있으니까 npm start 하면 바로 실행이됨. 리액트 프로젝트는 기본 3000번 포트에서 실행된다. 리액트(3000) - express(4000) - MySQL(3306) 포트 참고해서 node.js 다시 공부할 때 이렇게 설정하기 components -> InputComp.js 생성 (클래스형 컴포넌트) 1. 클릭과 체인지 되는거 확인하기 addStudentInfo=()=>{ alert('추가') } idChange=()=>{ console.log('id change!') .. 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. 이전 1 2 3 다음 728x90
