티스토리

worri

검색하기

블로그 홈

worri

worri-pi.tistory.com/m

worri-pi 님의 블로그입니다.

구독자: 0

방명록 방문하기

728x90

주요 글 목록

[생활코딩] create 구현 : mode 전환 기능 / form / onSubmit 이벤트 /contents 변경 / shouldComponentUpdate / Array.from / Object.assign 생활코딩 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.. 공감수 0 댓글수 0 2022. 2. 1.
[생활코딩] create 구현 : mode 변경 기능 생활 코딩 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; 공감수 0 댓글수 0 2022. 2. 1.
[생활코딩] 컴포넌트 이벤트 만들기 3 생활코딩 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.. 공감수 0 댓글수 0 2022. 2. 1.
[생활코딩] 컴포넌트 이벤트 만들기2 생활코딩 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.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] 컴포넌트 이벤트 만들기1 생활코딩 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.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수 생활코딩 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.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] 이벤트 설치 생활코딩 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를 하지 않아도 역동적인 사이트를 만들 수 있다는 장점이.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] 이벤트 state props 그리고 render 함수 생활코딩 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.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] key 생활코딩 https://www.youtube.com/watch?v=sAFNZuzFEPo state를 더 사용해보자. 이전에 사용했던 state는 subject라고 하는 property에 값이 하나였는데, 여러개의 값을 다룰 때는 방법이 달라진다. TOC 안에있는 데이터를 App의 내부 state를 TOC에 주입함으로써 데이터가 자동으로 바뀌게 할 것이다. contents라는 property를 state에 추가한다. constructor(props){ super(props); this.state={ subject:{title:'WEB',sub:'world wide web!!'}, contents:[ {id:1, title:'HTML', desc:'HTML is HyperText ...'}, {id:2, t.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] state 소개 생활코딩 https://www.youtube.com/watch?v=rOpg2KUPW2M&t=29s https://www.youtube.com/watch?v=e2c1EUcW7oo App이라고 하는 Component에 Subject라고 하는 하위 Component가 있다. 하위 Component에 props의 값들이 하드코딩 되어 있다. 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.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩]react component 파일로 분리하기 실습 시작 전 chrome react developer tools를 다운받자 src 폴더 안에 components 폴더를 생성한다. components 폴더 안에 TOC.js 파일을 생성한다. TOC.js 에 다음 코드를 작성한다. 첫 번째 줄에 import 부분은 'react 라이브러리에서 Component 라고 하는 클래스를 로딩한다' 라는 뜻이다. 마지막 줄은 'TOC 라는 클래스를 외부에서 사용할 것을 허용하는 코드' 이다. import React, {Component } from 'react'; class TOC extends Component{ render(){ return( HTML CSS JavaScript ); } } export default TOC; 그리고 App.js 에 TOC 클래.. 공감수 0 댓글수 0 2022. 1. 31.
[생활코딩] REACT 시작하기(환경설정, 배포) node --version npm -v npm install -g create-react-app : 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요없다. 최신버전을 사용하지 못할 수 있다. npx create-react-app : 항상 최신버전의 react를 사용할 수 있다. 매번 새롭게 다운로드 받아야 한다.( 다운로드 이후 삭제되기 때문에 용량차지X) 개발을 원하는 폴더에 create-react-app . (npx create-react-app 만들폴더이름) 개발을 원하는 폴더로 vscode 를 연 후 npm run start 기본적으로 index.html 에 id="root" 인 태그 안에 react를 통해 만든 태그들이 들어간다. (src 폴더안에 있는 파일들을 이용해서 수정) *react .. 공감수 0 댓글수 0 2022. 1. 31.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.