회사 프로젝트에 필요해져서 강의듣고 빠르게 정리!

---

1. Javascript 기본

let empty = null;

// undefined type
let none;

• null은 명시적으로 값이 없다는 의미
• none은 값이 할당되지 않았을 때 기본으로 들어가는 값

---

• 묵시적 형 변환 : 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형변환
• 명시적 형 변환 : 개발자가 직접 함수 등을 이용해 형 변환을 일으킴

---

null 병합 연산자(??)

-> Nullish Coalescing Operator라고 한다
-> 존재하는 값을 추려내는 기능
-> null, undefined가 아닌 값을 찾아내는 연산자

let var1;
let var2 = 10;
let var3 = 20;

// var1이 null이거나 undefined이면 var2의 값이 들어간다.
let var4 = var1 ?? var2; 

---

함수 표현식으로 만든 함수는 호이스팅 되지 않는다.

---

콜백함수란?

자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미

function main(value) {
  value();
}

function sub() {
  console.log("sub");
}

main(sub);

function main(value){
  console.log(1);
  console.log(2);
  value();
  console.log("end");
}

main(() => {
  console.log("i am sub");
})

// 활용
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++){
    callback(idx);
  }
}

repeat(5, function(idx) {
  console.log(idx);
})

repeat(5, function(idx) {
  console.log(idx * 2);
})

2. Javascript 심화

3. Node.js 기초

JavaScript 실행 환경(Runtime)

모듈 시스템

모듈을 다루는 시스템

// math.js
export function add(a, b){
  return a + b;
}

export function sub(a, b){
  return a - b;
}

export default function multiply(a, b){
  return a * b;
}

// index.js
import mul, {add, sub} from "./math.js";

console.log(add(1, 2));
console.log(mul(2, 3));

라이브러리

• package.json
  • ^은 버전 범위를 의미
  • devDependencies - 개발 할 때만 사용하는 라이브러리들
• node_modules -> 실제 라이브러리 코드가 위치
• package-lock.json -> 패키지가 사용하고 있는 버전이나 정보를 package.json보다 더 정확하게 저장

4. React.js 개론

특징

• 컴포넌트 기반으로 UI를 표현
• 화면 업데이트 구현이 쉽다
  • 선언형 프로그래밍
    • 과정은 생략하고 목적만 간결히 명시하는 방법
      • 목적만 깔끔하게 명시
      • 코드가 간결함
    • 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정변수의 값을 바꾸는 것 만으로도 화면을 업데이트 할 수 있다.
• 화면 업데이트가 빠르게 처리된다
  • DOM을 그리는 과정의 Reflow와 Repaint는 아주 오래 걸리는 과정
    • 그래서 동시에 발생한 업데이트를 모아 한번에 수정하는 방식으로 구현을 많이한다.
    • React에서는 Virtual DOM을 활용해 이 과정을 자동으로 해준다.

      • VirtualDOM이란 - 업데이트 발생 시 실제 DOM을 수정하기 전에 가상의 DOM에 먼저 반영을 하고 변경된 부분을 그려준다.

vite

vite를 사용해 리액트 앱을 생성한다. - npm create vite@latest

• public -> 이미지, 폰트, 동영상 등 정적인 파일 저장
• src -> 코드 저장
  • assets -> 정적 파일 저장
  • index.html -> react의 기본 틀 역할을 하는 코드 / div id = root에 DOM을 추가하는 방식으로 동작

React App 구동원리 살펴보기

• React App에는 web server가 내장되어 있다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

• App Component을 렌더링 하겠다.

5. React.js 입문

eslint 옵션

• no-unused-vars : 사용하지 않으면 에러 표시
• react/prop-types : 포넌트의 propTypes 정의 여부를 검사하는 옵션
• 위의 2항목 off처리

---

• react는 html코드를 반환할 수 있으며 이러한 코드들을 컴포넌트라 한다.

---

JSX

