React | Reusing JS Functions

Kate Jung·2021년 2월 14일
0

React

목록 보기
7/28
post-thumbnail
post-custom-banner

👉 중복 로직 줄이기 (event 객체 사용)_ +, - 연산

    const calcOne = (e) => {
    	const plusSign = e.target.innerText === "+" ? 1 : -1

    	this.setState({ count: this.state.count + 1 * plusSign })
    }

    <button onClick={calcOne}>+</button>
    <button onClick={calcOne}>-</button>

👉 sort 로직 (인자에 따라 다른 결과값을 반환) 줄이기

    const handleSort = (arr, direction = "up") => {
      const directionTable = {
        up: 오름차순,
        down: 내림차순
      }
      
      return [...arr].sort(directionTable[direction])
    }

    const 내림차순 = (a, b) => (a - b)
    const 오름차순 = (a, b) => (b - a)

    handleSort(arr, "down")
    handleSort(arr, "up")

👉 query string 파싱 함수 재사용

    const query = "?limit=10&offset=10&price=10000&size=big&place=seoul"

    const stringToQuery = (query) => {
      const [_, params] = query.split("?") // 물음표 분리
      return params.split("&").reduce((acc, cur) => { // 프로퍼티 분리
        const [k, v] = cur.split("=") // key, value 분리
        return {...acc, [k]: v}
      }, {})
    }

    const queryObj = stringToQuery(query);

    queryObj.price // "10000"
    queryObj.limit //"10"
profile
복습 목적 블로그 입니다.
post-custom-banner

0개의 댓글