소개

그래서 React를 배우기로 결정했습니다. 그러나 React는 JavaScript로 작성되고 JavaScript를 사용하므로 React를 배우고 마스터하려면 React에서 가장 많이 사용되는 JavaScript 개념을 배워야 합니다. 이 글에서는 React에서 가장 많이 사용되는 9가지 JavaScript 개념을 알려드리겠습니다.

면책 조항: 이 목록에는 JavaScipt A-Z가 포함되어 있지 않지만 React에서 가장 많이 사용되는 개념이 포함되어 있습니다.

1. HOF: 매핑, 필터링, 축소

HOF는 ​​Higher Order Functions의 약자이며 맵, 필터 및 감소는 배열에서 작동하는 React에서 90%가 HOF 함수를 사용했으며 이를 아는 것은 선택이 아니라 React에 대한 요구 사항입니다.

지도
맵 HOF는 원래 배열과 길이가 같은 다른 배열을 반환하는 데 사용됩니다. 새 배열 항목은 맵 함수 본문 내에서 반환되는 항목에 따라 결정됩니다.
요소 배열을 만드는 데 사용되는 React 맵에서

const numbers = [2, 5, 9, 50]
const newNumbers = numbers.map(number => number * 2)
console.log(newNumbers) // [4, 10, 18, 100]

/**
 React: This is the example that creates array of elements and returns them
*/
const ReactComponent = ({array})=>{
 return <ul>{array.map(item => <li key={item.id}>{item.text}</li>)}</ul>
}

필터
필터 HOF는 함수 본문에 설정된 테스트를 통과하지 못한 배열 항목을 필터링하고 새 배열에서 테스트를 통과한 항목만 반환하는 데 사용됩니다. 기본적으로 부울 테스트를 설정하여 모든 항목을 필터링할 수 있습니다.

const ages = [9, 15, 29, 5, 44];
const filteredAges = ages.filter(age => age >= 18)
console.log(filteredAges) // [29, 44]

