[React] State와 key

State 개념

컴포넌트 사용에 있어서

(state : props) =
(내부장치 : 스마트폰) =
(개발자에게 중요한 정보 : 사용자에게 중요한 정보)

State 용법

상위컴포넌트에서 state값을 하위컴포넌트의 props에 전달

class App extends Component {
  constructor (props) { // state값을 초기화(상위컴포넌트에서 state값을 하위컴포넌트의 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>
    );
  }
}

key 사용

엘리먼트 여러개를 자동으로 생성할 경우 리액트 문법에 맞게 key를 추가해줌

// 상위컴포넌트
class App extends Component {
  constructor (props) { // state값을 초기화(상위컴포넌트에서 state값을 하위컴포넌트의 props에 전달)
    super(props);
    this.state = {
      subject:{title:"WEB", sub:"World Wide Web!"}
      contents:[
        {id:1, title:'HTML', desc:'HTML은 ... 입니다.'},
        {id:2, title:'CSS', desc:'CSS은 ... 입니다.'},
        {id:3, title:'JavaScript', desc:'JavaScript은 ... 입니다.'}
      ]
    }
  }
  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>
    );
  }
}

// 하위컴포넌트
class TOC extends Component {
  render() {
    let lists = [];
    let data = this.props.data;
    for (let i = 0; i < data.length; i++) {
       lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
    }

    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    );
  }
}

생활코딩 : state