전체 글358 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(12) 컴포넌트 이벤트 만들기 오늘할일 - WEB을 클릭하면 welcome모드가 되며 내용이 나오고 - HTML, CSS, JavaScript를 클릭하면 read모드가 되어 세부내용이 나오는 페이지 만들기 App.js - 사용자가 WEB 링크를 클릭했을 때 이벤트가 실행되도록 하고 싶다면, - onChangePage라는 props를 만들어준다. 그 안에 핸들러메소드 넣고 + 바인드함수를 사용해 this를 명시해준다 - 핸들러 메소드 안에는 this.setState({mode:'welcome'});을적어주어서 state, 즉 모드를 바꾼다. Subject.js - 안에 onClick 이벤트를 심어준다. - onClick이벤트 안에 e.preventDefault를 사용해 이벤트 동작을 멈춘다. - 이어서 this.props.onChang.. 2021. 1. 5. React(11) bind()함수 이해하기 함수.bind(this될변수); React에서 바인딩은 컴포넌트 - 이벤트메소드 사이를 연결하는 방법이다 call, apply, bind는 첫번째 매개 변수로 this 값을 명시적으로 지정할 수 있다는 공통점이 있다. bind는 ‘함수를 반환’한다는 독특한 특징이 있다. bind()는 렌더 함수 안에서 컴포넌트인 자기자신 this를 가리킨다. bind()를 사용 후 다시 한번 호출을 해줘야 함수 속 this를 원하는 객체로 지정한 후 값을 얻을 수 있다. var obj = {name:'james'}; // obj 변수정의해주고 function bindTest(){ // bindTest 라는 함수정의 console.log(this.name); } bindTest(); // this가 뭔지 몰라 undefi.. 2021. 1. 4. React(10) 이벤트 만들기 (bind, setState) 오늘할일 - props & state & event 이용해 WEB 링크를 클릭하면 welcome모드가 나오도록 만들기 Subject.js - 타이틀에 링크걸기 **코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Subject extends Component { render() { console.log('Subject render'); return( {this.props.title} {this.props.sub} ); } } export default Subject; App.js - state 추가하기 "state를 바꾸면 js가 다시 실행되며 웹페이지가 리로드된다. 모든 js파일의 render함수가 다 실행됨. 다시 말하면.. 2021. 1. 4. React 실행 오류 out of memory / Render process gone 가끔 코딩하다 무한루프의 굴레에 빠질 때가 있었다. 과거의 나는 현재의 나를 배신하지 않듯 무한루프의 위험성을 간과한 과거의 나는 오늘의 나를 배신하지 않았다. 웹브라우저 실행하자마자 이런 창이 나옴 (이때 Out of Memory에서 힌트를 얻었어야..) 크롬개발자도구 콘솔을 켜보니 그럼그렇지 ... 무한구글링하다 무한루프 가능성을 깨닫고 다시 돌아와 디테일하게 리뷰해봄 세미콜론 포함, i수식 add up 했다. (i를 이제 놓아주자) 2021. 1. 4. 이전 1 ··· 55 56 57 58 59 60 다음 반응형
