[211018] React #01 : 세팅 + props

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

금일 진도는 0 ~ 64P.

목차로는 01. 리액트 기초내에 01) 수업소개 ~ 12) props 

 

1. 세팅 및 개발서버

npm install -g create-react-app
mkdir react-app
cd react-app
create-react-app .

• npm install -g create-react-app : create-react-app 명령어의 전역(-g)에서 사용할 수 있게 받음
• mkdir react-app : react 프로젝트 만들 디렉토리(react-app)생성
• cd react-app  : 생성된 디렉토리(react-app)로 이동
• create-react-app . : 현재 디렉토리(.)에 react 프로젝트 생성(npm install 까지 됨)

react 프로젝트 생성완료

아래 npm 명령어로 http://localhost:3000/ 에 개발 서버 띄울 수 있음.

npm run start

 

2. render, class, import, props

React도 Vue와 마찬가지로 Component based 임.

2-1. 컴포넌트 간단형

import React, {Component} from 'react';

class Hello extends Component{
  render(){
    return (
      <h4>Hello React, Hi Grey</h4>
    )
  }
}

위와 같이 선언하면 Hello 라는 컴포넌트를 만든거임.

react npm 패키지로부터 Component를 import 해와서 javascript의 class와 extends 를 통해 컴포넌트를 선언하는 거임. 컴포넌트이기 때문에 import 해 온 Component를 extends 해야하는 거고, 이 경우에 내부에 render라는 함수를 가짐. 이때, render는 여타 javascript와는 다르게 function 키워드가 빠졌는데 이는 javascript의 class내부에 선언된 함수이기 때문임.

 

추가로 return 되는 내부에는 Vue와 마찬가지로 최상단엔 1개의 태그만 존재해야함.

 

2-2. 컴포넌트에 props 추가하기

위와 같이 생성한 Hello 컴포넌트는 아래와 같이 사용되는데,

class App extends Component{
  render(){
    return {
      <div className="app">
        <Hello/> {/* Hello 컴포넌트 사용 */}
      </div>
    }
  }
}

이때 Hello 컴포넌트에 Vue와 같은 props 개념을 적용할 수 있음.

적용법도 사실 Vue와 크게 다르지 않음.

 

이름부분만 props로 전달받는다고 한다면...

import React, {Component} from 'react';

class Hello extends Component{
  render(){
    return (
      <h4>Hello React, Hi {this.props.name}</h4>
    )
  }
}

위와 같이 기존에 'Grey'라는 문자열이 있던 부분에 중괄호와 this.props 라는 정의가 추가되고,

name이라는 props명을 정의하면 됨. 그리고 사용처에서는 아래와 같이 정의하는 거임.

class App extends Component{
  render(){
    return {
      <div className="app">
        <Hello name="Grey"/> {/* name props와 값 추가 */}
      </div>
    }
  }
}