[React] 생활코딩-3 State

1. State 소개

• Props: 사용자가 컴포넌트를 사용하는 입장에서 중요
• State: Props의 값에 따라 내부의 구현에 필요한 데이터, 외부에서 알 필요 없는 정보 은닉

2. State 사용

<Subject title="WEB" sub="world wide web!"></Subject>

위 props의 값들이 하드코딩되어 있는 걸 state로 만들고,
state값을 Subject의 props로 전달하는 걸로 코드 개선

App.js

class App extends Component {
//state값을 초기화하는 코드, render 함수보다 먼저 실행
    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>
            </div>
        );
    }
}

이렇게 코드를 개선하면 외부에서는 state값에 subject가 있는지 없는지 알 수 없음.

3. key

• 여러 개의 element를 자동으로 생성시 key라고 하는 props를 가져야 함
• 각각의 목록을 다른 것들과 구분할 수 있는 식별자를 key={} 안에 넣어주면 됨

App.js

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 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>
        );
    }
}

TOC.js

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>)
            //<li>태그가 생성되어 lists 배열에 담김
            i = i + 1;
        }
        return (
            <nav>
                <ul>
                    {lists}
                </ul>
            </nav>
        );
    }
}

• state 와 props의 관계
  - 부모인 App은 state를 사용, 자식에겐 props로 전달
  - 자식 컴포넌트는 props를 읽기만 하고 직접 수정할 수 없음
  - state는 컴포넌트 내부에 선언, 값 변경 가능