component7 React(15) Create 구현 : onSubmit이벤트 & contents변경 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : onSubmit 이벤트 → 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기 App.js - this.max_con.. 2021. 1. 7. React(14) Create 구현 : 모드 전환 & form 생성 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 2. create 구현 : 모드 전환 & form 생성 create 버튼을 눌렀을 때 이 생성되며 내용이 출력된다. App.js - render( )안에 if문에 따라 각 모드에서 실행될 _article = 태그 내용을 각각 넣어주기 - retur.. 2021. 1. 6. React(13) Create구현 : 모드 변경 "상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 하위가 → 상위로 명령을 전달할때는 event로 전달한다." 최종 목표 create 기능 구현하기 create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면 화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다. 자 최종목표 도달을 위해 한단계씩 시작해보자 1. CRUD버튼 클릭시 모드가 변경 2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 1. create구현 : 클릭시 mode라는 state값이 달라짐 App.js 1. 이라는 사용자 정의 태그를 만든다. 2.. 2021. 1. 6. React(9) State로 내용구현하기 props가 사용자가 직접 component를 만날수있는 최전방이라면, state는 컴포넌트 내부에서 관리되는 내용이다. (사용자가 알필요도 없고 만날일도 없다.) props와 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리해서 양 쪽이 각자의 자리에서 역할을 하게 만드는 것이다. 오늘할일 - App 클래스의 하위 컴포넌트인 와 의 props와 state를 나누어 보자 App.js 1. constructor()를 선언한다. 컴포넌트가 실행될 때 constructor 함수가 제일 먼저 실행되어 state를 미리 기억해놓는다. 2. 뒤이어 바로 render()의 내용을 변경해준다. 요런형식으로 state가 들어갈 구멍을 뚫어놓는다. 하드코딩할때 쓰는 props=" " 대신에 stat.. 2021. 1. 2. React(8) Component파일 분리하기 Component를 파일로 분리해보자. 큰 규모의 프로젝트일 때 수백개의 Component 관리를 쉽게 할 수 있기 때문이다. 1. src에 컴포넌츠를 담을 components 폴더 만들기 & 그안에 각 컴포넌츠 이름으로 js파일 만들기 2. 컴포넌츠 클래스들을 각 파일에 담기 components 폴더의 하위 파일로 만들어 클래스 자체를 넣어놓는다. - 맨위에 선언 → import React, {Component} from 'react'; - 맨아래에 선언 → export default Subject; (Subject 클래스를 외부에서 가져다 쓸 수 있도록 선언해준다.) 3. 상위 컴포넌츠에 import해서 맘껏 사용하기 상위 컴포넌츠인 App.js에서는 import Subject from "./comp.. 2021. 1. 1. React(7) props로 컴포넌트에게 값 전달하기 "아들아 내 데이터를 받아서 잘 쓰거라" 기존 컴포넌트만 사용시 → 구조를 이리저리 많이 건드려야 한다. (보수공사 필요) prop속성을 사용시 → 구조를 최대한 적게 건드리면서도 값을 손쉽게 변경할 수 있다. (효율적임) props은 속성이며 부모에서 → 자식 컴포넌트로 값을 전달할 수 있다. (읽기 전용 ONLY) props 사용법 1. 상위 컴포넌트에서 props를 정의하기 형식으로 HTML의 attribute를 정의하듯이 하위 컴포넌트의 속성처럼 사용하면 된다. 2. 하위 컴포넌트에서 사용하기 하위 컴포넌트에서 {this.props.이름} 을 태그 안에 낑겨넣어 사용하기 (함수형 컴포넌트라면 {props파라미터.이름}으로 사용) 실행화면 웹브라우저 오픈할때는 Visual Studio 터미널에서 n.. 2020. 12. 31. React(6) Component만들기 컴포넌트를 만드는 코드를 배워보자. (강의 후 내가 이해한 component의 기능은 숨겨진 내용이 압축되어 들어있는 사용자정의 태그를 만드는 기능이다. 그래서 사용자정의 태그만 적어놓으면 js파일의 클래스타입으로 저장된 세부내용들이 소환된다.) 1. pure.html이라는 샘플페이지를 만들고 리액트로 똑같은 내용의 index.html를 만들어보자. 2. App.js 파일에서 Component라는 클래스를 상속받는 사용자정의 클래스를 만든다. → 후에 html에서 사용자 정의 태그로 사용됨 - render라는 메소드가 있다. → 원래 클래스 안의 함수는 function이 붙지만 react에서는 붙지않음 - return 안에는 압축된 내용 넣기. 컴포넌트를 만들때는 하나의 최상위 태그만 사용해야 한다. 3.. 2020. 12. 31. 이전 1 다음 반응형
