React 5. State

State : 컴포넌트 내부에서 바뀔 수 있는 값

📌props

• 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값
• 사용자가 component를 사용하는 입장에서 중요한것
• 사용자에게 중요한 정보, component를 조작할 수 있게 한다.

📌state

• props값에 따라서 내부 구현에 필요한 data들
• 사용자가 알 필요 없는 component 내부적으로 사용되는 것들

props에 따라 component를 실제로 구현하는 내부의 state가 철저하게 분리되어 있어야 한다. → "캡슐화/은닉화"

1. state 설정하는 방법

 constructor(props) {
	super(props);
        //state의 초깃값 설정하기
        this.state = {
          number : 0
        }
}

👇 컴포넌트 생성자 메서드 : 클래스형 component에서 constructor를 작성할 때 반드시 super(props) 를 호출해주어야 함!

초기화작업!

component가 실행될 때, render()함수보다 먼저 실행되면서, 초기화시켜주고 싶은 component를 초기화시켜주고 싶은 코드는 constructor안에다가 코드를 작성한다.

✔ 이 때 this.state값에는 초기값을 설정해준다.
✔ 컴포넌트의 state는 객체 형식이어야 한다.

Subject의 프로퍼티 값으로 객체를 할당하여 "state"를 만들었다.

2. 여러 개의 state

<TOC>안에 있는 데이터를 App의 내부 State를 TOC에 주입해 줌으로써 자동으로 React가 바뀌는 것을 알 수 있다.

즉, <TOC>의 부모요소가 가지고 있는 state를 이용해서 <TOC>의 내부 데이터가 바뀌게 할 수 있다.

contents라는 프로퍼티를 state에 추가해서 여러개의 데이터를 배열의 형태로 삽입한다.

💡 contents에 담긴 배열을 어떻게 하면 <TOC>에 추가할 수 있을까??

• data라는 props로 this.state.contents를 주입시켜주었다.
• [TOC]파일을 열어보자!, 이 파일은 this.props.data라는 값을 기본으로 가진다.
• 이 값을 이용해서 글 목록을 생성해본다.

📌 값을 이용해서 글 목록을 생성해보기 -> 반복문, props의 데이터 만큼 반복하기

class TOC extends Component {
  render(){
    let lists = [];
    let data = this.props.data;
    let i= 0;
    while(i<data.length){
      lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
       i = i+1;
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
       </nav>
    );
  }
}

export default TOC;

반복문이 실행될때 마다 li의 html구조를 push해준다.
✔ 여기서의 data 는 위에서 선언한 this.state.contents이다.
아래와 같이 기존과 동일하게 정상적으로 출력됨을 볼 수 있다.