[생활코딩 React 강의 3] State란? state 사용해보기

 

생활 코딩 리액트 강의 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

State - props값에 따라 내부 구현에 필요한 데이터들

props-컴포넌트를 사용하는 입장에서 중요한 것

props가 하는 일과 state가 하는 일을 철저히 분리하여 최대의 효율/최고의 웹을 만들고자 하는 게 react의 특징 중 하나.

• 컴포넌트의 값을 초기화시키는 법

  render() {} 보다 먼저 실행되어야 하고, 그와 동시에 컴포넌트의 값들을 초기화시켜주려면! => construtor안에 코드를 짜주면 됨.

constructor가 있는 컴포넌트 형식은 아래와 같음

class App extends Component{
 constructor(props){
     super(props);

 }
    render(){
        return(
        블라블라 컴포넌트 구성
        <Subject title="Web" sub="world wide web"></Subject>
        );
    }
}

• Subject 컴포넌트의 값을 초기화 하는 App.js 코드

constructor(props){
     super(props);
  this.state ={ 
      subject:{title:'web', sub:'world wide web'} //subject 의 property값으로 객체를 주는
      } 
  }   
 }

• 위에서 만든 state를 어떻게 쓰냐

<Subject title="Web" sub="world wide web"></Subject>
이거를 아래처럼 바꾸면 됨.

<Subject 
title={this.state.subject.title} //subject라는 컴포넌트의 props의 값으로 줌
sub={this.state.subject.sub}>
</Subject>

• 상위 컴포넌트인 App의 state를 하위컴포넌트인 subject로 전달하고 싶을 때

  위처럼 상위 컴포넌트의 state값을 하위 컴포넌트의 props의 값으로 전달하는 것은 얼마든지 가능하다는 것을 알 수 있다.

---

상위 컴포넌트인 App의 state를 하위 컴포넌트인 TOC에 주입해보기

• 먼저, 컴포넌트 초기화 해주는 부분에서 아래와 같은 데이터를 넣고자 배열로 코드 작성 (App.js코드 일부분)

constructor(props){
    super(props);
    this.state={
      TOC_data:[
        {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'}
      ]
    }
  }

• 위의 state를 쓸 때는 (App.js코드 일부분)

<TOC></TOC>
이거를 아래처럼 바꾸어 주기

<TOC data={this.state.TOC_data}></TOC>

• 저 데이터를 TOC.js에 적용하기 위해서 TOC.js를 수정해줘야 함. (TOC.js코드 일부분)

수정 전)

class TOC extends Component {
  render(){
    return(
      <nav>
        <ul>
          <li><a href="1.html">html</a></li>
          <li><a href="2.html">css</a></li>
          <li><a href="3.html">javascript</a></li>
          <li><a href="4.html">react</a></li>
          </ul>
        </nav>
    );
  }
}

수정 후) App.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={"/TOC_data/"+data[i].id}>{data[i].title}</a></li>);
      i=i+1;
  }
    return(
      <nav>
        <ul>
          {lists}
          </ul>
        </nav>
    );
  }
}