🖋️ 리액트 배우기 전 필요한 JavaScript 개념

• ES6+ 문법
  

  • let 과 const

    변수 선언에 var 대신 let과 const를 사용하는 방법을 이해
     let은 재할당이 가능한 변수에, const는 재할당이 불가능한 상수에 사용

  • 화살표 함수(Arrow Functions)

    기존의 function 키워드 대신 화살표(=>)를 사용하는 함수 표현식
     this 바인딩이 다르게 작동하기 때문에 중요

  • 템플릿 리터럴(Template Literals)

    문자열 내에서 변수를 쉽게 삽입할 수 있게 해주는 
     백틱(``)을 사용한 표현식

  • 디스트럭처링 할당

    객체나 배열로부터 속성이나 요소를 쉽게 추출

  • 기본 매개변수(Default Parameters)

    함수 매개변수에 기본값을 설정

  • 스프레드 연산자와 나머지 매개변수

    배열이나 객체의 요소를 쉽게 확장
     함수 매개변수를 배열로 그룹화

    
    
    

• 모듈 시스템
  

  • import/export
    • JavaScript 모듈 시스템을 이해하고, 코드를 모듈화하는 방법
    • React 컴포넌트를 포함한 모든 자원을 모듈로 분리하고 필요에 따라 임포트하여 사용

• 비동기 프로그래밍
  

  • 프로미스(Promises)
    • 비동기 작업을 위한 JavaScript의 객체
    • .then(), .catch(), .finally() 메소드를 통해 비동기 작업의 성공, 실패 후 실행할 작업을 지정
    • 콜백 지옥을 방지
    • 비동기 코드를 동기 방식으로 작성
  • async/await
    • 프로미스를 더 쉽게 작성하고 읽을 수 있게 해주는 ES2017(ES8)의 문법
    • 비동기 코드를 동기 코드처럼 보이게 만들기

• 고차 함수(Higher-Order Functions)와 콜백
  

  • 함수를 다른 함수의 매개변수로 전달하거나 함수에서
    다른 함수를 반환할 수 있는 JavaScript의 능력을 이해
  • 배열 메소드(map, filter, reduce 등)와 함께 사용되며,
    컴포넌트와 훅을 포함한 React 패턴에서 중요한 역할
    

• 클래스와 프로토타입
  

  • JavaScript의 객체지향 프로그래밍을 위한 class와 prototype을 이해
  • React에서는 클래스 기반 컴포넌트를 생성할 때 이 개념이 사용
    

• 이벤트 처리
  

  • DOM 이벤트 처리 방법과 이벤트 리스너를 등록하는 방법을 숙지
  • React에서는 이벤트 처리 방식이 조금 다르지만, 기본적인 이해가 필요

• Callback 함수
  

  • 다른 함수가 실행을 완료한 후 수행되는 함수
  • 다른 함수에 대한 입력으로 제공
    
    
  • 배열 메서드, 이벤트 리스너 및 기타 여러 위치에서 사용
  • 콜백 지옥
    • 복잡한 중첩 콜백으로 코딩할 때 발생하는 큰 문제
      
      

  • map() & filter() & setTimeout()

• JavaScript의 Map()
  

  • 콜백 함수를 사용하여 배열을 반복하고 해당 요소를 수정
  • 빈 배열인 경우에도 항상 새 배열을 반환
  • 새 배열을 만들 때 항상 원래 배열의 값을 사용

• JavaScript의 filter()
  

  • Filter() 특정 기준에 따라 새 배열을 제공
  • map()과 달리, 새 배열의 크기를 변경 가능
    
    
  • 일치하는 항목이 여러 개 있으면 첫 번째 일치 항목을 반환
  • 그렇지 않으면 undefined를 반환

• JavaScript의 find()
  

  • 메서드와 마찬가지로 메서드는 지정된 조건을 충족하는
    인스턴스/항목을 찾기 위해 배열을 반복
  • 찾으면 특정 배열 항목을 반환하고 즉시 루프를 종료
    
    
  • 일치하는 항목이 발견되지 않으면 함수는 undefined를 반환

• JavaScript에서 배열 및 객체 구조 분해
  

  • 비구조화(Destructuring)는 ES6에 도입된 자바스크립트 기능

  • 배열과 객체에서 변수에 더 빠르고 간단하게 접근하고 압축
    
    

     // 배열
     let [fruit1, fruit2, fruit3] = fruits;
    
     // 객체 구조 분해
     const {name, age, logs:{log1}} = Alex;

• Spread 연산자
  

  • JavaScript 스프레드 및 나머지 연산자는 세 개의 점을 사용
  • rest 연산자는 항목을 수집하거나 수집
    
    

     const [fruit1, fruit2, ...rest] = fruits;
     let animals = [...pets1, ...pets2];
     let myInfo = {...name, ...logs};

• 조건부 렌더링 방법
  

users.forEach((user) => {
  console.log(user.logs && user.logs.log1);
});

• 선택적 체이닝
  

users.forEach((user) => {
  console.log(user ?.logs ?.log1);
});