Props (5) 썸네일형 리스트형 [React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다... [React] (9) 이벤트 state, props, event 만들기, render function, bind 함수, setState 우리의 어플리케이션을 역동적으로 만들어주는 기술이 이벤트다. state, props, event 3개가 어울어져 만들어진다. react는 props나 state가 바뀌면 render 함수가 다시 호출된다. 따라서 그 render에 포함된 모든 것들이 다시 호출된다. App.js 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 { // render 함수보다 먼저 실행이되면서 초기화시.. [React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js 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 { // render 함수보다 먼저.. [React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js 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 { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다.. [React] (6) State란 (props 와 state의 차이) State란? state를 이해하기 위해선 props와 비교해보는 것이 좋다. props state 사용자가 Component를 사용하는 입장에서 중요 props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알필요도 없고 알아서도 안된다.) 사용자가 조작하는 버튼 외부 조작버튼이 사용되기 위해 내부에서 조작되는 장치들 Props와 State는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 좋다. props vs state 이전 1 다음
