[React] React를 위한 JavaScript (1)

JS 구성: 함수 / 화살표 함수 / map, filter

 

Step 0. JavaScript 실습용 폴더 및 파일 생성

mkdir js && cd js
touch practice.js

브라우저 없이 터미널에서 바로 돌리는 게 빠르다.

 

다음 명령어를 통해 실행할 수 있다.

node practice.js

 

Step 1. 함수는 값이다.

JavaScript에서 함수는 숫자나 문자열처럼 변수에 담고, 인자로 넘기고, 반환할 수 있는 값이다.

function greet(name) {
  return "안녕, " + name;
}

const hello = greet;        // 호출이 아니라 함수 자체를 담음
console.log(hello("철수"));  // 안녕, 철수

greet와 greet()는 완전히 다르다. 

greet는 함수 그 자체, greet()는 함수를 실행한 결과이다.

 

React에서 다음과 같이 쓰게 된다.

<button onClick={handleClick}>   // 함수를 건네줌. 나중에 React가 부름
<button onClick={handleClick()}> // 지금 당장 실행. 거의 항상 버그

React에서 처음 만나는 대부분의 버그가 정확히 이 차이다.

 

Step 2. 화살표 함수(Arrow function)

같은 걸 짧게 쓰는 문법으로 React 코드는 거의 전부 다음과 같은 형태이다.

const greet = (name) => {
  return "안녕, " + name;
};

const greet2 = (name) => "안녕, " + name;  // 중괄호 생략 시 자동 return

중괄호를 쓰면 return을 직접 써야 하고, 생략하면 그 식의 결과가 곧 반환값이다. 
이 규칙을 헷갈리면 나중에 "왜 undefined가 나오지?"로 돌아온다.

 

Step 3. map

배열의 각 요소를 변환해서 새 배열을 만든다. 원본은 건드리지 않는다.

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);

console.log(doubled);  // [2, 4, 6]
console.log(numbers);  // [1, 2, 3]  ← 그대로

React의 리스트 렌더링은 이게 전부이다. 데이터 배열을 JSX 배열로 map 하는 것뿐이다. (앞으로 배울 내용)

 

3-1. filter

조건에 맞는 것만 남긴 새 배열을 만든다. 반환값이 true면 남고 false면 빠진다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens);  // [2, 4]

 

즉, map은 바꾸고, filter는 고른다.

 

 

핵심 정리

• 함수는 값이다 — handleClick과 handleClick()의 차이
• 화살표 함수 — 중괄호를 쓰면 return 필요, 생략하면 자동 반환
• map은 개수 유지하며 값을 바꾸고, filter는 값 유지하며 개수를 줄인다
• map과 filter 둘 다 원본을 건드리지 않고 새 배열을 만든다

 

 

연습 문제

const students = [
  { name: "지민", score: 85 },
  { name: "수현", score: 42 },
  { name: "태현", score: 91 },
  { name: "은지", score: 67 },
];

1. 모든 학생의 이름만 담긴 배열을 만드시오.
2. 점수가 60점 이상인 학생만 남기시오.
3. 60점 이상인 학생들의 이름만 담긴 배열을 만드시오. (hint: filter와 map을 이어서)

 

 

답안

const students = [
  { name: "지민", score: 85 },
  { name: "수현", score: 42 },
  { name: "태현", score: 91 },
  { name: "은지", score: 67 },
];

const names = students.map((student) => student.name);
const passed = students.filter((student) => student.score >= 60);
const passedNames = students
  .filter((student) => student.score >= 60)
  .map((student) => student.name);

console.log(names);
console.log(passed);
console.log(passedNames);