React를 위한 JavaScript 기초 훑어보기 (1/2)

Part 1. 자바스크립트의 기본기

1. 변수 선언: let과 const (그리고 var와의 이별)

React 생태계에서는 var를 더 이상 사용하지 않는다. 딱 두 가지만 기억하자.

• const (상수): 한 번 값을 넣으면 절대 바꿀 수 없다.
• let (변수): 나중에 값을 바꿔야 할 때만 쓴다.

const framework = "React";
console.log(framework);

let count = 0;
console.log(count); // 결과 0

count = 1; // 값을 재할당
console.log(count); // 결과 1

• React에서는 컴포넌트, 설정값, 함수 선언 등은 변할 일이 없기 때문에 대부분 const를 쓴다.

 

2. 탬플릿 리터럴 (Template Literals)

문자열을 합칠 때 + 기호를 쓰면 코드가 지저분해진다. 백틱(`) 기호를 사용하면 변수를 문자열 안에 넣을 수 있다.

const name = "지민";
const age = 25;

// 기본 방식
const oldGreeting = "안녕, 내 이름은 " + name + "이고, 나이는 " + age + "살이야.";
console.log(oldGreeting);

// 백틱을 사용하는 방식
const newGreeting = `안녕, 내 이름은 ${name]이고, 나이는 ${age}살이야.`;
console.log(newGreeting);

 

 

 

3. 삼항 연산자 (Ternary Operator)

React의 화면을 그리는 부분(JSX)에서는 if문을 사용할 수 없다. 그래서 "조건 ? 참일 때 : 거짓일 때" 형태의 삼항 연산자를 익혀야 한다.

const isLogin = true;

let message = "";
if (isLogin) {
  message = "환영합니다!";
} else {
  message = "로그인해주세요.";
}
console.log(message);

// 삼항 연산자
const shortMessage = isLogin ? "환영합니다!" : "로그인해주세요.";
console.log(shortMessage);

 

 

4. 단축 평가 (Short-circuit Evaluation)

&&(AND), ||(OR)를 논리 계산뿐만 아니라, “값이 있는지 없는지 체크” 하는 용도로 쓴다.

const user = { name: "철수" }; // 객체 리터럴

const userName = user && user.name;
console.log(userName); // 결과 : 철수

const inputName = "";

const displayName = inputName || "손님";
console.loh(displayName); // 결과: 손님

• Truthy와 Falsy: 자바스크립트에서는 false, 0, ""(빈 문자열), null, undefined, NaN 6가지를 거짓으로 취급한다. 나머지는 모두 참.

 

5. 화살표 함수 (Arrow Function)

function이라는 긴 단어 대신 => 화살표를 사용한다. React 컴포넌트를 만들 때 가장 많이 쓰는 문법이다.

// 기존
function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

// 1. 기본 형태
const addArrow = (a, b) => {
  return a + b;
};

// 더 짧은 형태
const addShort = (a, b) => a + b;

console.log(addShort(10, 20)); // 결과 : 30

• React 포인트: const App = () => {...} 형태로 컴포넌트를 정의한다.
• 버튼 클릭 이벤트 등을 작성할 때 onClick{() => alert('클릭')}처럼 간결하게 작성할 수 있다.

 

Part 2. 데이터 다루기 (객체와 배열)

1. 객체 단축 속성명 (Shorthand Property Names)

변수 이름과 객체의 키 이름이 같다면 한 번만 써도 된다.

const name = "스타크";
const job = "아이언맨";

// 키 : 값 형태
const user1 = {
  name; name,
  job: job
};
console.log(user1);

// 하나 생략
const user2 = {
  name,
  job
};
console.log(user2);

• React 포인트: 컴포넌트에 데이터를 넘겨주거나, 상태를 업데이트할 때 코드를 훨씬 깔끔하게 만들어줌

 

2. 구조 분해 할당 : 객체 (object Destructuring)

객체 안에 있는 값을 꺼내서 변수에 담는 문법. React에서 남이 짠 코드를 볼 때 가장 많이 보게 될 문법

const movie = {
  title: "어벤져스",
  director: "루소 형제",
  year: 2019
};

// 기본 방식
const oldTitle = movie.title;
const oldYear = movie.year;
console.log(oldTitle, oldYear);

// 구존 분해 할당
// movie 객체 안에서 title과 director라는 키를 찾아서 같은 이름의 변수로 만들기
const { title, director } = movie;

console.log(title);
console.log(director);

 

 

3. 구조 분해 할당: 배열 (Array Destructuring)

객체는 “키 이름”으로 꺼냈다면, 배열은 순서대로 꺼낸다.

const fruits = ["사과", "바나나", "포도"];

const f1 = fruits[0];
const f2 = fruits[1];

// 첫 번째를 apple에, 두 번째를 banana에 넣기
const [apple, banana] = fruits;

console.log(apple);
console.log(banana);

React의 상태 관리 훅인 useState가 이 원리로 동작,
const [count, setCount] = useState(0); (첫 번째 값은 현재 상태, 두 번째 값은 상태 바꾸는 함수)

 

4. Spread 연산자 (전개 구문) - ...

배열이나 껍데기를 벗겨서 그 안의 내용물을 펼치는 문법. 주로 데이터를 복사하거나 합칠 때 사용함.

배열에서의 Spread

const team1 = ["철수", "영희"];
const team2 = ["민수", "지수"];

const unitedTeam = [...team1, ...team2];

console.log(unitedTeam); // ["철수","영희","민수","지수"]

// 중간에 끼워 넣기도 가능
const newTeam = ["코치", ...team1];
console.log(newTeam); // ["코치","철수","영희"]

객체에서의 Spread

React에서는 기존 데이터를 직접 수정하면 안된다. 기존 것을 복사하고 바꿀 부분만 덮어쓰기를 해야한다. 이때 Spread가 필요하다.

const user = {
  name: "나개발",
  age: 30,
  role: "Junior"
};

// 상황 : 나개발의 이름과 역하릉 그대로 두고, 'age'만 31로 바꾸고 싶다.

// 1. 빈 객체({})를 만든다.
// 2. ...user를 써서 기존 내용을 다 펼쳐 넣는다. (복사)
// 3. 바꾸고 싶은 값(age)를 뒤에 적어서 덮어쓴다.
const updatedUser = { ...user, age: 31 };

console.log(user); // 원본은 그대로 있음, 불변성 유지
console.log(updatedUser); // 복사본 변경

• React 포인트: state를 업데이트할 때 user.age = 31이라고 쓰면 React가 화면을 갱신해주지 않는다. 반드시 위처럼 ... 을 사용해 새로운 객체를 만들어줘야 화면을 다시 그려준다.

 

복습 예제

// 구조 분해 할당을 사용해 person 객체에서 name과 hobby 꺼내기
// Spread 연산자를 사용해 person의 정보를 그대로 유지하면서 isStudent: true 라는 속성을 추가한 newPerson 객체 만들기

const person = {
  name: "지수",
  age: 22,
  hobby: "코딩"
};

// 1. 구조 분해 할당
const { ???, ??? } = person;
console.log(name, hobby); // "지수", "코딩"

const newPerson = { ???, isStudent: true };
console.log(newPerson);
// 예상 결과 : {name: "지수", age : 22, hobby: "코딩", isStudent: true}