[React] props 와 state

 

 

스마트폰을 예시로 들었을 때, 사용자의 입장과 제품을 만드는 제작자의 입장이 존재할 수 있다.

사용자 입장에서 스마트폰을 조작하는 장치는 "버튼"과 "화면"이라고 할 수 있다. 장치를 조작하는 장치를 "props"

제품의 내부적인 구현을 위해서 다양한 조작 장치를 가지게 하는데 이 내부적 장치들을 "state"

 

즉, Component 의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 props를 제공하여 조작할 수 있게 된다.

사용자에게는 알 필요가 없는 Component 내부적으로 사용되는 것들을 state 라고 한다.

 

 

아래의 코드로 자세히 알아보자.

 

 

src/App.js

---

import React, { Component } from 'react';
import Nav from './components/Nav';
import Article from './components/Article';
import Header from './components/Header';
import './App.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      subject:{title:'WEB', sub:'World Wide Web!'},
      contents:[
        {id:1, title:'html', desc:'HTML is for information'},
        {id:2, title:'css', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render() {
    return(
      <div className="App">
        <Header title={this.state.title} sub={this.state.sub}></Header>
        <Nav data={this.state.contents}></Nav>
        <Article></Article>
      </div>
    );
  }
}

export default App;

 

constructor()

: 어떤 Component가 실행될 때, render 함수보다도 먼저 constructor() 함수가 실행되면서 Component 를 초기화

 

이렇게 constructor 를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그래서 사용하는 것이 super.

그렇기 때문에 리액트 Component 가 지니고 있던 생성자를 super 를 통하여 미리 실행

 

super(props)

: 자바스크립트에서 super는 부모 클래스 생성자를 의미한다. 리액트에서는 Component를 만들게 되면서 Component 를 상속받았기 때문에, React.Component가 부모 클래스 생성자가 된다. 

 

여기서 중요한 것은 super(props)가 선언되기 전까지 constructor에서 this 키워드는 사용할 수 없다.

super에 props를 인자로 넘겨주는 이유는 props에 대해서 명확하게 사용하기 위해서라고 이해하면 쉬울 것이다.

 

 

 

src/components/Nav.js

---

import React, { Component } from 'react';

class Nav extends Component {
    render() {
      var lists = [];
      var data = this.props.data;
      var i = 0;
      while(i < data.length){
        lists.push(<li key={data[i].id}><a href="/content/"+data[i].id>{data[i].title}</a></li>);
        i = i + 1;
      }
      return(
        <nav>
            <ul>
            	{lists}
            </ul>
        </nav>
      );
    }
}


export default Nav;

 

key는 React에 렌더링 할 때마다 아이템이 다른 위치에 있다는 것을 알려준다.

React가 내부적으로 필요해서 요청하는 값으로 다른 속성들과 구분할 수 있는 식별자

 

 

 

props

---

부모 컴포넌트가 자식 컴포넌트에게 주는 값

자식 컴포넌트에선 props를 받아오기만 하고, 받아온 prop를 직접 수정은 불가능합니다.

사용자에게 속성을 제공함으로써 그 컴포넌트를 조작이 가능하게 됩니다. 

 

 

 

state

---

컴포넌트 내부에서 선언하며 내부에서 값을 변경

 

 

 

부모의 App에서는 state라는 내부 정보를 사용하고, 자식에게 전달할 때는 props를 통해 전달한다.

App의 입장에서는 정의한 컴포넌트가 어떻게 돌아가는지 알 필요가 없으며,

사용자의 입장에서 데이터라고 하는 props로 어떤 형태의 정보를 전달하면 되는가하는 사용자의 입장에서 알아야 할 것만 알면 된다.