[React] Component에서 useParams 사용하기

import React, { Component } from "react";
import { useParams } from "react-router-dom";

function withParams(Component) {
    return (props) => <Component {...props} params={useParams()} />;
}

class CustomComponent extends Component {
    constructor(props){
        super(props);
        
        const val1 = props.params.val1;          // useParams()로 넘어온 val1
        const val2 = props.params.val2;          // useParams()로 넘어온 val2
        
        this.state = { val1:val1, val2:val2 };   // Component state에 저장
    }

    render() {
        return (
          <div>
              { /* State에 저장된 val1 */ }
              <p>value #1 : {this.state.val1}</p>
              { /* State에 저장된 val2 */ }
              <p>value #2 : {this.state.val2}</p>
          </div>
        );
    }
}

export default withParams(CustomComponent);

 

 component를 사용하다 보면, v6의 Component에서는 useParams 등을 사용하지 못한다. 이 경우, function을 통하여, Component에 해당 param을 먼저 세팅하며 반환해주도록 한다.

 

 function withParams(Component)

 

는 현재 CustomComponent가 다른 컴포넌트에서 호출된 경우, CustomComponent 이전에 먼저 호출되게 되고, 이때 useParam을 CustomComponent의 parameter로 전달해주면, CustomComponent의 생성자(constructor)에서 해당 값을  받아, 컴포넌트의 현재 상태 값을 저장하는 state에 저장해 둔 후, 렌더링 시인 render()에서 this.state로 추추하여 사용하게 됩니다.

 

물론, param의 경우에는 굳이 function withParams으로 감싸지 않더라도 아래와 같이 사용 가능합니다. (이는 V6에서 사용하지 못하는 useSelector나, useForm등을 우회해서 사용하기 위한 idea로써 고민해볼 부분입니다.)

 

import React, { Component } from "react";

class CustomComponent extends Component {
    constructor(props){
        super(props);
        
        const val1 = props.val1;          // parameter로 넘어온 val1
        const val2 = props.val2;          // parameter로 넘어온 val2
        
        this.state = { val1:val1, val2:val2 };   // Component state에 저장
    }

    render() {
        return (
          <div>
              { /* State에 저장된 val1 */ }
              <p>value #1 : {this.state.val1}</p>
              { /* State에 저장된 val2 */ }
              <p>value #2 : {this.state.val2}</p>
          </div>
        );
    }
}

export default CustomComponent;