/**
 React: This is the example that filters out students that are less than 18 and returns all students over or equal to 18
*/
const ReactComponent = ({students})=>{
 return (
    <div>
      <h1>Students aged over 18</h1>
      <ul>
         {students.filter(student => student.age >= 18).map(student => <li key={student.id}>{student.name}</li>)} 
      </ul>
    </div>
}

줄이다
Reduce HOF는 배열 항목을 단일 값으로 줄이는 데 사용됩니다. 배열 항목을 합산하거나 항목을 단일 값으로 줄여야 할 때 매우 유용합니다.

const numbers = [5, 20, 10, 5]
const sum = numbers.reduce((total, currEl)=> total + currEl, 0)
console.log(sum) // 40

/**
React: In this example, we sum total total spending
*/
const ReactComponent = ({expenses})=>{
 return (
    <div>
      <h1>Your total spending</h1>
      <p>Total expenses: {expenses.reduce((total, currEl) => total + currEl.spend ,0)}</p>
    </div>

2. 객체 파괴

이름에서 알 수 있듯이 Object Destructuring을 사용하면 객체 속성의 복사본을 분해하고 객체 이름을 포함하지 않고 재사용할 수 있습니다. 파괴할 때 기존 객체 속성 이름으로만 분해할 수 있으며, 다른 속성 이름과 값은 기본 제공됩니다. 그리고 객체 속성의 구조 분해 순서가 없습니다. 즉, 마지막 객체 속성을 먼저 분해하고 첫 번째 객체 속성을 마지막에 분해할 수 있습니다.

const person = {
  name: "Jaxongir",
  age: 27,
  hobbies: ["Reading", "Calisthenics", "Cooking"]
}
const {name, age, hobbies} = person;
console.log(name) // Jaxongir
console.log(age) // 27
console.log(hobbies) // ["Reading", "Calisthenics", "Cooking"]

/** 
We can also rename destructured property and also assign default value. Default value used in case of missing property value or missing property altogether.
*/
const person = {
  hobbies: ["Reading", "Calisthenics", "Cooking"]
}

const {name: firstName = "John", age: hisAge = 18, hobbies} =  person
console.log(firstName) // John
console.log(hisAge) // 18
console.log(hobbies) // ["Reading", "Calisthenics", "Cooking"]

/**
 We can go as deep as needed when destructuring
*/
const testObj = {
 first: "Child 1",
 parent: {
   second:  "Child 2",
   parent: {
    third: "Child 3",
   }
 }
}
const {first, parent: {second, parent: {third}} } = testObj;
console.log(name1) // Child 1
console.log(name2) // Child 2
console.log(name3) // Child 3


/**
React: In this example one component passes props to child component and we destructure those passed props.
*/
const ChildComponent = ({name, age, country})=>{
 return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
      <h1>Country: {country}</h1>
    </div>
 )
}
const ParentComponent = ()=>{
 return <ChildComponent name="Jaxongir" age="27" country="Uzbekistan"/>
}

3. 배열 파괴

배열 구조 분해는 객체 구조 구조와 거의 동일하게 작동하지만 배열은 정렬된 데이터 구조이므로 배열에 나타나는 순서대로 배열 항목을 구조 분해해야 합니다.

const names = ["Jaxongir", "Elisabeth", "Sarah"]
const [jaxongir, elisabeth, sarah] = names;
console.log(jaxongir) // Jaxongir
console.log(elisabeth) // Elisabeth
console.log(sarah) // Sarah

// breaking order of destructuring 
const names = ["Jaxongir", "Elisabeth", "Sarah"]
const [elisabeth, jaxongir, sarah] = names;
console.log(jaxongir) // Elisabeth
console.log(elisabeth) // Jaxongir
console.log(sarah) // Sarah

// desctructuring nested array
const nestedArray = [1,[2,[3,[4,[5]]]]]
const [first, [second, [third, [fourth, [fifth]]]]] = nestedArray
console.log(first) // 1
console.log(second) // 2
console.log(third) // 3
console.log(fourth) // 4
console.log(fifth) // 5

// you can skip certain indexes by typing ,
const numbers = [1,2,3,4,5]
const [first, , , , fifth] = numbers;
console.log(first) // 1
console.log(fifth) // 5

4. 확산 연산자

확산 연산자는 개체 속성을 다른 개체로 확산하거나 복사하거나 배열 항목을 다른 배열로 복사합니다.
참고: 스프레드와 나머지 연산자를 혼동할 수 있습니다. 한 가지 기억해야 할 점은 스프레드 연산자는 항상 = 연산자의 오른쪽에 사용되고 나머지 연산자는 = 연산자의 왼쪽에 사용된다는 것입니다.

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const combinedArr = [...arr1, ...arr2]
console.log(combinedArr) // [1,2,3,4,5,6]

5. 휴식 오퍼레이터

Rest Operator는 객체의 나머지 속성을 다른 객체로 복사하거나 배열 항목을 다른 배열로 복사하거나 전달된 인수에서 배열 항목, 객체를 분해, 배열을 분해하는 데 사용됩니다.

const numbers = [1,2,3,4,5,6]
consst [first, ...restNumbers] = numbers
console.log(first) // 1
console.log(restNumbers) // [2,3,4,5,6]

6. 삼항 연산자

삼항 연산자는 if else의 단축 구문이며 if 및 else 본문의 코드가 단일 문일 때 가장 자주 사용됩니다.

let age = 17
age >= 18 ? console.log("You are allowed to drink") : console.log("You are under age") 

7. 속기 조건부

&&를 사용한 속기 조건은 왼쪽 값이 참인지 확인하고 항상 오른쪽 값을 실행하는 데 사용됩니다.
참고: 왼쪽 값이 숫자인 경우 주의하고 아무것도 표시하지 않고 0을 반환하는 경우 0으로 평가합니다.

let age = 18;
age >= 18 && console.log("You are allowed to drink")

/**
 when using array don't use array.length coz if array is empty, it returns 0 instead of nothing so compare length instead
*/
const numbers = []
numbers.length && numbers.map(number => number + 50) // 0

/**
React: Example demonstration of ternary operator
*/
const Component = ({students})=>{
 return students.length > 0 ? <StudentList students={students} /> : <h1>Data being fetched...</h1>
}

8. 템플릿 리터럴

템플릿 리터럴을 사용하면 JavaScript 표현식을 삽입하고 새 표현식을 생성할 수 있습니다. 결국 그 표현식은 문자열로 변환됩니다.

const printFullInfo = (name, age, country)=>{
 console.log(`His name is ${name} and is ${age} years old. And he is from ${country}`)
}
printFullInfo("Jaxongir", 27, "Uzbekistan")

9. 콜백 함수

콜백 함수는 다른 함수에 인수로 전달되고 해당 함수에 의해 호출되는 일반적인 함수입니다.
React에서 콜백 함수는 반전 데이터 흐름, 자식에서 부모로의 데이터 전달 또는 작업의 주요 용도입니다.

const mapCustom = (arr, callbackFunc)=>{
 const newArr = [];
 for(let i = 0; i < arr.length; i++){
   newArr.push(callbackFunc(arr[i]))
 }
 return newArr;
}
mapCustom([1,2,4], (number)=> number * 2) // [2,4,8]

/**
React: Example demonstration of passing callback function to child component to retrieve data back
*/
const ChildComponent = ({getId})=>{
  return <button onClick={()=> getId("id placeholder")}>Button</button>
}

const ParentComponent = ()=>{
 const getId = (id)=>{
   alert(id)
 }
 return <ChildComponent getId={getId}/>
}