React Props, State에 대해

props에 대해

 

props는 유동적인 속성을 설정해줌으로써, 값 변경이나 다른 속성들을 편리하게 사용할 때 좋다.

예를 들어 저번에 Web이라는 subject파일 안에 있는 정적인 값을 속성을 주어서 원하는 값으로 편하게 바꿀 수 있도록 하기 위해서는 props를 사용하는데, 수정 내용은 아래와 같이 원래 안에 내용이 들어갈 <h1> 태그 안에 {this.props.props명}을 써주는 것이다.

이와 같이 하면 App.js의 컴포넌트를 불러오는 부분에서 설정해준 props 값을 따르게 되는 것을 볼 수 있다.

State에 대해

state는 말그대로 상태이다. 상태를 저장하고 있다가, 원하는 때에 적절하게 사용할 수 있다.

예를 들어 목록이 클릭하는데로 다른 글을 담고 있는 것을 표현하고 싶다던지, 그런 경우에 경우에 따른 글들의 제목과 내용을 포함하고 있을 수 있는 것이 state이다. 사용은 아래와 같이 할 수 있다.

각각 목록에 대한 id, title, desc를 선언해주었다. 위처럼 이름: []를 사용하면, 여러개의 배열 형식의 state를 선언할 수 있기도 하다. 이를 이용해서 이전에 title과 sub의 속성으로 내용을 바꿀 수 있었으므로 이 부분의 props의 값으로 state 값을 줘보겠다.

 

위와 같이 {this.state.state명.state안에 세부 항목}으로 사용해주면 된다. 이렇게 state를 사용할 수 있다.

 

 

받은 props로 동적으로 lists 생성하기

 

받은 props를 가지고, 정적으로 써있는 목록이 아닌 받아온 props로 링크를 만들기 위해서는 위와 같은 코드를 작성하였다. 우선 App.js에서 state에 있는 contents 목록을 가져와 세팅을 해준다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import React, { Component } from 'react';   class TOC extends Component {     render() {         var lists = []; //리스트를 만들고         var data = this.props.data; //data 속성을 받는다         var 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>                    {lists}                 </nav>         );     } }   export default TOC;

그 다음 TOC.js 파일로 가서 동적으로 list를 생성할 수 있도록 해준다. data를 props로 받았으니, 이 데이터의 (배열 형태이므로) length 길이를 측정해 준다음, 그 받은 만큼 리스트를 생성하면 되는 것이다. 이제 App.js 파일의 State에서 정보르 하나 더 추가한다면 목록이 늘어나는 모습을 볼 수 있을 것이다. 그래서 실험삼아 항목을 하나 더 추가해 보았다.

 

 

목록이 하나 더 추가된 모습을 볼 수 있었다. 제대로 동작하고 있다.

 

key에 대하여

위와 같이 여러개의 목록을 생성하여 사용할 때에는 이들간의 구별할 식별자가 필요하다. 

우리가 자체적으로 사용하는 것보다는 리액트 내부에서 이들을 구별하기 위해 사용하는 것이다.

간단하게 추가만 해주면 된다. 객체를 구별하기 위한 아이디라고 생각하면 좋을 듯 하다.