javascript (21) 썸네일형 리스트형 React기초-5.state2 여러개의 list를 state로 선언 후 하위 컴포넌트에 전달하는 방법. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { subject: { title: 'WEB', sub: 'world wide web!' .. React기초-4.state 오늘은 state에 대해서 알아보도록 하겠습니다. Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다. 아래는 state의 예시입니다. App.js(Old) import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Co.. React기초-3.props 오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App exte.. React기초-2.컴포넌트 제작 컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요. 1. 우선 App.js에서 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다. logo.svg파일을 임포트 하는 부분도 삭제해 줍니다. import React, { Component } from 'react'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { render(){ return ( {/*Subjct Component *.. React기초-1.설치 및 환경설정 React로 이런거 한번 만들어보겠습니다. egoing님 강좌 따라하기입니다. 방송으로만 보면 기억에 안남아서 공부할 겸 남겨놓습니다. 기능은 1. 로딩시 또는 WEB을 클릭하면 welcome 화면 띄우기 2. 각 Subject(HTML / CSS / JavaScript)를 클릭하면 그에 따른 내용 변경하기 3. create Subject 4. update Subject 5. delete Subject 입니다. 1. 우선적으로 설치해야할 것은 1. Node 2. Visual Studio Code 3. create-react-app (npm install -g create-react-app : global 설치) 입니다. 2. Visual Studio Code에 필요한 부가기능은 1. reactjs cod.. 이전 1 2 3 다음
