[React 리액트] props와 state 개념 및 기본 예제

1. React - props와 state 개념

 

리액트 컴포넌트에서 다루는 데이터는 props와 state 두가지로 나뉩니다.

 

또 리액트에서는 props의 값이나 state의 값이 바뀌면 해당되는 component(컴포넌트)의 render(){} 함수가 호출되도록 약속되어 있습니다.

 

그말은 즉, props나 state가 바뀌면 화면이 다시 그려진다 라는 말입니다. 

 

props와 state 개념

props(읽기 전용)

props는 부모(상위) 컴포넌트가 자식(하위) 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받아오고 받아온 props를 직접 수정하는 것은 불가능합니다. 

 

하위 컴포넌트에서 상위 컴포넌트의 값을 변경하고 싶을 때에는 event를 사용합니다.

 

state(컴포넌트 자기 자신이 가지고 있는 값)

반면, state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경하는 것이 가능합니다.

---

2. React - props / state 기본 예제 (실습)

 

아래는 src 구조이며 컴포넌트로 사용할 파일을 components 디렉토리로 구분하였습니다.

 

Subject.js 와 TOC.js는 본문 글과 상관 없는 파일입니다.

src 폴더 구조

 

 

App.js - 부모 컴포넌트

import React, { Component } from 'react';
import Content from "./components/Content"
import './App.css';

class App extends Component{

  // 컴포넌트가 실행될 때 constructor가 먼저 실행되면서 초기화를 담당한다.
  constructor(props){
    super(props);
    this.state ={
    subject:{title:'WEB', sub:"World Wide Web!"}    // subject의 값을 state화 시킴
  }
  
  render(){
    return (
      <div className="App">
          <Subject
            title={this.state.subject.title}  
            sub={this.state.subject.sub}> 
          </Subject>
      </div>
    );
  }
}

export default App;

 

constructor

어떠한 컴포넌트가 실행될 때 constructor라는 함수가 가장 먼저 실행되면서 초기화를 담당합니다.
render라는 함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor안에다가 코드를 작성합니다.

컴포넌트가 render되기 전에 props 값으로 보낼 subject state를 초기화합니다. - constructor

 

저희는 subject의 값을 state화 시킬 것이기 때문에 subject의 프로퍼티 값으로 title:'Web', sub:'World Wide Web!' 를 준 state를 만듭니다.

 

이때 이 state의 값을 어떻게 사용할까요?

Content.js를 import하여 Content 컴포넌트(자식)로 render해주고 값으로 위 App.js에서 props로 보낸 값을 받아 아래와 같이 사용합니다.

 

Subject.js - 자식 컴포넌트

import React, { Component } from 'react';

class Subject extends Component{
    render(){
        return(
        <header>
            <h1>{this.props.title}</h1>
            {this.props.sub}
        </header>
        );
    }
}

  export default Subject;

브라우저에 보이는 결과

Subject.js 파일을 만들어 Subject 컴포넌트를 만듭니다. Class 컴포넌트에서는 render() {} 함수가 필수로 필요합니다. 그리고 jsx를 return해주어야 합니다.

 

{this.props.title}, {this.props.desc}

Subject(자식) 컴포넌트에서 App(부모)에서 값으로 보내온 props를 받아 사용합니다. 이때 중괄호{ }를 사용합니다.

 

 

---

 

리액트의 props와 state에 대한 개념 및 기본 예제를 알아보았습니다.

 

모두 React공부 화이팅      ! ( ' ^ ' ) !