[코드 스테이츠] 27일차, "4주차 복습(1)"

---

[ 오늘의 TODO ]

1. 코드 스테이츠) 월~수 내용 복습
   // 고차함수 개념
   // React Intro 개념
2. 코드 스테이츠) 어제 한 거 Advanced 완성
   // 거의 모든 시간을 쏟아부었으냐 결국 못해냄
3. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
4. 생활) 물 1L 이상 마시기
5. 생활) 수-토-일 운동 
   // 운동은 저 Advanced 때문에 생각도 못함

---

[ 오늘의 복습 ]

1.  고차함수

  1-1) 고차함수의 개념

  자바 스크립트에서 함수는 일급객체 취급을 받는다. 일급 객체는 다음과 같은 취급을 받게 된다.

1. 변수에 할당 가능
2. 다른 함수의 인자로 전달 가능
3. 다른 함수의 결과로써 리턴 가능

  즉, 일급 객체인 함수는 하나의 데이터처럼 다룰 수 있다.

 

  고차함수란 함수를 인자로 받을 수 있고 함수의 형태로 리턴할 수 있는 함수를 의미한다. 함수의 인자로 함수를 받을 때 인자로 들어간 함수를 콜백함수라고 한다. 

 

  고차함수를 쓴다는 건 추상화를 한 단계 높이는 과정이다. 추상화란 복잡한 것을 압축해서 핵심만을 추출하는 것이다. 추상화를 한 단계 높인다는 것은 그만큼 생산성을 향산시키는 것을 의미한다. 함수는 값을 전달 받아서 값을 리턴하지만, 고차 함수는 함수라는 사고들의 묶음을 전달 받아서 리턴한다.

  1-2) map( )

  map은 배열의 각 요소가 인자로 들어오는 함수로 인해 다른 요소로 지정되는 것을 의미한다.

const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(el => el*2)

console.log(newArr) // [2, 4, 6, 8, 10]

 

  1-3) filter

  fiter는 배열의 각 요소가 인자로 들어오는 함수로 인해 Boolean 값으로 true를 리턴할 때 따로 분류한다.

const arr = [
  {
    name: John,
    age: 23,
  },
  { 
    name: Smith,
    age: 18,
  },
  {
    name: Mike,
    age: 25,
  }
]

const filteredArr = arr.filter(el => el.age > 20)

console.log(filteredArr) 
/* [
  {
    name: John,
    age: 23,
  },
  {
      name: Mike,
      age: 25,
    }
  ]
*/

 

  1-4) reduce ( )

  배열의 각 요소를 인자로 들어오는 함수에 의해 원하는 형태로 응축한다.

 

const arr = [1, 2, 3, 4, 5]

const reducedArr = arr.reduce((acc, cur) => {
  return arr + cur 
},0)

console.log(reducedArr) // 15

// for 문으로 생각해본다면
/* 
  let result = 0 
    이때의 0은 초기값 0으로 지정해준 것과 마찬가지
  
  for(let i = 0 ; i < arr.length ; i++) {
	result = result + arr[i] // 이때의 result가 arr이 되고, arr[i]는 cur
  }

  const reducedArr = result
*/

 

2.  React 기초

  2-1) React의 세 가지 특징

1.   자세히 분석하지 않아도 이 코드가 무엇을 의미하는지 알아낼 수 있다.
2.   컴포넌트 기반이다. 
3.   범용성이 좋다

 

  2-2) JSX란?

  React에서 UI를 구성할 때 사용하는 확장 문법이다. Babel 이 JSX를 JS 로 컴파일 해준다.

 

  2-3) JSX 문법

1. 태그가 열렸으면 닫혀야 한다.
2. className으로 태그에 class를 부여한다.
3. JSX 에서 JavaScropt를 사용한다면 중괄호를 포함해야 한다.
4. 조건부 렌더링은 if로 말고 삼항 연산자로 해야 한다
5. React에서 여러 반복되는 태그를 표시할 때 map()을 쓰면 좋고, key값을 부여해야 한다.