song.log

1. JSX란? JavaScriptXML의 약어 : Javascript에 XML을 추가한 문법 React프로젝트에서 Babel로 컴파일하여 사용(순수 자바스크립트로 변환) 2. JSX의 장점 1) 가독성 우수 // 1. JSX문법을 사용하지 않고 React.createElement로만 작성 ReactDOM.render( React.createElement( 'div', null, React.createElement( 'h1', null, '리스트' ), React.createElement( 'ul', null, React.createElement( 'li', null, '항목1' ), React.createElement( 'li', null, '항목2' ) ) ), document.querySelecto..

1. React에서 FullCalendar를 사용할 때 필요로 한 모든 npm 설치 npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid npm install style-loader css-loader sass-loader node-sass --save 모든 모듈의 설치가 끝났으면 FullCalendar를 적용시키자. import React, { Component } from 'react'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; class MyCalendar extends Com..

1. State 사용 state를 사용하기 위해서는 클래스형 컴포넌트가 기반이 되어야 한다. 기본 형태로는 아래와 같다. 1) state로 부모 컴포넌트 > 자식 컴포넌트로 값 넘겨주기 먼저 생성자에 state를 선언해주고 그 state 값을 렌더링할 때 사용할 수 있다. 또한 이 state 값을 자식 컴포넌트에게 넘겨준다면, 자식 컴포넌트는 이 데이터를 props를 통해 사용할 수 있게 된다. //부모 컴포넌트 Test import React, { Component } from 'react'; import TestChild from './TestChild'; class Test extends Component { constructor(props){ super(props); this.state ={ na..

1. JSX 란? JSX의 형태를 먼저 보면 HTML의 형태와 굉장히 유사하다. const element = Hello, world!; JSX는 자바스크립트 문법을 기반으로 한 자바스크립트 확장형 문법이다. 리액트 컴포넌트를 작성할 때 주로 사용된다. 2. JSX의 기본 규칙 1) 태그는 언제나 닫아줘야 한다. HTML에서 input태그를 사용할 때 닫아주지 않고도 사용이 가능했다. 하지만 JSX에서는 어떤 태그던지 모두 닫아줘야하는 규칙이 있다. 2) 두 개 이상의 element는 무조건 하나의 element로 감싸져있어야 한다. hello React 불필요하게 태그가 많아서 불편할 경우, Fragment 기능을 사용하면 된다 (v16.2부터 도입된 기능) import React, { Component..

1. Props와 State의 차이 Props: 먼저 Props는 Properties의 줄임말로 State와의 간단한 차이는 변할 수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고 이 props는 상속받은 컴포넌트 내에서 수정이 불가능하다. 리액트에서는 부모 > 자식의 일방향성 상속이라는 특징 때문이다. props는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로 'this.props,xxx'로 나타낸다. - 읽기 전용 - 부모 요소에서 설정하는 것 - 초깃값과 자료형의 유효성 검사가 가능 State: State는 컴포넌트의 상태를 나타내며, props와 반대로 변할 수 있다. 컴포넌트의 내부에서 선언되기 때문이다. 이러한 state는 외부에 공개하지 않고, 컴포넌트가 스..

1. 컴포넌트(Component) 제작 리액트로 만들어지는 앱을 이루는 최소한의 단위로 공식 문서를 보면 자바스크립트의 함수 역할을 맡은 존재와 같다. 컴포넌트는 React의 Component 객체를 상속하는 클래스를 생성해서 export하는 App에 태그화 하여 작성하면 클래스의 html 코드를 구현할 수 있다. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render(){ return ( ); } } class Subject extends Component{ render(){ return ( WEB World Wide Web )..

React(리액트)는 자바스크립트로 만들어진 프레임워크로 Facebook UI Library이다. 기존의 프론트언어가 아닌 리액트를 사용하고자 하는 이유는 대부분 아래와 같다. 1. 가독성 2. 재사용성 3. 유지 / 보수 용이 1. create-react-app을 이용해서 개발환경구축 1. npm 설치 npm install -g create-react-app ※ 오래된 버전의 경우 더이상 템플릿을 지원해주지 않는 경우가 있다. 최신 버전으로 깔아야 템플릿을 받을 수 있다. A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global ..