[4] React State

일단 강의 진도는 현재 컴포넌트 파일 분리하기까지 했다. 이전의 실습해서 App.js 파일에 한꺼번에 만들었던 컴포넌트들을 src 디렉토리에 components 디렉토리를 만들어서 각자 클래스 이름으로 js 파일을 만든 다음에 분산시켰다.

다음 코드 형식과 같이 모두 분리해보았다.

Test.js

App.js

본래 컴포넌트 클래스를 가져다가 와서 React를 불러오는 코드를 상단에 추가해 준 다음에  export 문을 추가하여 다른 파일에서 이 파일을 import 할 수 있도록 해 주었다.

 

그리고 App.js에서 이 파일을 불러와야 하므로 상단에 import 문으로 불러와서  App.js에서 오류가 나지 않고 잘 사용되는 모습을 볼 수 있었다. 분할을 하더라도 보이게 하는 메인 코드는 같기 때문에 결과에는 지장이 없었다.

 

다음은 state에 대해 알아보았다. props를 같이 보아야 한다. 

내부와 외부의 정보가 철저하게 분리되어있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 핵심이다.

좀더 복합적으로 다양한 일을 하는 컴포넌트를 만들 때 필요한 것이다.

예시 코드를 작성해 보았다. 예시 코드는 아래와 같다.

 

[App.js]

import React, { Component } from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import Test from "./components/Test";
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state =  {
      subject:{title: 'WEB is...', sub:'world wide web!!!!'},
      contents: [
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'TTTT', desc:'CSS is for design'},
        {id:3, title:'SSSS', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h3>Hello React!!</h3>
        <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}></Subject>
        <Subject title="Helloo!!" sub="this text is modify!!"></Subject>
        <Test nameTest="wow react soooo good!"></Test>
        <TOC data={this.state.contents}></TOC>
        <Content></Content>
      </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>);
            //이 list에 위의 태그가 하나하나 생기는 것을 볼 수 있다!
            i =  i + 1;
        }
 
        return(
            <nav>
            <ul>
                {lists}
            </ul>
            </nav>
        );
        }
  }
 
  export default TOC;
  //TOC라는 클래스를 외부에서 가져다 쓸 수 있도록 만든다

constructor(props)는 처음에 페이지를 로딩할 때 제일 먼저 로딩되어서 값을 초기화하는 것이라고 보면 된다.

이 값이 먼저 로딩되면 이것을 가져다 씀으로써, 사용자에게 불필요한 정보가 노출되지 않고 은닉하도록 사용하는 것이다. 또한, 이것을 사용하면 유동적으로 값을 넣을 수 있다. 

 

TOC에서 사용한 방법은 App.js 에서 들어갈 정보를 미리 선언하고, 그 정보의 개수에 따라 유동적으로 태그를 생산한다. 결과는 잘 반영되는 것을 볼 수 있다. 또 주의할 점이, 리액트 자체 내에서 key를 추가하라는 경고가 뜨는데, 많은 태그를 한꺼번에 유동적으로 생성할 경우 이들끼리 구별할 식별자가 있어야 하므로 이를 설정하라는 것이다. 이것을 설정하면 콘솔 창에서 뜨는 에러도 없어지게 되니 알아두도록 하자.