Poetic Code＃시적인코드

[React] Developer Tools 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React React 공식 홈에서 Community 탭에 TOOLS를 눌러보면 React를 사용할때 같이 쓰면 좋은 도구들이 나와있다. 그중에서 Debugging을 클릭. (본인의 경우 Chromium을 사용하기 때문에 Chrome를 선택함.) React Developer Tools이라는 Chrome 확장 기능을 설치 받을수 있다.

[React] Event 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React 이전에 만들었던 화면에서 WEB 이나 HTML, CSS, JavaScript 를 클릭하면 아래의 내용이 달라지도록 하고 싶다. step1 /src/components/Subject.js ... {this.props.title} ... render 함수는 화면을 그려주는 함수이다 props, state가 변경되면 render 함수는 다시 호출된다. App.js를 다음과 같이 변경해주자. /src/App.js import React, { Component } from 'react'; import Subject from './components/Subject'; i..

[React] State 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React Component를 사용자가 조작할 수 있도록 하는 것은 Props이다. 사용자는 알 필요 없고 보여줄 필요없이 내부에서 사용하는 속성은 State이다. /src/App.js ... ...우리는 이전에 props를 통해 title 과 sub 라는 속성을 통해 값을 주고 동적인 컴포넌트를 만들었다. 우선은 state를 통해 기본값을 줘보자. /src/App.js ... class App extends Component { constructor(props){ super(props); this.state = { subject:{title:'WEB', ..

[React] 컴포넌트 제작 그리고 Props 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React 컴포넌트화 /pulbic/pure.html WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 위 코드를 React를 사용하여 일부를 컴포넌트화 시켜보자. /src/App.js import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render(){ return( WEB world wide web! ); } } // 1 class Ap..

[React] 개념 및 개발환경 구축 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React HTML의 사용자 정의 태그(컴포넌트) 단위로 쪼개어 관리하면 다음과 같은 장점이 생긴다. 가독성 재사용성 유지보수 리액트란? 프론트엔드 라이브러리 복잡한 UI를 캡슐화된 컴포넌트로 관리 설치 Node.js 설치 npm 설치 react-create-app 설치 -g : global 옵션, 어디서든 설치한 프로그램을 사용할 수 있다. @2.1.8 : 버전 명시 npm install -g create-react-app@2.1.8 설치 이후 디렉토리 생성 mkdir react-app cd react-app create-react-app . 참조 npx ..