song.log

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. 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 ..