state 개념잡기

기존에는, class App 부분에 props 값이 바로 하드코딩되어서 들어갔다. 하지만 이는 좋지 않다. 내부적으로 구동되는 부분을 최대한 뒤로 숨기게 하는 것이 좋은데, 이를 state 가 담당한다. 아래 코딩 내용 참고

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


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "WEB", sub: "World Wide Web!" }
    }
  }
  render() {
    return (
      <div className="App">
        <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}

export default App;

key의 개념을 잡아 보자. 컴포넌트 TOC 에는 기존에 클래스부분에 내용이 하드코딩이 되어 있다.

state를 초기화를 통해 이를 자동으로 구현될 수 있도록 해보자.

 

class App 부분 코딩

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


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

export default App;

위 내용중에 TOC data 부분을 자세히 살펴 보자.

 

1) data={this.state.contents}의 뜻은, TOC에 props에 data라는 값을 준 것이다. state의 contents 부분에는

배열에 각 객체가 들어가 있고, 각 객체에는 id 값, title값, desc값이 들어가 있다.

 

2) TOC 컴포넌트는 아래와 같이 구성 되어 있다. (복수의 엘레멘트에는 key 활용)

이를 설명하면, lists라는 배열을 만들었고, lists안에 각 객체들이 하나씩 들어가는 알고리즘이다.

코딩 흐름은,

 

(1) lists 배열화

(2) data 변수 선언 = this.props.data (위 App 컴포넌트의 하위 TOC 부분의 data - 여기에는 현재 3개의 객체가 들어가 있음)

(3) 반복문 - data.lenth = 3이기 때문에 초기 i 값은 0이며  i= 0 ~ 2까지 진행 된다.

i = 0부터 흐름을 보자. i가 0일 경우, lists.push를 통해 (1)의 배열에 특정 조건에 맞는 값이 들어 간다. 이때 조건을 하나씩 뜯어서 분석해 보자.

 

a) key={data[0].id}, 이 뜻은 key는 각 객체에는 고유번호가 들어가야 하는데, 이를 정의 해주는 것이다. 다시말해, data[0]은 컴포넌트 state의 contents의 첫번째 객체를 가리킨다.  따라서 contents의 첫번째 객체 id 값 즉 id = 1을 말한다.

 

b) a href={"/content/" + data[0].id}, 이 뜻은 url 값을 지정해주는 것이고, a) 와 같은 흐름이다.

 

c) data[0].title 역시 위와 같은 흐름이다.

 

최종적으로 반복문으로 총 3개의 객체를 lists에 넣어 두었고, return 값에 {lists}를 선언함으로써, 각 객체 값이 <ul> {lists} </ul> 구문에 들어 가게 된다.

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;

지금 까지 배운걸로 미루어보아,

 

컴포넌트는 말그대로 부품으로 어떤 어플리케이션에서도 재활용 될 수 있게 기본 틀을 제공해주는 역할을 해야 한다. 따라서 컴포넌트부분에 하드코딩이 되어 있으면 안된다. (props를 통해)

 

다시 말해, 특정 값은 state에 정의 되어야 하고, 그 state값이 App 컴포넌트에 들어가고, App 컴포넌트는 하위 컴포넌트들의 값들을 가져오는 식으로 구성이 되어야 하는 것 같다. 이때 하위 컴포넌트 값들은 앞서 말한대로 props를 통해 state에 정의된 특정 값을 가져 오는 로직으로 구성 되어야한다.