3. State - React 기초 | 생활코딩

[출처 : https://opentutorials.org]

15-1. State 소개

props

: 사용자가 컴포넌트를 사용하는 입장에서 중요한 데이터    * 제품의 외부 조작 장치 (유저 인터페이스)

 

state

: props에 따라 내부 구현에 필요한 데이터    * 제품을 구현하기 위한 내부 조작 장치 (메커니즘)

 

※ 외부의 props와 내부의 state의 정보가 철저하게 분리되어야 한다.

   사용하는 쪽과 구현하는 쪽을 격리하여 양 쪽의 편의성을 도모

---

15-2. State 사용

어떤 컴포넌트가 실행될 때 render() 보다 먼저 실행되면서 그 컴포넌트를 초기화시켜주고 싶은 코드는 constructor() 안에 작성

 : 컴포넌트가 실행될 때 constructor()가 있으면 제일 먼저 실행되어 초기화를 담당한다

class App extends Component {
  constructor(props){
    super(props);
    // state의 값을 초기화
    this.state = {
      subject : {title:'WEB', sub:'World Wide Web!'}    // subject의 props를 state화
    }
  }
  render(){
    return (
      <div className="App">
        // 초기화하려는 컴포넌트
        <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>  
      </div>
    )
  }
}

# App이 내부적으로 사용할 상태는 state라는 형태를 통해서 사용    *외부에서 알 필요가 없는 정보를 철저하게 숨기는 것이 핵심

# 상위 컴포넌트인 App의 상태를 하위 컴포넌트에 전달하고 싶을 때    *상위 컴포넌트의 state 값을 하위 컴포넌트의 props 값으로 전달

---

15-3. Key

# 상위 컴포넌트는 하위 컴포넌트가 필요로 하는 props를 어떤 형태의 state 값으로 만들어서 전달.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contents : [
      	{id:1, title:'HTML', desc:'HTML is for information},
      	{id:2, title:'CSS', desc:'CSS is for design}
      ]  
    }
  }
  rendor(){
  	return(
      <div className="App">
        <TOC data={this.state.contents}></TOC>
      </div>
    )
  }
}

 

# 하위 컴포넌트는 상위 컴포넌트로부터 전달 받은 props 값을 활용하여 원하는 동작을 구현한다.

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

 

# 여러 개의 element를 자동으로 생성하는 경우에는 각 각의 element는 'key' 라는 props를 가져야 한다.

   ex) <li key={data[i].id}>    * data[i].id : 각 각의 element와 구분할 수 있는 식별자.