• JSX : 확장된 자바스크립트 문법
  • {number} 처럼 중괄호 안에 사용하면 된다.
  • 특징
    • 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
    • 2. 숫자, 문자열, 배열 값만 렌더링 된다.
      • 객체의 경우에는 obj.a 처럼 점 표기법을 이용해 숫자나 문자값으로 변경시켜줘야 한다.
    • 3. 모든 태그는 닫혀있어야 한다.
    • 4. 최상위태그는 반드시 하나여야 한다.
      • 최상위 태그가 없을 경우 <> ... </> 빈태그로 해줘야 한다.
  • style
    • 직접 style을 직접 설정한다.
    • 별도의 css파일 생성

컴포넌트에 값 전달하기

// app.js
function App() {
  
  const buttonProps = {
    text : "메일",
    color: "red"
  }

  return (
    <>
      <Button {...buttonProps}/>
      <Button text={"카페"}>
        <Header />  
      </Button>
      <Button text={"블로그"}>
        <div>자식 요소</div>
      </Button>
    </>
  )
}
export default App

// botton.jsx
const Button = ({children, text, color = "black"}) => {
    return <button style={{color: color}}>
        {text} - {color}
        {children}
        </button>
};

export default Button;

위의 코드는

• props 전달 방법
• props에 default값을 설정하는 방법
• 자식 요소(html), 컴포넌트 태그 전달 방법 -> 자동으로 children 이란 이름으로 전달된다.

이벤트 핸들링

웹 내부에서 발생하는 사용자의 행동을 처리하는 것 ex) 버튼 클릭 시 경고창 노출

• 이벤트 핸들러 : click과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정한 함수

const Button = ({children, text, color = "black"}) => {
    const onClickButton = (e) => {
        console.log(e);
        console.log(text);
    }
    
    return (
        <button 
        onClick={onClickButton}
        style={{color: color}}>
        {text} - {color}
        {children}
        </button>
    );
};

• 이벤트 객체
  • react에서 발생하는 모든 이벤트들은 이벤트 핸들러 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체를 제공한다.
  • e로 전달된 값을 console.log()로 찍어보면 Synthetic Base Event객체가 전달된 것을 확인할 수 있다.
    • 합성 이벤트란(Synthetic Base Event)?
      • 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태
      • Cross Browsing Issue를 편리하게 해결
      • 합성 이벤트 객체는 모든 브라우저에서 사용할 수 있는 통합된 규격의 이벤트 객체이다.

State

6. 라이프 사이클

7. useReducer

8. 최적화

9. Context

한 마디로 말하면:

“변경되는 값을 컴포넌트가 기억하고, 그 값이 바뀌면 자동으로 화면(UI)을 다시 그리기 위해서.”

예를 들어 보자: tsx 복사 편집 const [count, setCount] = useState(0);

return ( <button onClick={() => setCount(count + 1)}> 클릭 횟수: {count} ); 여기서 일어나는 일: count는 버튼 클릭 횟수를 기억하는 값

setCount()로 값을 바꾸면

React가 알아서 UI를 다시 그림 (렌더링)

→ 이게 바로 “리액티브(reactive)” 상태 관리의 핵심

🧠 왜 그냥 변수 쓰면 안 될까? tsx 복사 편집 let count = 0; <button onClick={() => count++}>Click // ❌ UI 안 바뀜 이유: 일반 변수는 React가 변경된 걸 감지 못함

useState()는 변화 감지 + 재렌더링 트리거 기능을 제공함

📦 React 상태(state)의 특징 항목 설명 기억(Persist) 렌더 사이에도 값을 기억함 반응(Reactive) 값이 바뀌면 자동으로 UI 업데이트 고립(Isolated) 각 컴포넌트는 자기 상태만 관리함 선언적(Declarative) “상태가 이러면 UI는 이렇게 돼” 구조 💡 상태를 사용하는 대표적인 예시 사용자 입력 폼

버튼 클릭 카운트

토글 상태

모달 열림 여부

리스트 정렬 필터 등

Reference