REACT
-
[생활코딩] create 구현 : mode 전환 기능 / form / onSubmit 이벤트 /contents 변경 / shouldComponentUpdate / Array.from / Object.assignREACT 2022. 2. 1. 16:59
생활코딩 https://www.youtube.com/watch?v=f8e0YWiM-50 기존 읽기 component 인 Content 에서 create 클릭 시 CreateContent 로 변경시키기 (그리고 기존 읽기 component 이름을 ReadContent로 변경시키기) 기존 Content.js 를 ReadContent.js 로 변경하기 import React,{Component} from 'react'; class ReadContent extends Component{ render(){ console.log('content render'); return( {this.props.title} {this.props.desc} ); } } export default ReadContent; Create..
-
[생활코딩] create 구현 : mode 변경 기능REACT 2022. 2. 1. 13:55
생활 코딩 https://www.youtube.com/watch?v=MDGFEV_idSY Control.js 파일을 만들고 App.js 에 load 한다. Control component에 onChangeMode 이벤트를 정의하고 event handler를 추가한다. 그리고 Control.js 에서 각 버튼을 클릭했을 때 onChangeMode event handler가 작동될 수 있도록 onClick을 추가해준다. import React,{Component} from 'react'; class Control extends Component{ render(){ return ( create update ); } } export default Control;
-
[생활코딩] 컴포넌트 이벤트 만들기 3REACT 2022. 2. 1. 00:26
생활코딩 https://www.youtube.com/watch?v=11mTvRtXx4g&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=26 App state에 selected_content_id 이름을 줘서 선택된 content를 selected_content_id에 표시할 것이다. 그 값과 contents 객체에서 id 값과 비교하여 일치하는 것을 표출하도록 할 것이다. App.js 에서 부분 App.js 에서 render() 부분 mode가 read로 변경되었을 때 this.state.contents[i].id 값과 this.state.selected_content_id 값을 비교하여 일치한다면 해당 content 내용을 표출시켜준다. var _title, _des..
-
[생활코딩] 컴포넌트 이벤트 만들기2REACT 2022. 1. 31. 23:37
생활코딩 https://www.youtube.com/watch?v=hR5H0OFksx8&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=25 TOC component 에서 원하는 주제를 클릭했을 때 mode를 welcom에서 read 로 변경해보자. a 태그를 onClick 을 했을 때, function이 실행되고 페이지가 바뀌지 않도록 event 객체를 받아 e.preventDefault() 를 실행한다. 그리고 this.props.onChangePage 라는 props를 실행하여 mode가 변경되도록 만든다. TOC.js import React, {Component} from 'react'; class TOC extends Component{ render(){ con..
-
[생활코딩] 컴포넌트 이벤트 만들기1REACT 2022. 1. 31. 23:31
생활코딩 https://www.youtube.com/watch?v=NFR7vDArVlY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=24 Subject Component 에 이벤트를 설치하고 싶다면 onChangePage 이벤트를 사용하여 onChangePage 이벤트에 설치한 함수를 호출하도록 만들면 된다. import React,{Component} from 'react'; import TOC from "./components/TOC"; import Content from './components/Content'; import Subject from './components/Subject'; import './App.css'; class App extends Co..
-
[생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수REACT 2022. 1. 31. 21:14
생활코딩 https://www.youtube.com/watch?v=h7GdhY_m8nM&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=21 import React,{Component} from 'react'; import TOC from "./components/TOC"; import Content from './components/Content'; import Subject from './components/Subject'; import './App.css'; class App extends Component{ constructor(props){ super(props); this.state={ mode:'read', subject:{title:'WEB',sub:'wo..
-
[생활코딩] 이벤트 설치REACT 2022. 1. 31. 20:07
생활코딩 https://www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20 * 링크걸기 import React,{Component} from 'react'; class Subject extends Component{ render(){ //class 안에 함수는 function을 생략할 수 있다. console.log('subject render'); return ( {this.props.title} {this.props.sub} ); } } export default Subject; * react와 같은 application 을 사용할 때 reload를 하지 않아도 역동적인 사이트를 만들 수 있다는 장점이..
-
[생활코딩] 이벤트 state props 그리고 render 함수REACT 2022. 1. 31. 17:10
생활코딩 https://www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi state 세팅하기 현재 보고있는 페이지가 welcome page인지 read page인지 구분하기 위해 state에 mode 값을 준다. (기본값은 welcome) mode:'welcome', 그리고 welcome mode 일 때 content 영역에 표시할 text도 지정한다. welcome:{title:'Welcome',desc:'Hello, React!!'}, react에서는 state 값이 바뀌면 그 state를 가지고 있는 component 에 render 함수가 다시 호출된다. 그러면 그 render 함수 하위에 있는 여러 compon..