React components/SongList.js] React, react-redux 활용 연습

components/SongList.js

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { selectSong } from '../actions';

 

class SongList extends Component {

  renderList() {

    return this.props.songs.map(song => {

      return (

        <div className="item" key={song.title}>

          <div className="right floated content">

            <button

              className="ui button primary"

              onClick={() => this.props.selectSong(song)}

            >                                                           // selectSong()은 mapDispatchToProps함수를 통해

                                                                              현 클래스의 property에 추가된다 

              Select

            </button>

          </div>

          <div className="content">{song.title}</div>

        </div>

      );

    });

  }

 

  render() {

    return <div className="ui divided list">{this.renderList()}</div>;

  }

}

 

const mapStateToProps = state => {

  return { songs: state.songs };

};

 

export default connect(

  mapStateToProps,

  { selectSong }

)(SongList);