🚀 React 학습을 위한 1단계: JavaScript & ES6 기초 다지기

✅ JavaScript 기본 문법 정리
✅ ES6+ 주요 문법과 React에서의 활용
✅ JavaScript 실습 방법과 추천 자료

---

1️⃣ JavaScript 기본 문법 정리

React는 JavaScript 기반 라이브러리이므로, 먼저 JavaScript의 핵심 개념을 익혀야 해.
아래 개념을 먼저 이해하고 연습하면 React를 배우기 훨씬 쉬워질 거야!

🔹 1. 변수 선언 (var, let, const)

• var: 기존 방식 (사용 지양)
• let: 값 변경 가능
• const: 값 변경 불가능 (불변성 유지)

📌 예제 코드

var oldVar = "사용하지 말 것!";  // 사용 X
let name = "React";
const version = 18;  // 변경 불가능

 

✅ React에서는 const와 let을 주로 사용 (불필요한 변수 변경 방지)

---

🔹 2. 함수 선언 (기본 함수, 화살표 함수)

• 일반 함수 (function)
• 화살표 함수 (=>) → React에서 컴포넌트, 이벤트 핸들링에 자주 사용

📌 예제 코드

// 일반 함수
function sayHello(name) {
    return "Hello, " + name;
}

// 화살표 함수 (React에서 더 자주 사용)
const sayHelloArrow = (name) => `Hello, ${name}`;

✅ React에서는 화살표 함수(=>)가 콜백 함수로 자주 활용됨

---

🔹 3. 템플릿 리터럴 (백틱 활용)

• 문자열을 합칠 때 + 연산자 대신 **백틱(```)과 ${}**를 활용하면 편리

📌 예제 코드

const name = "React";
console.log(`Welcome to ${name} World!`);  // Welcome to React World!

 

✅ JSX 문법에서도 문자열 조합 시 자주 사용됨

---

🔹 4. 비구조화 할당 (Destructuring)

• 배열이나 객체에서 값을 쉽게 추출하는 방법
• React에서 props, state 데이터를 사용할 때 필수

📌 예제 코드

// 배열 비구조화 할당
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1

// 객체 비구조화 할당
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name); // Alice

 

✅ React의 useState 훅에서도 활용됨

const [count, setCount] = useState(0);

---

🔹 5. 스프레드 연산자 (...)

• 배열이나 객체를 복사하거나 합칠 때 사용
• React에서 컴포넌트 props 전달, 상태(state) 업데이트 시 필수적인 문법

📌 예제 코드

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // 기존 배열을 복사 후 값 추가
console.log(arr2); // [1, 2, 3, 4, 5]

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // 기존 객체 복사 후 변경
console.log(updatedUser); // { name: "Alice", age: 26 }

 

✅ React에서 상태 업데이트 시 불변성을 유지하는 방식으로 활용됨

setState(prevState => ({ ...prevState, newKey: "newValue" }));

---

🔹 6. 삼항 연산자 (? :)

• if-else 문을 간결하게 표현하는 방식
• React에서 조건부 렌더링에 자주 사용

📌 예제 코드

const isLogin = true;
console.log(isLogin ? "로그인 상태" : "로그아웃 상태");  // 로그인 상태

 

✅ JSX에서 활용 예시

{isLogin ? <Dashboard /> : <LoginPage />}

---

🔹 7. map(), filter(), reduce() - 배열 메서드 활용

React에서는 배열을 JSX로 변환할 때 map()을 필수적으로 사용

📌 예제 코드 (map())

const users = ["Alice", "Bob", "Charlie"];
const userList = users.map(user => `<li>${user}</li>`);
console.log(userList);  // ["<li>Alice</li>", "<li>Bob</li>", "<li>Charlie</li>"]

 

✅ React에서 리스트 렌더링에 사용됨

<ul>
  {users.map(user => <li key={user}>{user}</li>)}
</ul>

 

📌 예제 코드 (filter())

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

 

📌 예제 코드 (reduce())

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

✅ React에서 리스트 관리 & 데이터 필터링 시 활용됨

---

2️⃣ JavaScript 실습 방법과 추천 자료

🔹 실습 환경 준비

React를 배우기 전에 JavaScript 연습을 충분히 하면 React가 더 쉬워져!
✅ VS Code 설치: 다운로드
✅ JavaScript 실행 테스트:

• JSFiddle
• CodeSandbox
• JSBin

🔹 무료 JavaScript 학습 사이트

📌 MDN Web Docs: https://developer.mozilla.org/ko/docs/Web/JavaScript
📌 JavaScript.info (기초부터 고급까지!) https://javascript.info/
📌 Nomad Coders 무료 강의: https://nomadcoders.co/javascript-for-beginners
📌 프로그래머스 JavaScript 강의: https://programmers.co.kr/learn/courses/

---

🎯 마무리: React를 배우기 전에 꼭 익혀야 할 JavaScript 개념

✅ ES6+ 문법 (let, const, 화살표 함수, 템플릿 리터럴, 구조 분해 할당, 스프레드 연산자)
✅ JSX에서 활용되는 map(), filter(), reduce() 등 배열 메서드
✅ 비동기 처리 (async/await, Promise) → API 호출 시 필요
✅ JavaScript의 this, 이벤트 핸들링, 함수 호출 방식 익히기

🔥 이제 JavaScript 기초를 다졌다면, 다음 단계인 React 기본 개념(컴포넌트, JSX)으로 넘어가보자!