✣ 생활코딩(인프런) - React ✣

---

Section 3. state

3-1) state 소개

이런 제품이 있을 때, 사용자가 제품을 조작할 수 있게끔 하는 버튼들이 react에서 'props'에 해당한다고 할 수 있고,

그러한 기능들을 구현한 내부적 프로그램/장치를 'state'라고 할 수 있다.

그렇기에, props와 state는 철저하게 구분되어야 한다. (제품에서 내부의 전선들이 밖으로 튀어나오게 하면 안 되는 것과 유사하다.)

3-2) state 사용

class App extends Component {
  render(){
  return (
    <div className='App'>
    <Subject title="WEB" sub="world wide web!"></Subject>
  
    <Toc></Toc>
    
    <Content title="HTML" sub="HTML is HyperText Markup Language."></Content>
    </div>
  );
}
}

2차시에서 작성했던 위의 코드를 state를 사용하여 더욱 편리하게 바꿔보자.

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" sub="HTML is HyperText Markup Language."></Content>
    </div>
  );
}
}

이렇게 constructor 부분을 추가해주고, render함수 안의 subject태그도 하드코딩이 아니라 'title', 'sub'이라는 변수를 참조하는 방식으로 변경해준다.

웹 사이트 상에서의 출력 결과를 보면 변경하기 이전과 동일하게 출력되어 정상적으로 작동하는 것을 알 수 있다.

constructor는 객체지향 프로그래밍 개념에서 생성자와 동일한 개념으로, 객체가 만들어질 때 자동으로 실행된다.

3-3) key

key 값은, 반복되는 종류의 데이터를 불러올 때 하나하나 고유의 식별자를 의미한다.
이전에 작성한 Toc.js의 href부분 코드를 반복문으로 바꾸어 작성할 때 key값을 작성해야 한다.

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

이렇게 data[i].id를 고유한 키 값으로 설정해주어야 한다.