리액트 State

생활코딩! 리액트 프로그래밍

요즘 리액트 공부에 푹 빠져 있다.

오늘은 state에 대한 내용으로 정리를 해두고자 한다.

import "./App.css";
import { Component } from "react";
import TOC from "./Components/TOC";
import Content from "./Components/Content";
import Subject from "./Components/Subject";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            subject : {title:'WEB', sub:'world wide web!!'},
            content:[
                {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">
        <Subject title= {this.state.subject.title} sub={this.state.subject.sub}></Subject>
        <TOC data={this.state.content}></TOC>
        <Content
          title="HTML"
          desc="HTML is HyperText Markup Language."
        ></Content>
      </div>
    );
  }
}

export default App;

---

State

 constructor 부분에 props가 나온다.

props는 리액트의 숨겨진 내부 변수 공간?이라고 난 이해하겠다.

propertis의 줄임말 같은데? 맞을려나.. 아마도 그럴 듯.

 

그리고 그 속성(props) 안에는 state 속성이 또 있어서 정보의 상태를 관리하는 개념을 적용한듯하다.

WAS, DB에서 데이터를 읽어와서 props에 셋팅하고, 변경이 일어나면 WAS, DB에 던지고 props안에 상태에도 변경시키고.... 등등

 

 예제를 보니 App.js 에서 값을 초기화하고 하위 컴포넌트 페이지들에게 그 props를 전달해서 HTML에 바인딩한다.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            subject : {title:'WEB', sub:'world wide web!!'},
            content:[
                {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 부분에서 각 컴포넌트들에게 값을 넘기는 부분.

  render() {
    return (
      <div className="App">
        <Subject title= {this.state.subject.title} sub={this.state.subject.sub}></Subject>
        <TOC data={this.state.content}></TOC>
        <Content
          title="HTML"
          desc="HTML is HyperText Markup Language."
        ></Content>
      </div>
    );
  }
}

Content 태그를 보면, props에서 title과 desc를 바인딩한다.

class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}

 그렇다면 이런 의문을 갖게 된다.

 

부모에서 자식에게는 데이터를 어떻게 전달하는지 알았다. 반대로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 어떤 방식으로 전달하는지 궁금해진다.

 

찾아보니 인프런 강의

https://www.inflearn.com/course/react-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

[무료] 생활코딩 - React - 인프런 | 강의