React에서 개발을 시작하는 것은 재미있고 사소할 수 있지만, 개발 프로세스에 주의를 기울이지 않는 한 코드베이스가 금세 지저분해지고 장황하며 읽을 수 없게 될 수 있습니다. 깨끗한(품질) 코드를 작성하는 것은 경험이 있다는 데 많은 사람들이 동의할 것이고 저도 그 생각의 학교에 속합니다. 그러나 적절하게 활용하면 React 코드 품질을 크게 향상시킬 수 있다고 믿는 간단하고 종종 간과되는 자바스크립트 개념이 있습니다. 이 개념을 특별한 순서 없이 나열하겠습니다. 시작하겠습니다...

객체 분해

솔직히 말해서, 이 설탕이 없는 전문적인 React 코드베이스를 본 적이 없습니다. 코드 간결성을 크게 향상시킬 수 있는 간단한 개념입니다. 아이디어는 간단합니다. 이름이 구조화될 객체의 이름과 일치하고 미러링하는 이름과 동일한 값을 유지하는 변수를 작성하십시오.

let {foo, baz} = {foo: 1, bar: "Leave me out", baz: 2}
console.log(foo, baz) // -> 1, 2

이 속성은 React에서 주로 구성 요소 prop 또는 state의 변수를 할당하는 데 사용되므로 props[dot]this, state[dot]that에 대한 반복 호출을 방지합니다. 이 아이디어를 얻으시기 바랍니다. 😆
배열을 구조화하는 경우에도 동일하게 적용되지만 배열 요소의 인덱스는 작업이 실행되는 방식을 결정합니다.

조건부 실행

더 자주 우리는 주어진 기준에 따라 실행하고 싶은 로직을 가지고 있습니다. 간단한 if-else 문을 사용하면 충분하지만 React 개발자는 대신 && 연산자를 선호합니다. 아래 코드는 표현식이 'true'를 반환하는 경우 콘솔에 'congrats'를 기록합니다.

const isAdult = (age) => age >= 18

isAdult(18) && console.log('Congrats!!!')    // 'congrats'

스프레드 연산자

React 코드베이스에서 종종 컴포넌트에 소품을 전달하는 데 스프레드 연산자가 사용되는 것을 볼 수 있습니다. 이는 종종 편리하기 때문입니다.
스프레드 연산자의 간단한 사용 사례는 함수에 임의의 인수를 전달하는 것입니다. 일련의 숫자에서 '평균'을 계산하는 방법은 간단합니다. 스프레드 연산자를 활용하여 이를 쉽게 만들 수 있습니다.

const calc_mean = (...series) => series.reduce((sum, n) => sum + n, 0) / series.length;
const mean = calc_mean(2,4,6,8)
console.log(mean) // 5

확산 연산자를 사용하여 임의 길이의 인수에서 평균을 평가할 수 있습니다.

Array.prototype.reduce()로 병합

무모해서 '납작하다'라는 단어를 선택했는데 더 좋은게 떠오르지 않으니 용서해주세요 😱
그러나 의도는 컬렉션을 단일 출력으로 줄이려는 것입니다. 예를 들어 새 직장에서 주어진 '고객' 샘플에서 새로 배송된 제품의 퍼센트 리뷰를 찾는 임무를 받았다고 가정해 보겠습니다.

let customers = [
    {category: 'happy', count: 1200},
    {category: 'sad', count: 204},
    {category: 'indifferent', count: 25}, 
];

// compute total from customers list
let total = customers.reduce((sum, {count}) => sum + count, 0)

// optional: proceed to compute percent for all categories
let customer_reviews = customers.map(customer => {
    let percent = customer.count / total * 100
    return {...customer, percent: percent.toFixed(2) + '%'}
})

console.log(customer_reviews)

이제 평균 리뷰 비율이 있는 고객 목록이 있습니다.

고차 함수

여기서 논의된 고차 함수의 범주에는 함수를 반환하는 함수가 포함됩니다. 코드를 간결하게 만들고 재사용 가능한 논리를 쉽게 추상화할 수 있기 때문입니다. 예를 들어 다른 컬렉션을 기반으로 컬렉션을 필터링하고 싶다고 가정해 보겠습니다.

let invite_ids = [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
let friends = [{name: 'sam', id: 1}, {name: 'jon', id: 13}, {name: 'snow', id: 10}]

Fun Fact: The array, invite_ids is actually a fibonacci series 😉

이제 초대 ID 목록에서 ID를 찾을 수 있는 친구만 파티에 참석하기를 원합니다. 어떻게 해야 합니까?

const filter_invites = (ids) => ({id}) => ids.includes(id)

// now we can do this...
let my_invites = friends.filter(filter_invites(invite_ids))

console.log(my_invites) // [{name: 'sam', id: 1}, {name: 'jon', id: 13}]

이제 가독성을 유지하면서 이 로직을 얼마나 간결하고 간략하게 구현했는지 주목하십시오. 필터링을 수행하는 함수는 재사용 및/또는 테스트를 위해 추상화될 수도 있습니다.

템플릿 리터럴

템플릿 리터럴은 멋지고 본질적으로 문자열과 비슷하지만 더 많은 기능이 있습니다. 매우 자주 표현식 및 기타 코드 관련 논리를 포함하려는 위치에서 사용됩니다.

간단한 인사 절차

function greet(name) {
    return `Hello ${name}`
}
greet('mike')    // Hello mike

템플릿의 조건부 논리

let friends = ["ola", "tea", "mike"]
let className = `box ${friends.length ? 'show' : 'hidden'}`
console.log(className)    // 'box show'

템플릿 리터럴을 활용하여 인라인 및 보다 간결한 조건식을 작성할 수 있습니다.
더 많은 React 코드를 작성함에 따라 밝혀야 할 다른 개념이 많이 있지만 이 게시물을 궁극적인 권위자로 의도한 것은 아닙니다. 읽어주셔서 감사합니다. 귀하의 피드백이 마음에 듭니다.

You can follow me on