React

아래 과정은 리액트 프로그래밍 정석을 따른다.1) NVM(버전을 관리해주는 프로그램) 설치2) Node.js 설치3) yarn 설치4) react 앱 생성하기 yarn create react-app do-it-example --scripts-version 2.1.75)

자바스크립트에 XML을 추가한 확장형 문법index.js 파일은 yarn start 멸영어로 리액트 서버를 구동했을 때 최초로 실행된다.방법 1. js만으로 html Dom생성하고 처리하기결과방법 2. jsx를 연동하여 사용index.jsApp.js해당 js부분을 di

영어로는 요소, 부품이란 뜻 기능을 단위별로 캡슐화하는 리액트의 기본 단위프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에

Property : 컴포넌트 내부에서 값을 바꿀수 없다.State : 값을 저장하거나 변경할 수 있는 객체생성자에서 반드시 초기화 필요state를 변경할때는 setState()함수(상태관리함수)를 반드시 사용해야 한다.(forceUpdate()함수도 가능은하다.)set

아래내용은 이 분의 블로그에서 참조한 내용이 많다. index.jsApp.jsindex.htmlindex.jssrc 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.

Count.jsxApp.js해당 Count.jsx에서 this는 Count라는 클래스 그 자체이다. 즉 버튼에서 this.Increase가 아닌 Increase로 하게 될 경우 해당 부분에서 Increase 함수를 찾지를 못한다. (Unresolved variable

App.jsAppChild.jsxApp컴포넌트는 버튼을 누르면 상태값 count가 증가하는것이 있고AppChild에서 받아 이벤트를 부모 컴포넌트인 App에서 동작하게하는 clickChild 가 있다.AppChild컴포넌트에서는 click 이벤트가 있고 이를 부모 컴