프로그래밍 「 자바스크립트 편」React에서 데이터 객체 정렬하기

일부 데이터(예: 검색 결과)를 정렬하는 것은 웹 응용 프로그램에서 일반적입니다. 우리는 종종 적절한 옵션을 더 빠르고 정확하게 찾기 위해 데이터를 정렬합니다. 일반적으로 웹 개발자가 렌더링할 데이터를 정렬하는 방법에는 두 가지가 있습니다. 첫 번째는 백엔드에서 정렬된 데이터를 요청하는 백엔드 정렬입니다. 두 번째 유형은 Javascript를 사용하여 클라이언트 측에서 정렬하는 것입니다. 이번 포스트에서는 ReactJs에서 클라이언트 측을 정렬하는 방법에 대해서 알아보겠습니다.

시작하기 전에 이 기사에 필요한 React 버전과 라이브러리는 다음과 같습니다.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^12.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "query-string": "^7.1.1"
  },

참고 : 코드 구조, 함수 이름 등과 같은 일부 결정은 개인적인 주관적인 선택입니다. 나는 그들이 최고라고 주장하지 않으며 당신은 같은 것을 사용할 필요가 없습니다.

시나리오

우리가 객체 목록을 다루고 있다고 상상해보십시오. 우리는 사용자를 위해 목록으로 렌더링하는 것을 좋아합니다. 각 개체에는 레이블인 "텍스트"가 있습니다. 또한 사용자가 개체 목록을 정렬하는 데 사용할 수 있는 속성인 "val1", "val2" 및 "val3"이 있습니다.

data: [
                {"text": "Sample A", "val1": 1, "val2": 4, "val3": 9},
                {"text": "Sample B", "val1": 3, "val2": 1, "val3": 6},
                {"text": "Sample C", "val1": 2, "val2": 3, "val3": 1}
            ]

이행

먼저 React에서 SortResults 라는 클래스 구성 요소를 정의합니다.구성 요소는 components라는 디렉토리 내에 정의되어 있으므로 새 구성 요소 경로는 "/src/components/SortResults.jsx"와 같습니다.

클래스 구성 요소를 정의한 후 초기 상태를 설정하기 위한 생성자를 정의합니다. 우리의 상태에는 설명된 대로 데이터 개체 목록과 초기 값이 null인 변수 이름 "sortField"가 포함됩니다. 이 상태 변수를 사용하여 나중에 정렬 값을 설정합니다(데이터 객체의 val1, val2 및 val3 사이).

class SortResults extends React.Component{
    constructor(props){
        super(props);
        this.state = ({  
            sortField: "null",          
            data: [
                {"text": "Sample A", "val1": 1, "val2": 4, "val3": 9},
                {"text": "Sample B", "val1": 3, "val2": 1, "val3": 6},
                {"text": "Sample C", "val1": 2, "val2": 3, "val3": 1}
            ]
        });
    }

다음 단계는 렌더링을 위한 데이터 개체 목록을 작성하는 함수를 정의하는 것입니다. 나중에 render 함수에서 이 함수를 호출합니다. (클래스 생성자에서 바인딩하는 것을 잊지 마십시오)

createResultToRender(){
        let result = [];
        this.state.data.map((item) => {
            result.push(
                <div className="sort-card">
                    <div>{item['text']}</div>
                </div>                
            );
        });
        return result;
    }

이제 가장 중요한 기능인 실제 정렬을 구현합니다. 이를 위해 콜백 함수를 전달하여 JS에서 배열 정렬을 사용하여 객체 속성을 기반으로 객체 목록을 정렬합니다.

sortBasedOnKey (array, property) {
        return array.sort(function (o1, o2) {
            let x = o1[property];
            let y = o2[property];
            return ((x < y) ? -1 : ((x > y) ? 1 : 0))
        })
    }

드롭다운 목록을 사용하여 정렬 필드를 선택하려고 하기 때문에 render 함수를 작성하기 전에 변경 처리기 함수가 필요합니다. 이 함수는 우리 상태의 개체 목록에서 정렬 함수를 호출하여 사용자가 드롭다운에서 옵션을 선택할 때 결과를 정렬합니다. (클래스 생성자에서 바인딩하는 것을 잊지 마십시오)

handleSortChange = (e) => {
        if(e.target.value !== "null"){
            let sortedData = this.sortBasedOnKey(this.state.data, e.target.value);
            this.setState({
            sortField: e.target.value,
            data: sortedData
            });
        }        
      }

마지막 부분은 클래스 렌더링 기능을 구현하는 것입니다. 여기서는 드롭다운에 대한 선택/옵션이 필요하고 이전에 정의한 대로 createResultToRender 함수를 호출해야 합니다.

render(){
        return(
            <div className="sort-render">
                <div className='col-sm-4 form-inline'  id="sort-grid">
                    <div class="form-group">
                        <label for="list-sorting" className='col-form-label'>sorted by </label>
                        <select  id="list-sorting" value={this.state.sortField} onChange={this.handleSortChange}>
                            <option selected disabled value={'null'} key="val0">Choose ...</option>
                            <option value={'val1'} key="val1">Val 1</option>
                            <option value={'val2'} key="val2">Val 2</option>
                            <option value={'val3'} key="val3">Val 3</option>
                        </select>  
                    </div>
                </div>
                <br></br>
                {this.createResultToRender()}
            </div>            
        );
    }

다음은 소스 코드에 대한 링크입니다.

https://github.com/Pooya-Oladazimi/blog-post-app/blob/main/src/components/SortResults.jsx