리액트js 컴포넌트 맵핑

react

비슷한 코드를 반복해서 렌더링하는 방법

JavaScript - Map 을 이용한다.

map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서, 그 결과로 새로운 배열을 생성합니다.

array.map(callback,arr);

callback 새로운 배열의 요소를 생성하는 함수로써, 다음 세가지 인수를 가집니다.

currentValue 현재 처리되고 있는 요소
index 현재 처리되고 있는 요소의 index값
array 메소드가 불려진 배열

arr(선택항목) callback함수 내부에서 사용할 this 값을 설정

var numbers=[1,2,3,4,5];

var processed = numbers.map(function(num) {
    return num*num;
}) 
console.log(processed); // 1,4,9,16,25

/*ES6 Syntax*/

let numbers= [1,2,3,4,5];

let result = numbers.map((num) => {
    return num*num;
}); // arrow function


이런식으로 사용할 수 있다.

es6코드를 바로 es5코드로 변환해주는 사이트에서 연습하자.

여기서 연습하면된다.


파라미터1개 실행할 함수도 한줄일때는 

let one = a => console.log(a);

이 코드와

var one = function one(a) {
  return console.log(a);
};// 이코드는 동일하다.


let two = (a,b) => console.log(a,b);

var two = function two(a, b) {
  return console.log(a, b);
};

let three = (c,d) => {
 	console.log(c);
  	console.log(d);
}

three처럼 실행할 함수가 두줄이상일경우에는 

var three = function three(c, d) {
  console.log(c);
  console.log(d);
};

이렇게 사용할 수 있다.

마지막으로 매개변수가없을때도 있다.

let four = () => {
    console.log('no params');
}



이러한 es6문법은 처음보면 당황스럽지만, react에서 사용하다보면 꽤 쓸만하다.

컴포넌트 맵핑


class ContactInfo extends React.Component{
  render() {
    return(
      <div>{this.props.contact.name} 
        {this.props.contact.phone}</div>
    ) 
  }
}

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contactData : [
        {name : 'Abet',phone:'010-0000-0001'},
        {name : 'Bbet',phone:'010-0000-0002'},
        {name : 'Cbet',phone:'010-0000-0003'},
        {name : 'Dbet',phone:'010-0000-0004'}
        
      ]
    }
  }
  
  render() {
    
    const mapToComponent=(data) => { // 변할일 없는상수
      return data.map((contact,i) => { //contact는 data , 인덱스 i
        return (<ContactInfo contact={contact} key={i}/>);
      })
    };
    
    return (
      <div>{/*
       <div>Abet 010-0000-0000</div>
        <div>Bbet 010-0000-0001</div>
        <div>Cbet 010-0000-0002</div>
        <div>Dbet 010-0000-0003</div>
        */}
        {mapToComponent(this.state.contactData)}
       </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Contact/>
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);

효준's profile image

효준

2018-02-01 14:40

다른글 보러가기

리액트js 핵심개념 state

이전 포스트

리액트js 작업환경 설정하기

다음 포스트