생활코딩 React 강의 (5) - State

Props와 State

props : component를 조작하는 장치(사용자 입장)

state : props값에 따라서 구현에 필요한 데이터들(개발자 입장)

 

사용자는 props를 이용해 component 조작하지만, state까지 알 필요가 없다.

(우리가 스마트폰을 터치스크린, 버튼(props)으로 사용하지만 안의 메커니즘(state)은 몰라도 된다.)

코드를 작성할 때 props와 state를 철저하게 독리시켜 양 쪽에 편의성을 각자 도모하는 것을 목표로 해야 한다.

 

Constructor() 함수

Component가 실행될 때 render()보다 먼저 실행되어 초기화를 담당한다.

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>
      </div>
    );
  }
}

counstructor(props)안에서 props값을 초기화한다. 항상 props로 기본 constructor를 호출해야 하며, super(props)까지 작성해야 한다.

this.state = {  } 안에 객체를 만들어준다.

사용할 때는 {this.state.이름.속성}으로 사용하며, 중괄호로 감싸야 제대로 값을 가져올 수 있다.

꼭 컴포넌트의 이름과 객체의 이름이 같지 않아도 된다.

 

상위 컴포넌트인 App의 상태를 하위 컴포넌트인 Subject로 전달하고 싶을 때 

상위 컴포넌트의 State값을 하위 컴포넌트의 props값으로 전달할 수 있다.

이렇게 하면 내용을 수정할 때마다 하위 컴포넌트에 접근해서 수정하지 않아도 되고, 하위 컴포넌트의 내부 로직에 대해 알 필요가 없다. 상위 컴포넌트에서는 어떤 형태의 정보를 전달하는지만 알고, state만 바꿔주면 된다.

 

key

App(상위)가 가지고있는 값을 TOC(하위)로 전달해 내부의 내용이 바뀌도록 설정할 수 있다.

state를 만들 때, 여러 데이터를 배열로 묶어서 초기화 할 수 있다.

아래에는 contents를 []안의 데이터들로 생성해주고, TOC에는 {this.state.contents}로 전달해준다.

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"},
        {id:3, title:"Javascript", desc:"Javascript is for interactive"}
      ]
    }    
  }
  render() {
    return (
      <div className="App">
        <TOC data={this.state.contents}></TOC>
      </div>
    );
  }
}

TOC안에서는 전달받은 props를 아래와 같이 사용할 수 있다.

import React, { Component } from 'react';
 
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>
      );
    }
  }
 
  export default TOC

전달받은 데이터를 저장할 lists를 만들고, var data = this.props.data;로 props를 가져온다.

이렇게 리스트와 data 변수를 따로 만든 이유는, while문을 이용해 여러 데이터로 ul에 들어갈 li들을 만들기 위함이다.

while을 통해 data[i]로 props에 접근해 태그를 만들어 lists에 저장한다.

 

console.log를 통해 전달받은 data와 만든 lists를 확인해보면 아래와 같다.

data는 우리가 만든 state가 그대로 전달되었고, 만든 lists는 type:"li"인 react.element이다.

여러개의 목록을 자동으로 생성할 때 key를 설정해 주지 않으면 console에 key가 필요하다는 에러메시지가 뜬다.

이는 react가 배열 안의 항목 관리를 위해 개발자에게 요청하는 것이며, 무시해도 상관 없지만 <li key={data[i].id}>로 간단하게 만들어주면 된다.

key 설명(출처: https://ko.reactjs.org/docs/lists-and-keys.html)

 

* key값은 배열의 순서가 바뀌지 않으면 {index}를 사용해도 상관없지만 순서나 내용이 변화하는 상황이라면 요소를 특정할 수 있는 key를 사용해야 한다.

 

참고한 사이트

생활코딩 react 강의

15.1 State 소개

15.2 State 사용

15.3 Key

https://www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16 

 

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React

 

* key에 대한 추가적인 정보

https://www.youtube.com/watch?v=ghxHAy3LH28