React State 의 소개와 사용법

이번 내용은 이해하기 어려운 게 맞으므로 일단 그러려니 하고 보면서 익숙해지는 게 중요하다..!

🥚 Props와 State의 의미

앞서 배운 props란, 사용자가 component를 사용하는 입장에서 중요한 것으로 component의 기본 동작을 바꾸고 싶을 때 사용자가 조작하는 것이다. 쉽게 말해 태그의 속성에 해당하며 component 외부에 존재한다.

state란, props의 값에 따라 내부 구현에 필요한 데이터들을 가리키며 component 내부 동작을 의미한다. 

둘은 철저하게 분리되어 있어야 하며 철저하게 분리되어 있을수록 좋은 웹, 앱이라 칭할 수 있다.

 

🥚 props(속성) 부분을 state로 표현해보자

App 컴포넌트의 하위 컴포넌트인 Subject 컴포넌트에서 하드 코딩되어있는 props(속성) 부분을 state로 표현해보자. 지금은 밑의 사진처럼 Subject 컴포넌트에 직접 내용이 들어가 있는 하드 코딩 방식이다.

 

Subject 컴포넌트

어떤 component가 실행될 때 render 함수보다 먼저 실행되면서 component를 초기화시켜주는 코드를 constructor 안에 작성한다. 초기화 함수라고도 한다.

constructor(props){
    super(props);
  }

 

constructor 함수 안에 this.state로 subject 컴포넌트를 정의한 후

constructor(props) {
    super(props);
    this.state = {
      subject: { title: "MEOW", sub: "The cat rules the world!" },
    };
  }

 

render 함수 안의 Subject 컴포넌트 props(속성)에 위에 정의한 this.state.subject.title을 다음과 같은 방식으로 불러온다.

<Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        ></Subject>

 

TOC 컴포넌트

이번엔 왼쪽과 같은 리스트 형식을 state로 표현해 볼 것이다. constructor 함수의 this.state 안에 contents로 리스트 내용을 추가한다.

 

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 함수의 TOC 컴포넌트에 props(속성)로 data를 정의해준다. TOC의 props(속성)은 위에서 정의한 contents를 this.state.content로 불러온다.

<TOC data={this.state.contents}></TOC>

 

 

TOC.js로 이동해 this.props.data로 위의 TOC props(속성)인 data를 가져온다. 그리고 data 배열의 길이만큼 새로 만든 list에 표시하고 싶은 내용을 푸시해주고 return 함수에서 list를 출력한다. 우리가 웹페이지에 표시할 내용은 HTML, CSS, JavaScript 등 title 뿐이므로 {data[i].title}을 작성하면 된다. list의 key 부분은 React 내에서 자동으로 만들어진 목록을 식별하기 위한 값으로 지금 공부하는 부분에서 중요하지 않으므로 넘어가도록 하자!

import React, { Component } from "react";

class TOC 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 TOC;

 

🥚 전체 코드

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "MEOW", sub: "The cat rules the world!" },
      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">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        ></Subject>
        <TOC data={this.state.contents}></TOC>
      </div>
    );
  }
}

export default App;

// TOC.js
import React, { Component } from "react";

class TOC 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 TOC;