리액트를 공부하면 할수록 “아.. 자바스크립트를 더 탄탄히 알아야겠구나” 이런 생각의 무한 굴레..
React는 JS 기반인데,
JS 역시 깊게 공부하진 않았으니까,, 아무리 쌓아도 금방 무너지고, 또 얕게 쌓고 하는 느낌..
지피티가 정리해준 React를 제대로 이해하려면 꼭 알아야 할 자바스크립트 기초 개념들
✨ 1. 변수 선언 (let, const, var)
- const는 상수 (값 재할당 ❌)
- let은 변수 (값 재할당 ⭕️)
- var는 거의 안 씀 (호이스팅 문제 등)
const name = 'Jane';
let age = 30;
✨ 2. 함수 선언 방식
- 선언식 / 표현식 / 화살표 함수
function sayHi() {} // 선언식
const sayHi = function() {}; // 표현식
const sayHi = () => {}; // 화살표 함수 (React에서 자주 씀!)
handleClick() 처럼 쓰이면 "이건 함수다!" 라는 걸 인식할 수 있어야 해.
✨ 3. this 키워드
- 함수 안에서의 this는 선언 방식에 따라 다르게 동작해.
React 컴포넌트에서는 특히 class 방식과 arrow function에서 차이 남.
✨ 4. 배열과 객체 다루기 (엄청 중요)
배열 메서드: map(), filter(), forEach(), reduce()
const items = [1, 2, 3];
const doubled = items.map(item => item * 2); // [2, 4, 6]
객체 구조 분해, 스프레드 연산자
const user = { name: 'Jane', age: 28 };
const { name } = user; // 구조 분해
const newUser = { ...user, job: 'Developer' }; // 스프레드
✨ 5. 비동기 처리: Promise, async/await
- API 호출이나 fetch 쓸 때 반드시 등장
async function getData() {
const res = await fetch('https://api.com');
const data = await res.json();
}
✨ 6. 조건문 삼항 연산자 ? :
React JSX 안에서 자주 쓰임!
{isLoggedIn ? <p>Welcome</p> : <p>Please log in</p>}
✨ 7. truthy / falsy 값 개념
React에서 조건 렌더링할 때 매우 중요!
{someValue && <p>This shows if someValue is true</p>}
✨ 8. 클로저와 스코프
- 함수 안의 함수가 외부 변수를 기억하는 구조
React Hook과 상태관리할 때 알아두면 좋아.
한 파트씩 깊게 공부할 필요가 있다.
자바스크립트에서 리덕스(전역 상태관리)를 이해하기 위해 꼭 알아야 할 개념
1. 변수, 객체, 배열
- 상태(state)는 결국 값(value) 이야.
- 이 값은 변수, 객체(object), 배열(array) 같은 기본 자료형으로 표현돼.
꼭 알아야 하는 포인트
- 객체로 여러 데이터를 한 번에 관리할 수 있다는 것
→ const user = { name: "Jane", age: 25 } - 배열로 목록(list) 같은 걸 관리할 수 있다는 것
→ const todos = [ { id: 1, text: "공부하기" }, { id: 2, text: "운동하기" } ]
간단 예시
let state = {
count: 0,
todos: ["공부", "운동"]
};
2. 함수
- 리덕스는 기본적으로 "함수형 프로그래밍" 개념을 사용해.
- 특히 순수 함수(pure function) 라는 걸 엄청 중요하게 여겨.
꼭 알아야 하는 포인트
- 함수는 입력 → 출력만 신경써야 한다는 것
(함수 안에서 몰래 다른 걸 바꾸면 안 돼.) - 함수는 기존 값을 복사해서 새로운 값을 만들어야 한다는 것
간단 예시
function addOne(num) {
return num + 1;
}
// 기존 num을 바꾸는 게 아니라, 새 값을 만들어서 return
3. 불변성(Immutable)
- 상태를 직접 변경하지 말고, 복사해서 새로운 상태를 만들어야 한다
- 이게 리덕스에서 핵심중의 핵심 이야.
꼭 알아야 하는 포인트
- 객체나 배열을 복사할 때는 얕은 복사를 해야 해.
- 객체: { ...object }
- 배열: [...array]
간단 예시
const user = { name: "Jane" };
// ❌ 이렇게 직접 수정하면 안 돼
// user.name = "Tom";
// ✅ 이렇게 새로운 객체를 만들어야 해
const newUser = { ...user, name: "Tom" };
4. 비동기(Asynchronous)
- 나중에 리덕스 미들웨어(Thunk, Saga 등) 배우게 되면, 비동기를 다뤄야 해.
- 예를 들어, 서버에 데이터 요청하거나 기다리는 걸 처리하는 거야.
꼭 알아야 하는 포인트
- Promise
- async/await
간단 예시
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
5. 콜백함수, 고차함수
- 리덕스 미들웨어나 디스패치(dispatch) 개념을 이해하려면, 함수를 인자로 넘기거나, 함수를 반환하는 함수 개념을 알아야 해.
꼭 알아야 하는 포인트
- 콜백 함수: 함수 안에 또 다른 함수를 전달하는 것
- 고차 함수: 함수를 리턴하는 함수
간단 예시
// 콜백 함수
function greeting(callback) {
console.log("Hello!");
callback();
}
greeting(() => {
console.log("Nice to meet you!");
});
// 고차 함수
function makeAdder(x) {
return function(y) {
return x + y;
};
}
const add5 = makeAdder(5);
console.log(add5(10)); // 15
정리하면,
주제 한 줄 요약
| 변수, 객체, 배열 | 상태(state)는 결국 값이다. 객체와 배열은 필수 |
| 함수 | 입력 → 출력에만 신경 쓰는 순수 함수! |
| 불변성 | 절대 직접 수정 ❌, 복사해서 새로운 값 만들기 ✅ |
| 비동기 | async/await, Promise를 알아야 서버 통신 가능 |
| 콜백함수, 고차함수 | 함수도 "데이터처럼" 주고 받을 수 있다 |
📚 공부 순서
- 변수, 객체, 배열 — 상태를 표현하는 기본
- 함수 — 동작을 담당하는 기본
- 불변성(Immutable) — 상태를 다룰 때 가장 중요한 철칙
- 비동기(Promise, async/await) — 서버랑 통신하는 필수 개념
- 콜백 함수, 고차 함수 — 리덕스 미들웨어, 디스패치 이해하기 위한 심화개념
📖 각 주제별로 이렇게 진행할게
- 초간단 핵심 요약
- 그림/도식으로 설명 (필요하면)
- 실제 사용 예제
- 실습 문제 (네가 직접 풀어볼 수 있게)
- 추가로, 궁금한 부분 있으면 바로 질문 가능!
✨ 그럼 바로 1번부터 시작하자!
1. 변수, 객체, 배열 - 상태를 표현하는 기본
🔵 [핵심 요약]
- 변수: 하나의 값을 저장하는 공간
- 객체: 이름(key)과 값(value)을 짝지어서 여러 데이터를 저장하는 덩어리
- 배열: 순서가 있는 값들의 리스트
→ 리덕스의 상태(state)는 보통 객체나 배열로 관리한다.
🔵 [기초 개념 설명]
▸ 변수
let name = "Jane";
const age = 25;
- let: 값 변경 가능
- const: 값 변경 불가능 (한번 정하면 끝!)
▸ 객체 (Object)
const user = {
name: "Jane",
age: 25,
isStudent: true
};
- {} 안에 key: value 쌍으로 데이터를 담는다.
- key는 문자열, value는 뭐든지 가능!
▸ 배열 (Array)
const fruits = ["apple", "banana", "cherry"];
- [] 대괄호 안에 값들을 순서대로 넣는다.
- 각각의 값은 인덱스(0부터 시작)로 접근 가능
🔵 [리덕스 상태 예시]
리덕스에서 상태를 관리할 때는 이런 식으로!
const state = {
count: 0,
todos: [
{ id: 1, text: "공부하기", done: false },
{ id: 2, text: "운동하기", done: true }
],
user: {
name: "Jane",
loggedIn: false
}
};
state는 보통 "큰 객체 하나"로 만든다.
안에는 객체, 배열이 섞여 있을 수 있다!
🔵 [그림으로 쉽게 보기]
state
│
├─ count: 0
├─ todos: [
│ { id: 1, text: "공부하기", done: false },
│ { id: 2, text: "운동하기", done: true }
│ ]
└─ user: { name: "Jane", loggedIn: false }
하나의 큰 "나무(tree)"처럼 생각하면 돼! 🌳
✍️ [실습 문제 1]
직접 아래 상태(state)를 객체로 만들어봐!
요구사항
- 이름(name): "Tom"
- 나이(age): 30
- 취미(hobbies): ["독서", "축구", "프로그래밍"]
작성해봐! (힌트: 객체 + 배열 둘 다 써야 해!)