Component Iteration

<ul>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
  <li>넷</li>
 </ul>

이러한 반복적인 내용을 효율적으로 관리하는 방법에 대해서 알아보자.

🎈JS 배열의 map() 함수

자바스크립트 배열 객체의 내장 함수 map 함수를 사용하여 반복되는 컴포넌트를 렌더링한다.

🎁문법

arr.map(callback,[thisArg])

• callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 세 가지.
  • currentValue : 현재 처리하고 있는 요소.
  • index : 현재 처리하고 있는 요소의 index 값.
  • array : 현재 처리하고 있는 원본 배열.
• thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스.

🎁데이터 배열을 컴포넌트 배열로 map

IterationSample.js

class IterationSample extends Component{
    render(){
        const names = ['하나', '둘', '셋', '넷'];
        const nameList = names.map(
            (name) => (<li>{name}</li>)
        );
        return(
            <ul>
                {nameList}
            </ul>
        );
    }
}

문자열로 구성된 배열을 선언.
이 배열 값과 map을 활용하여 li JSX 코드로 된 배열을 nameList에 집어넣어준다.

🧨 key

위의 코드를 실행한 후에 콘솔 창을 열어보면 key가 없다는 경고 메시지가 뜬다. 위를 해결해보자.

🎈key

key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용.

const articleList = articles.map(article =>(
	<Article
	title={article.title}
        writer={article.writer}
	key={article.id}
	/>));

위와 같이 데이터가 가진 고윳값을 key 값으로 설정해야 한다.
허나 앞의 컴포넌트에는 고유번호가 없다!!

이때는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 된다.

IterationSample.js

const nameList = names.map(
            (name, index) => (<li key={index}>{name}</li>)
        );

🎈응용

고정된 데이터 렌더링 -> 동적인 데이터 렌더링
ul 배열에 데이터 추가하기.
1. 초기 state 설정하기.
2. 데이터 추가 기능 구현하기.
3. 데이터 제거 기능 구현하기.

🎁state에 초기 데이터 담기

IterationSample.js

state ={
        names:['하나','둘','셋','넷'],
        name:''
    };

name 데이터는 input 데이터를 갱신하며 names 배열에 넣기 위해 사용.

🎁데이터 추가 기능 구현

IterationSample.js

    changeEvent=(e) =>{
        this.setState({
            name:e.target.value
        })
    }
    InputEvent = () =>{
        this.setState({
            names:this.state.names.concat(this.state.name),
            name:''
        })
    }
    
    <input type="text" value = {this.state.name} onChange={this.changeEvent}/>
    <button onClick={this.InputEvent}>추가</button>

• changeEvent
  • input의 값을 갱신해주는 역할.
  • input의 onChange에 넣어준다.
• InputEvent
  • names배열에 concat을 이용하여 name값을 넣어주고, name의 값을 ''로 설정. (새 값을 받기 위해)
  • button의 onClick에 넣어준다.

🎁데이터 제거 기능 구현

IterationSample.js 전개 연산자 사용.

 DeleteEvent = (index) =>{
         const{names} = this.state;
         this.setState({
             names:[
                 ...names.slice(0,index),
                 ...names.slice(index + 1, names.length)
             ]
         })}

• ...names.slice(0,index) : 배열의 0부터 index 전까지 원소들의 새 배열.
• ...names.slice(index+1, names.length) : index+1부터 마지막 원소들까지의 새 배열.
• 위 둘을 합쳐 준 후 names 배열을 갱신.

IterationSample.js filter 사용.

DeleteEvent = (index) =>{
        const {names} = this.state;
        this.setState({
            names:names.filter((item,i) =>i !== index)
        });
    }

• filter로 index번째를 제외한 원소만 있는 새 배열 생성.

정리

• 컴포넌트 배열을 렌더링할 때는 key 값 설정에 항상 주의.
• key 값은 언제나 유일해야 한다.
• 상태 안에서 배열을 변형할 때는 배열에 직접 접근 ❌
  • concat, slice, 전개 연산자, filter 함수를 사용하여 새로운 배열 만든 후,
  • setState 메서드로 적용.😀

참고 : <리액트를 다루는 기술>