[React] props와 state(+css 적용)

리액트에서 props와 state를 활용해 숫자 10을 화면에 나타내보자.

 

리액트 props는 '소품'이라는 뜻으로 자바스크립트 객체. 함수의 매개변수처럼 컴포넌트에 전달된다.

예를들어 '사람'이라고해도 이름과 나이 성별등등이 모두다른데 이때 props를 사용.

import React from 'react'

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Display value={10}/>
            </div>
        );
    }
}

const Display = (props) => (
  <div>
      <h1>{props.value}</h1>
  </div>
)

export default App;

 

state역시 자바스크립트 객체로 함수내 선언된 변수처럼 컴포넌트 안에서 관리되고 class내에서만 이용가능함.

props는 아래처럼 생략가능

import React from 'react';

class App extends React.Component {
    //state초기화
    constructor(props) {
        super(props)
        this.state = {
            value: 10
        }
    }
    render() {
        return (
            <div>
                <Display value={this.state.value}/>
            </div>
        );
    }
}

const Display = ({value}) => (
  <div>
      <h1>{value}</h1>
  </div>
)
export default App;

 

일단 결과는 이렇게 출력됨

그런데 나는 숫자 10을 가운데에 넣고싶고 파란글자를 넣고싶음

 

Html에서 class를 사용하는것과 달리 달리 리액트는 특이하게 xml에 className을 사용함

그래서 <div className="App">{this.state.value}</div>로 바꿔주고

css폴더를 만들어 import해주면 끝!  

import React from 'react';
import './App.css'

class App extends React.Component {
    //state초기화
    constructor(props) {
        super(props)
        this.state = {
            value: 10
        }
    }
    render() {
        return (
            <div className="App">
                <Display value={this.state.value}/>
            </div>
        );
    }
}

const Display = ({value}) => (
  <div>
      <h1>{value}</h1>
  </div>
)
export default App;