Javascript Sort function

이번시간에는 javascript30강좌의 17일째 강의인 ‘sort bands without articles’강의를 redux코드로 변경해보았다.

wesbos/JavaScript30

javascript function 2개만 사용하면 되는 간단한 프로젝트이고 초기 코드는 다음 페이지에 나와있다.

redux를 사용해 구현하기는 했지만 아무런 action도 없기 때문에 reducer도 매우 간단하고 container에서 주어진 배열을 정해진 기준에 따라 정렬해주기만 하면 된다.

// components/App.js
import React, { Component } from 'react';
import './App.css';
import Band from './Band';

class App extends Component {
  render() {
    const { bands } = this.props;
    const bandsList = bands.map((band, i) => {
      return <Band
        key={i}
        band={band}
      />
    });

    return (
      <ul id="bands">
        {bandsList}
      </ul>
    );
  }
}

export default App;

유일한 state인 bands를 받아 map function을 통해 Band component의 배열로 만들어주고 이를 ‘bands’라는 id를 가진 ul tag안에 렌더링시켜준다.

// components/Band.js
import React from 'react';

const band = (band) => {
  return (
    <li>
      {band.band}
    </li>
  )
};

export default band;

Band component는 해당 band를 받으면 li tag안에 담아서 리턴해준다.

// reudcers/index.js
const defaultState = {
  bands: ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything',
    'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here',
    'An Old Dog']
};

function app(state = defaultState) {
  return state;
}

export default app;

아무런 action이 없기 때문에 reducer에서는 단순하게 default state만을 정해주면 된다.

// containers/AppContainer.js
import { connect } from 'react-redux';

import App from '../components/App';

const mapStateToProps = state => {
  state.bands.sort((a, b) => {
    return strip(a) > strip(b) ? 1 : -1;
  });

  return state;
};

function strip(brandName) {
  return brandName.replace(/^(a |the |an )/i, '').trim();
};

const AppContainer = connect(mapStateToProps)(App);

export default AppContainer;

조금 신경써야 할 부분은 바로 AppContainer의 mapStateToProps() function이다.

먼저 strip() function에서 brandName에서 ‘a’, ‘the’, ‘an’등의 키워드 등은 정렬기준에서 제외해기 위해 replace()를 통해 빈 문자열로 대체한다. 단 ‘a’로 시작하는 단어를 포함하는 경우 등이 발생할 수 있기 때문에 ‘a ‘, ‘an ‘등 뒤에 space한 글자를 포함한 문자열만을 대상으로 삼는다.

strip() function을 만들어주었으면 이제 bands를 sorting할 때 사용해주면 된다. strip시킨 band name을 오름차순으로 정렬한다.

결과를 확인해보면 ‘a’, ‘an’, ‘the’를 제외한 알파벳순으로 잘 정렬된 것을 확인할 수 있다.

Github Source Code

REF.

Array.prototype.sort()

JavaScript String trim() Method