React state 연습하고, 이해하기

이전 props 에 대해서 나름 적어봣는데 솔직히 완전히 이해했다고는 말을 못하겠다.

하지만 state 와 같이 알아야 한다고 해서 같이 머리속을 정리할겸 실습한 내용을 적어본다. 

 

state는 props 의 값에 따라 내부 구현에 필요한 데이터들이다. 

constructor 를 사용하는데 render 보다 먼저 실행한다. 

constructor 는 props 를 하는데 이는 값의 초기화를 위함이다. 

( 초기화는 0 이 아니라 화면의 기본값을 세팅함이다. )

 

constructor 는 super(props) 를 갖는다. 

 

constructor(props){

    super(props);

    this.state = {

    

      subject:{title:'WEB', sub:'World Wid Web!'},

     }

};

this.state 는 subject 의 title 과 sub 의 값을 주고, this.state 안에 있는 subect 의 title 과 sub 값을

기본값으로 하겠다는 뜻이다. 

 

 다른 값들도 기본값을 지정해 보았다. 

constructor(props){

    super(props);

    this.state = {

      mode:'welcome',

      subject:{title:'WEB', sub:'World Wid Web!'},

      welcome:{title:'Welcome', desc:'Hello, React!!'},

      contents:[

        {id:1, title:'HTML', desc:'HTML is important'},

        {id:2, title:'CSS', desc:'CSS is for design'},

        {id:3, title:'Javascript', desc:'JavaScript is for interactive'}

      ]

      }

    }

 

mode 는 기본 페이지로 welcome 으로 지정을 하였고, 

content 의 값을 반복문을 통해 값을 자동으로 들어갈 수 있게 배열로 주고, id 값을 지정해 주었다. 

 

그리고 해당 페이지가 시작하면 content 의 반복문이 실행되면서 <a> 태그를 채워 주게 되는데,

해당 반복문을 해석해 보겠다. 

 

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>

      )

    }

  }

<a> 태그를 갖고있는 TOC 라는 컴포넌트 안에 반복문을 썻다. 

1. list 라는 변수를 만들어 반복문이 순환할때 마다 나오는 값을 담을 그릇을 선언했다.

2. data 라는 변수에 this.props.data를 넣어주었다. 

(App.js 디렉토리 안 App 이라는 컴포넌트 안에 

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

라는 props 를 주입해 주었다. )

3. 반복문을 쓰는데, 

i 는 data의 length(크기) 만큼 반복을 하고, 

list 변수에 push 를 할것이다. key 값은 나중에..

<a> 태그는 data의 [i] 번째 .id 값을 갖고, <a> data의 i 번째의 .title 값을 준다.</a>

4. return 안에 반복문을 통해 push 된 list 변수를 준다. 

 

** 여기서 key 값은 사실 웹 브라우저는 모른다. 하지만 이 내용을 줘야 하는 대상은

우리의 웹 브라우저가 아닌 React 이다. 

 

반복문을 통해 자동으로 생성되게 되면 React 에서 key 라고 하는 props 를 갖고 있어야 한다. 

그게 각각의 항목을 식별하는 식별자로써 각 반복문에 key값을 data[i].id 값을 주는 것이다. 

 

,

,

,

 

막상 이렇게 해석을 하라고 하면 얼추 방향을 맞춰서 볼 수는 있다. 하지만 로직을 직접 하라고 한다면

아직 어려움이 많이 있다. 아직 실습의 중간단계 이지만 갈 길이 멀다. 좀 더 시간을 투자하자.