Wilkyway

여러개의 list를 state로 선언 후 하위 컴포넌트에 전달하는 방법.

App.js

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: 'WEB', sub: 'world wide web!' },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is HyperText ...' },
        { 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}
        />

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

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

App.js 에서는 TOC 컴포넌트의 data(props)로 정보(this.state.contents)를 전달합니다.

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 (
            <div>
                <nav>
                    <ul>
                        {lists}
                    </ul>
                </nav>
            </div>
        );
    }
}

export default TOC;

TOC 컴포넌트 내부에서는 props의 형태로 받아들인 데이터를 data라는 변수로 받아들이고 이를 활용합니다. 출력할 때에는 while루프에 의해 생성된 lists만 출력하면 결과가 나타납니다. 여러개의 리스트를 생성할 경우 key 값이 필요한 점도 익혀두시기 바랍니다.

오늘은 state에 대해서 알아보도록 하겠습니다.

Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다.

아래는 state의 예시입니다. 

App.js(Old)

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!" />

        <TOC />

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

기존 Subject 컴포넌트에서 props에 해당하는 title, sub 속성이 고정되어 있었습니다. 이를 조작 가능하도록 상위 컴포넌트에 해당하는 App에서 변수의 형태로 선언을 하려고 합니다. 이 경우 App 내부에서 변수와 같이 활용 가능한 속성을 state라고 합니다. 이렇게 App의 state로 선언된 속성을 하위 컴포넌트인 Subject의 props로 전달하여 변경하도록 하겠습니다.

App.js(New)

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

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}
        />

        <TOC />

        <Content title="HTML" desc="HTML is HyperText Markup Language." />
      </div>
    );
  }
}


export default App;

 위와 같이 App 컴포넌트 내부에서 변수와 같이 사용할 속성을 선언할 때에는 this.state로 선언하고,

이를 하위 컴포넌트의 props로(title, sub) 할당하여 사용할 수 있습니다. 이렇게 선언하면 아직은 고정된 text를 출력하지만, 추후에는 App 컴포넌트 내부에서 state의 조작을 통해 Subject로 전달되는 정보를 변경할 수 있게 됩니다.

오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 <Subject> 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다.

App.js

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
	render(){
      return (
        <div className="App">
          {/* 기존코드
          <Subject />
          */}
          <Subject title="WEB" sub="world wide web!" />

          <TOC />

          <Content title="HTML" desc="HTML is HyperText Markup Language." />
        </div>
      );
    }
}

export default App;

Subject.js

import React, { Component } from 'react';

class Subject extends Component {
    render() {
        return (
            <div>
                <header>
                    {/* 기존 코드
                    <h1>WEB</h1>
                    world wide web
                    */}
                    <h1>{this.props.title}</h1>
                    {this.props.sub}
                </header>
            </div>
        );
    }
}

export default Subject;

위의 예에서 보듯이 기존에는 Subject.js에서 직접 태크와 텍스트로 그려내던 것을

App.js 내에서 Subject 컴포넌트의 title, sub와 같은 속성(props)으로 정의한 다음,

다시 Subject.js에서 이 속성(props)를 위의 코드와 같은 형식으로 불러서 출력할 수 있습니다.

이후 과제 진행을 위해서 Content.js도 props 속성을 이용하여 수정하도록 하겠습니다.

Content.js

import React, { Component } from 'react';

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

export default Content;

컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요.

1. 우선 App.js에서 <div className="App"> 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다.

logo.svg파일을 임포트 하는 부분도 삭제해 줍니다.

import React, { Component } from 'react';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
	render(){
        return (
          <div className="App">
            <header> {/*Subjct Component */}
              <h1>WEB</h1>
              world wide web!
            </header>

            <nav>{/*TOC Component */}
              <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
              </ul>
            </nav>

            <article>{/*Content Component */}
              <h2>HTML</h2>
              HTML is HyperText Markup Language.
            </article>
          </div>
        );
    }
}

export default App;

 결과물은 아래와 같이 나타나게 됩니다.

2. 다음으로 <header>, <nav>, <article> 부분을 이용하여 각각 Subject.js , TOC.js, Content.js component를 만듭니다. component들은 components라는 폴더를 만들고 그 내부에 생성합니다. (빈 편집창에서 rcc라고 치고 엔터를 치면 Class형 component 양식을 자동 구성해줍니다.)

Subject.js

import React, { Component } from 'react';

class Subject extends Component {
    render() {
        return (
            <div>
                <header>
                    <h1>WEB</h1>
                    world wide web!
                </header>
            </div>
        );
    }
}

export default Subject;

TOC.js

import React, { Component } from 'react';

class TOC extends Component {
    render() {
        return (
            <div>
                <nav>
                    <ul>
                        <li><a href="1.html">HTML</a></li>
                        <li><a href="2.html">CSS</a></li>
                        <li><a href="3.html">JavaScript</a></li>
                    </ul>
                </nav>
            </div>
        );
    }
}

export default TOC;

content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                <article>
                    <h2>HTML</h2>
                    HTML is HyperText Markup Language.
                </article>
            </div>
        );
    }
}

export default Content;

3. App.js를 작성한 component를 이용하여 재구성합니다.

  - 각각의 컴포넌트들을 import 해주고

  - 각각의 컴포넌트들을 불러와 사용해준다.

import React from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

function App() {
  return (
    <div className="App">
      <Subject />

      <TOC />

      <Content />
    </div>
  );
}

export default App;

 결과물이 최초 화면과 동일하게 나온다면 컴포넌트가 정상적으로 생성된 것으로 볼 수 있겠네요.

- 끝 - 

React로 이런거 한번 만들어보겠습니다.

egoing님 강좌 따라하기입니다. 방송으로만 보면 기억에 안남아서 공부할 겸 남겨놓습니다.

기능은

1. 로딩시 또는 WEB을 클릭하면 welcome 화면 띄우기

2. 각 Subject(HTML / CSS / JavaScript)를 클릭하면 그에 따른 내용 변경하기

3. create Subject

4. update Subject

5. delete Subject

입니다.

1. 우선적으로 설치해야할 것은

1. Node 
2. Visual Studio Code 
3. create-react-app (npm install -g create-react-app : global 설치)

입니다.

2. Visual Studio Code에 필요한 부가기능은

1. reactjs code snippets 설치
2. Pretter 설치

를 하면 좀 더 편리하게 작업할 수 있습니다.

3. create-react-app 시작하기

1. 작업폴더 생성

2. 터미널에서 해당 폴더로 이동하여 아래 명령어 수행(현재 디렉토리에 react 앱 설치)

C:\react_lec2> create-react-app .

4. 확인

C:\react_lec2> npm run start 

React 시작화면이 잘 작동합니다. 이제 React를 시작할 준비가 되었습니다.

- 끝 -