React 컴포넌트 , props, state

 

컴포넌트

단순한 템플릿 이상의 기능을 함. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주거나, LifeCycle API로 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있고, 메서드를 만들어 특별한 기능을 붙일 수도 있다.

 

 

컴포넌트 초기 코드

MyComponent.js

import React, {Component} from 'react';

class MyComponent extends Component{
	render(){
    	return(
        	<div>
              컴포넌트
            </div>
        )
    }
}

export default MyComponent;

마지막 줄의 export는 다른 파일에서 이 파일을 import할 때 위쪽에서 선언한 MyComponent클래스를 불러오도록 설정하는 코드이다.

 

그럼 import를 하면 어떨까

 

App.js

import React, {Component} from 'react';
import MyComponent from './MyComponent'; //MyComponnet파일을 불러옴.

class App extends Component{
	render(){
    	return(
        	<MyComponent/>
        );
   }
}

export default App;

 

 

 

props

컴포넌트의 속성값

 

props렌더링 -> props값 설정 -> props 기본 값 설정 -> props 값 검증

 

props렌더링 할 때 { }안에 감싸주어야함.

this키워드를 사용하여 props에 접근한다.

import React, {Component} from 'react';

class MyComponent extends Component{
	render(){
    	return(
        	<div>
              제 이름은 {this.props.name} 입니다.
            </div>
        )
    }
}

export default MyComponent;

 

 

이번에는 name속성을 설정해보자 html태그에 속성을 설정한는 것과 비슷하다.

import React, {Component} from 'react';
import MyComponent from './MyComponent'; //MyComponnet파일을 불러옴.

class App extends Component{
	render(){
    	return(
        	<MyComponent name="React"/>
        );
   }
}

export default App;

>웹브라우저에

제 이름은 React 입니다. 

로 보인다.

 

 

 

state

컴포넌트의 상태 값

 

위에서 배운 props는 부모 컴포넌트가 설정하며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있기 때문에 컴포넌트 내부에서 읽고 업데이트 하기 위해서는 state를 써야한다.

state는 언제나 기본 값을 미리 설정해야 사용할 수 있으며, this.setState()메서드로만 값을 업데이트 해야한다.

 

state 초깃값 설정하기 -> state렌더링하기 -> state값 업데이트하기

 

 

state 초깃값 설정은 컴포넌트의 생성자 메서드인 constructor 내부에서 설정한다.

state에 number 값을 0으로 설정하자.

import React, {Component} from 'react';

class MyComponent extends Component{
	(...)
    constructor(props){
    	super(props);
        this.state={
        	number:0
        }
    }
    
    render(){
    	(...)
    } 
}

export default MyComponent;

 

 

이제 number값을 jsx안에서 렌더링하자. props 렌더링과 다 비슷함

render(){ 
  return(
              <div>
                  <p>제 이름은 {this.props.name}입니다. </p>
                  <p>저는 {this.props.age}살 입니다.</p>
                  <p>숫자 : {this.state.number}</p>
              </div>  
          )
}

 

state값을 업데이트하자. 이때는 this.setState()메서드를 사용한다.

render(){ 
  return(
              <div>
                  <p>제 이름은 {this.props.name}입니다. </p>
                  <p>저는 {this.props.age}살 입니다.</p>
                  <p>숫자 : {this.state.number}</p>
                  <button onClick={() => {
                  	this.setState({
                    	number : this.state.number+1
                        })
                  }
              }더하기</button>
              </div>  
          )

 

 

 

 

 

[참고] 리액트를 다루는 기술-김민준 (길벗)