3-3 리액트 반복분(key)

리액트에서 반복문을 사용하는 방법은 배열과 객체를 이용하는 방법이 있다.

 

먼저, 배열을 이용하는 방법은 배열의 인덱스를 사용하여 값을 전달하는 방법 

render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput} />  {/* value랑 onChange는 세트이다 */}
                    
                </form>
                <div>시도: {this.state.tries.length}</div>
                <ul>
                    {/* {['like', 'like', 'like', 'like', 'like'].map((v) =>{
                        return (
                        <li>{v}</li>
                        );
                    })} */}
                    {[ 
                        ['사과', '맛있다'],
                        ['바나나', '달다'],
                        ['사과', '맛있다'],
                        ['사과', '맛있다'],
                        ['사과', '맛있다'],
                        ['사과', '맛있다'],
                        ['사과', '맛있다'],
                    ].map((v) => {
                        return (
                            <li><b>{v[0]}</b> - {v[1]}</li>
                        );
                    })}
                </ul>
            </>
        );

바뀌는게 여러개일때 반복문을 실행하는 방법은 2차원 배열을 만들어서 반복하는 방법이 있다.

 

2번째로 반복문을 이용하는 방법은 객체를 이용하여 반복문을 만드는 방법이다 .

 

 render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput} />  {/* value랑 onChange는 세트이다 */}
                    
                </form>
                <div>시도: {this.state.tries.length}</div>
                <ul>
                    {/* {['like', 'like', 'like', 'like', 'like'].map((v) =>{
                        return (
                        <li>{v}</li>
                        );
                    })} */}
                    {[ 
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '감', taste: '시다'},
                        { fruit: '귤', taste: '달다'},
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '사과', taste: '맛있다'},
                    ].map((v) => {
                        return (
                            <li><b>{v.fruit}</b> - {v.taste}</li>
                        );
                    })}
                </ul>
            </>
        );

객체를 사용하다가 

 

위와 같은 에러가 발생할 수 있는데, 반복문에 key를 사용해야한다. 리액트에서는 key로 판별을 한다 

 return (
        <li ><b>{v.fruit}</b> - {v.taste}</li>
);

 

위 객체부분을 key를 사용하여 unique하게 만들어줘야한다.

 

render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput} />  {/* value랑 onChange는 세트이다 */}
                    
                </form>
                <div>시도: {this.state.tries.length}</div>
                <ul>
                    {/* {['like', 'like', 'like', 'like', 'like'].map((v) =>{
                        return (
                        <li>{v}</li>
                        );
                    })} */}
                    {[ 
                        { fruit: '사과', taste: '맛있다'},
                        { fruit: '감', taste: '시다'},
                        { fruit: '귤', taste: '달다'},
                        { fruit: '배', taste: '맛있다'},
                        { fruit: '무', taste: '맛있다'},

                    ].map((v) => {
                        return (
                            <li key={v.fruit + v.taste} ><b>{v.fruit}</b> - {v.taste}</li>
                        );
                    })}
                </ul>
            </>
        );