📒 한입 크기로 잘라 먹는 리액트 (React.js)

📕 JavaScript 기본

1. 변수와 상수

• 변수
  • 프로그램이 실행되는 도중 계속 바뀌는 값을 저장
  • 선언

    let age = 25; // 중복 선언 허용X
    var age = 25; // 중복 선언 가능
    const age - 25; // 상수 선언 (값 수정 불가)

2. 자료형과 형 변환

• Primitive Data Type (원시 타입)
  • Number : 숫자형
  • String : 문자형
  • Boolean
  • Undefined
  • Null
    ➡️ 한 번에 하나의 값만 가질 수 있음, 하나의 고정된 저장 공간 이용
• Non-Primitive Data Type (비 원시 타입)
  • Object
  • Array
  • Function
    ➡️ 한 번에 여러 개의 값을 가질 수 있음, 여러 개의 고정되지 않은 동적 공간 사용

let age = 25; // 정수
let tall = 175.9; // 실수
let inf = Infinity; // 양의 무한대
let mInf = -Infinity; // 음의 무한대
let nan = NaN;

let name = "winter";
let name2 = "spring";
let name3 = `winter ${name2}`; // 템플릿 리터럴

let isSwitch = true;

let a = null; // 의도적으로 값이 없다는 것을 의미
let b; // 아무것도 입력하지 않을 경우 undefined

• 형 변환
  • 명시적 형 변환 : 개발자가 의도적으로 형 변환
  • 묵시적 형 변환 : 자바스크립트에서 자동적으로 문자 ↔️ 숫자 변환

let numberA = 12;
let numberB = "2";

console.log(numberA * numberB); // 24
console.log(numberA + numberB); // 122
console.log(numberA + parseInt(numberB)); // 14

3. 함수

1) 함수 선언식

• 함수 선언식
  • 함수 선언 방식의 함수 생성
  • 해당 함수 호출하여 실행

function getArea() {
  let width = 10;
  let height = 20;
  
  let area = width * height;
  console.log(area);
}

getArea();

• 함수 매개변수
  • 매개변수 : 값을 받아오는 인자

function getArea(width, height) {
  let area = width * height;
  return area;
}

let area2 = getArea(10, 20);
console.log(area2);

2) 함수 표현식

• 함수 표현식
  • 함수를 변수에 담아서 사용
  • 호이스팅이 이루어지지 않음

let getArea = function (width, height) {
  let area = width * height;
  return area;
}

let area2 = getArea(10, 20);
console.log(area2);

3) 화살표 함수

• 화살표 함수
  • 무명 함수를 빠르고 간결하게 표현하는 문법

let helloA = () => {
  return "Hello World";
}

console.log(helloA);

4) 콜백함수

function check(n, aCallback, elseCallback) {
  if (n == "a") {
    // a일 때 하는 동작
    aCallback();
  } else {
    // a가 아닐 때 하는 동작
    elseCallback();
  }
}

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

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

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

check("a", a, b);

4. 객체

• 객체 생성자

let person = {
  // key: "value" 형식 (객체 프로퍼티)
  key : "value", // 멤버
  key2 : true,
  key3 : undefined,
  key4 : [1, 2],
  key5 : function() {
    console.log(`${this["key"]}`);œ
  } // 메서드 (함수)
}; // 객체 리터럴 방식

// 객체 접근 방법
console.log(person.key);
console.log(person["key"]);
person["key5"](); // 메서드 호출 

console.log(getPropertyValue("key2"));

function getPropertyValue(key) {
  return person[key]);
}

5. 배열

1) 배열

• 배열 선언

let arr = new Array(); // Array 생성자 
let arr = [1, 2, 3]; // 배열 리터럴

arr.push("4"); // 배열에 값 추가 
console.log(arr.length); // 배열 길이

• 배열 순회

let person = {
  name: "김수현",
  age: 25,
  tall: 175
};

const personKeys = Object.keys(person); // 키 추출
const personValues = Object.values(person); // 값 추출

for (let i = 0; i < personKeys.length; i++) {
  const curKey = personKey[i];
  const curValue = person[curKey];
  
  console.log(`${curKey} : ${curValue}`);
}

2) 배열 내장 함수

• forEach
  • 배열 모든 값 조회

const arr = [1, 2, 3];

arr.forEach((elm) => console.log(elm)); // for문과 동일

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• includes
  • 배열의 특정 값이 존재하는지 확인
  • true/false로 반환

const arr = [1, 2, 3];
let number = 3;

console.log(arr.includes(number)); // if문과 동일 

for (let i = 0; i < arr.length; i++) {
  if (arr[i] == number) {
    console.log(arr[i]);
  }
}

• indexOf
  • 배열에 특정 값이 존재하는 인덱스 위치 반환

const arr = [1, 2, 3];
let number = 3;

console.log(arr.indexOf(number)); // if문과 동일 

for (let i = 0; i < arr.length; i++) {
  if (arr[i] == number) {
    console.log(i);
  } else {
    console.log(-1);
  }
}

• findIndex
  • 객체에서 특정 값이 존재하는 인덱스 위치 반환
  • 가장 먼저 조건을 만족하는 인덱스 반환
• find
  • 객체에서 특정 값이 존재하는 element 반환

const arr = {
  {color: "red"},
  {color: "black"},
  {color: "blue},
  {color: "green"}
};

let number = 3;

const idx = arr.findIndex((elm) => {
  return elm.color === "red"
}); // index 반환
console.log(arr[idx]); 

const element = arr.find((elm) => {
  return elm.color === "red"
}); // element 반환
console.log(element);

• filter
  • 배열 필터링
  • 객체에서 조건에 일치하는 배열 요소를 반환

const arr = {
  {num: 1, color: "red"},
  {num: 2, color: "black"},
  {num: 3, color: "blue},
  {num: 4, color: "green"}
};

console.log(arr.filter((elm) => elm.color === "blue"));

• slice
  • 배열 자르기

const arr = {
  {num: 1, color: "red"},
  {num: 2, color: "black"},
  {num: 3, color: "blue},
  {num: 4, color: "green"}
};

console.log(arr.slice(0, 2)); // 0, 1 요소 반환

• concat
  • 배열 합치기
• join
  • 구분자 포함하여 배열 합치기

const arr1 = {
  {num: 1, color: "red"},
  {num: 2, color: "black"}
};

const arr2 = {
  {num: 3, color: "blue},
  {num: 4, color: "green"}
};

console.log(arr1.concat(arr2));
console.log(arr.join(", "));

• sort
  • 배열 정렬
  • 원본 배열의 순서를 정렬

// 문자 사전순 정렬
let chars = ["나", "다", "가"];

chars.sort();

// 숫자 오름차순 정렬
let numbers = [6, 1, 3, 2, 10, 30, 20];

const compare = (a, b) => {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } 
  return 0;
}

numbers.sort(compare);

📕 JavaScript 응용

1. Truthy & Falsy

1) 참 같은 값

• TRUE 반환
  • [] (빈 배열)
  • string
  • integer
  • Infinity

let a = "hi";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE"); 
}

2) 거짓 같은 값

• FALSE 반환
  • null
  • "" (빈 문자열)
  • undefined

let a = "";

if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE"); 
}

2. 삼항 연산자

• 삼항 연산자
  • 조건 ? 참 : 거짓

let a = 3;
let b = [];

a >= 0 ? console.log("양수") : console.log("음수");

const arrayStatus = b.length === 0 ? "빈 배열" : "안 빈 배열";

• 중첩 삼항 연산자
  • 가독성이 떨어져서 중첩 if문 사용

// 90점 이상 A+
// 50점 이상 B+ 
// 둘다 아니면 F

let score = 40;

score >= 90
  ? console.log("A+")
  : score >= 50
  ? console.log("B+")
  : console.log("F");

3. 비 구조화 할당

• 비 구조화 할당
  • 배열의 값을 순서대로 할당 받아 사용
  • 반복적으로 할당하는 것을 줄임
  • 순서가 아닌 키 값을 기반으로 접근

// 변경 전
let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three);

// 변수 비 구조화 할당

// let [one, two, three] = arr;
let [one, two, three, four="four"] = ["one", "two", "three"]; // 선언하면서 기본값 설정
console.log(one, two, three);

// 변경 전
let object = {one: "one", two: "two", three: "three"};

let one = object["one"];
let two = object.two;
let three = object.three;

console.log(one, two, three);

// 객체 비 구조화 할당
let {one, two, three:number} = object; // 변수 이름 바꿔서 할당 가능
console.log(one, two, number);

4. Spread 연산자

• Spread 연산자

const cookie = {
  base: "cookie",
  madeIn: "korea"
};

// 변경 전
const chocochipCookie {
  base: "cookie",
  madeIn: "korea",
  toping: "chocochip"
}

// 변경 전
const chocochipCookie {
  ...cookie, // Spread 연산자 
  toping: "chocochip"
}

• Spread 연산자로 배열 합치기

const noTopingCookies = ["촉촉", "안촉촉"];
const topingCookies = ["바나나", "딸기", "블루베리", "초코칩"];

const allCookies = [...noTopingCookies, ...topingCookies];
console.log(allCookies);

5. 동기 & 비동기

1) 자바스크립트의 싱글 스레드 작업 수행 방식

• 동기 방식의 처리

  • 자바스크립트는 코드가 작성된 순서대로 작업을 처리함
  • 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림
  • 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행함
    

• 동기 처리 방식 문제점

  • 하나의 작업이 너무 오래 걸리게 될 시. 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전 까지 올 스탑
  • 전반적인 흐름이 느려짐
    

• 멀티 쓰레드

  • Thread를 여러 개 사용하는 방식
  • 작업 분할 가능
    ➡️ 자바스크립트는 싱글 쓰레드로 동작
    

• 비동기 작업

  • 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점 극복
  • 여러 개의 작업을 동시에 실행 시킴
  • 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함
    ➡️ 콜백 함수를 붙여서 비동기 처리의 결과가 처리됨을 확인
    

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    console.log("A TASK END");
  }, 3000}; // 3초
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000); // 1초 (먼저 출력)
}

taskA(3, 4, (res)=> {
  console.log('A TASK RESULT : ', res);
});
  
taskB(7, (res)=> {
  console.log('B TASK RESULT : ', res);
});
console.log("코드 끝");

6. Promise (콜백 지옥 탈출)

• 비동기 작업의 상태
  • Pending (대기 상태) : 비동기 작업 진행 중 또는 문제 발생
  • Fulfilled (성공) : 정상 완료
  • Rejected (실패) : 거부 또는 서버 응답 안함
    

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      // 성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      // 실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다");
    }
  }, 2000);
}

function isPositiveP(number) {
  const executor = (resolve, rejcet) => {
    setTimeout(() => {
      if (typeof number === "number") {
      // 성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      // 실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다");
    }
    }, 2000);
  }
}

isPosirive(10, 
   (res) => {
  console.log("성공적으로 수행됨 : ", res);
}, (err) => {
  console.log("실패함 : ", err);
});

// Promise 사용
const asyncTask = new Promise(executor);
return asyncTask;

// res 상수가 반환받은 asyncTask 프로미스 객체를 이용해서 비동기 처리에 대한 결과값을 어디서든 사용 가능
const res = isPositiveP(101);

res
  .then((res) => {
  console.log("작업 성공 : ", res);
})
  .catch((err) => {
  console.log("작업 실패 : ", err);
});

• Promise 사용

// 콜백 함수 지옥
function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(3, 4, (a_res) => {
  console.log("task A : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("task B : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("task C : ", c_res);
    });
  });
});

/* 결과
 * task A : 7
 * task B : 14
 * task C : -14
*/


// Promise 
function taskA(a, b) {
  const executorA = (resolve, reject) => {
    setTimeout(() => {
      const = res = a + b;
      resolve(res);
    }, 3000);
  };
  return new Promise(executorA);
}                     

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -1;
      resolve(res);
    }, 2000);
  });
}

// 잘못된 사용
taskA(5, 2).then((a_res) => {
  console.log("A RESULT : ", a_res);
  taskB(a_res).then((b_res) => {
    console.log("B RESULT : ", b_res);
    taskC(b_res).then((c_res) => {
      console.log("C RESULT : ", c_res);
    });
  });
});

// 올바른 사용
taskA(5, 2).then((a_res) => {
  console.log("A RESULT : ", a_res);
  return taskB(a_res);
}).then((b_res) => {
  console.log("B RESULT : ", b_res);
  return taskC(b_res);
}).then((c_res) => {
  console.log("C RESULT : ", c_res);
});

7. async & await (직관적 비동기 처리 코드)

• async
  • Promise를 쉽게 이용하는 목적
  • Promise 객체를 return하는 비동기 처리 함수
• await
  • delay 대신 사용
  • 비동기 함수 호출 앞에 사용하면, 비동기 함수가 동기적인 함수처럼 작동
  • async 붙은 함수 내에서만 사용 가능

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  // await 사용하지 않을 경우
  return delay(3000).then(() => {
    return "hello Async"; // Promise 리턴
  });
  
  // await 사용
  await delay(3000);
  return "hello Async";
}

helloAsync().then((res) => {
  console.log(res);
});

async function main() {
  const res = await helloAsync();
  console.log(res);
}
main();

8. API 호출

1) API

• API (Application Programming Interface)

  • 응용 프로그램 프로그래밍 인터페이스
  • 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
  • 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공

• API 과정

  • 1️⃣ 데이터 요청 (request)
  • 2️⃣ 데이터 검색 (Query)
  • 3️⃣ 데이터 찾기 (Query Result)
  • 4️⃣ 요청 데이터 전달 (Response)
    

// json 형식 데이터 처리 
async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();

📕 Node.js

1. Node.js

• React가 javascript의 라이브러리이기 때문
• 자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행
  • 자바스크립트는 웹브라우저에서만 실행될 수 있음
  • 브라우저는 HTML문서를 기반으로 동작함
    ➡️ 자바스크립트를 브라우저가 아닌 어디에서나 실행 가능하도록 node.js 개발
    
  • 자바스크립트로 WEB SERVER 개발 가능

2. Common JS

• 외부로 함수 내보내기

// 계산 기능을 하는 파일

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

// 모듈 단위로 객체 내보내기 가능 
module.exports = {
    moduleName: "calc module",
    add: add,
    sub: sub,
};

• 외부 함수 불러오기

// calc 함수 불러오기
const calc = require("./calc");

console.log(calc);
console.log(calc.add(1, 2));

3. Node.js 패키지 생성 및 외부 패키지 사용

1) npm

• npm (node package manager)
  • Node.js의 패키지 관리 도구
  • package를 위한 폴더 생성 후 npm init 실행
    ➡️ package.json 생성
    
• package.json
  • 생성할 패키지의 정보를 기록하는 환경설정 파일

{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js" // 추가 
  },
  "author": "soohykim",
  "license": "ISC"
}

• package-lock.json
  • 실제로 설치된 패키지의 정확한 버전 정보 저장

{
  "name": "package-example1",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "package-example1",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "randomcolor": "^0.6.2"
      }
    },
    "node_modules/randomcolor": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
    }
  }
}

• npm에서 Random Color 패키지 설치
  • npm i randomcolor

📕 React.js

1. React

1) 개념

• React
  • Component 기반의 UI 라이브러리
• Webpack
  • 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
• Babel
  • JSK 등 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
    

2) 사용 이유

• 1️⃣ 동일한 코드가 반복되다 보면 수정이 어려움

  • 컴포넌트로 파일을 분리하여 관리
  • 페이지를 재사용 해야할 때 수정할 부분이 줄어듦
    

• 2️⃣ 명령형 프로그래밍 ➡️ 선언형 프로그래밍
  

• 3️⃣ Virtual DOM

  • 브라우저가 실제로 사용하는 객체
    

• 자바스크립트가 요소를 추가하는 과정에서 발생하는 변화를 가상의 DOM에 적용시켜 렌더링 과정을 줄임
  

2. React APP 생성

• create-react

  • 생성 : npx create-react-app 프로젝트명
  • 실행 : npm start
    

• index.js

  • App이라는 document가 반환하는 값을 id = root인 요소의 밑에 렌더링함
  • public/index.html 내부에 id = root인 요소 존재함

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• App.js
  • HTML을 return 해주면서 컴포넌트 생성

import './App.css';

function App() {
  let name = "이";

  return (
    <div className="App">
      <header className="App-header">
        <h2> 안녕 리액트 {name} </h2>
      </header>
    </div>
  );
}

// 외부 파일에서 import를 통해 사용 가능
export default App;

3. JSX (Java Script eXtension)

1) 개념

• React에 컴포넌트를 생성해는데 유용
• JSX 문법은 자바스크립트의 변수/함수 값을 HTML에 쉽게 표현해서 사용 가능한 문법

2) 문법

• 1️⃣ 닫힌 태그 필요
  • self closing tag 사용 가능
  • <태그 />
• 2️⃣ 반드시 하나의 부모 태그(최상위 태그) 필요
  • <React.Fragment>로 대체 가능
  • import React from 'react'; 필요

3) CSS 사용

• 외부 CSS 파일
  • <div className="App"> 및 import './App.css';로 App.css 파일 적용

.App {
  text-align: center;
  background-color: #282c34;
}

h2 {
  color: red;
}

#bold_text {
  color: green;
}

• 인라인 스타일
  • <div style={style.App}>로 인라인 스타일 적용

import './App.css';

import MyHeader from './MyHeader';
import MyFooter from './MyFooter';

function App() {
  let name = "React";

  // 인라인 스타일
  const style = {
    App : {
      backgroundColor: 'black',
    },
    h2: {
      color: 'blue',
    },
    bold_text: {
      color: 'white',
    }
  }

  return (
    // inline style
    <div style={style.App}>
      {/* <div className="App"> */}
      <MyHeader />
      <header className="App-header">
        <h2> {name} </h2>
        <b id="bold_text">Java Script</b>
      </header>
      <MyFooter />
    </div>
  );
}

export default App;

4. State

1) 개념

• 계속해서 변화하는 상태에 따라 각각 다른 동작을 함
  • 상태가 바뀔 때마다 리렌더링 발생
• useState
  • 상태를 사용하기 위한 메서드 추가
  • 배열을 반환하고, 배열의 비구조화 할당을 통해 count(상태값), setCount(상태변화함수)를 상수로 받아 옴

import React, {useState} from "react";

const Counter = () => {
    // count 상태 : 0에서 출발, 1씩 증가/감소

    const [count, setCount] = useState(0); // 0은 상태 만드는데 초기값 설정

    const onIncrease = () => {
      setCount(count + 1);
    };

    const onDecrease = () => {
      setCount(count - 1);
    };

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

5. Props

• 컴포넌트에 데이터를 전달하는 방법

  • props가 바뀔 때 마다 리렌더링 발생

• props

  • props 객체에 값은 전달

• 객체 보내기 (App.js)

import './App.css';

import MyHeader from './MyHeader';
import MyFooter from './MyFooter';
import Article from './Article';
import Counter from './Counter';

function App() {

  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initialValue: 5,
  };

  return (
    <div>
      <MyHeader />
      {/* <Article /> */}
      <Counter {...counterProps}/>
      <MyFooter />
    </div>
  );
}

export default App;

• 객체 받기 (Counter.js)

import React, { useState } from "react";

const Counter = (props) => {
    // count 상태 : 0에서 출발, 1씩 증가/감소

    console.log(props);

    const [count, setCount] = useState(props.initialValue); // 0은 상태 만드는데 초기값 설정

    const onIncrease = () => {
      setCount(count + 1);
    };

    const onDecrease = () => {
      setCount(count - 1);
    };

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

📕 React 기본

1. 프로젝트 소개

1) 일기장

2) 상세 기능

2. 사용자 입력 처리

• DiaryEditor
  

1) 한 줄 입력 처리하기

• <input>
  • input 내용 관리하기 위해 useState 사용 (Author 변수, setAuthor 메서드 생성)
  • 변화하는 입력값을 value에 적용하기 위해 onChange 사용

2) 여러 줄 입력 처리하기

• <textarea>
  • input과 처리 방법 동일

3) 선택 박스 입력 처리하기

4) 사용자 입력 데이터 핸들링하기

. DOM 조작 (useRef)

. 배열 사용

1) 리스트 렌더링 (조회)

2) 데이터 추가

3) 데이터 삭제

4) 데이터 수정

. Lifecycle 제어 (useEffect)

. API 호출

. React developer tools

. 최적화

1) useMemo

2) React.memo

3) useCallback

4) 최적화 완성

. 복잡한 상태 관리 로직 분리 (useReducer)

. 컴포넌트 트리에 데이터 공급 (Context)

📖 참고 📖

• 🗒️ 예시

1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣
⬆️⬇️➡️

• 📋 코드 📋

• 📋 실행 📋
  

📕 React 실전 프로젝트

1

. 페이지 라우팅

1) React SPA & CSR

2) React Router 기본

3) React Router 응용

. 프로젝트 기초 공사

. 페이지 구현

1) 홈 (/)

2) 일기 쓰기 (/new)

3) 일기 수정 (/edit)

4) 일기 상세 (/diary)

. 버그 수정

. LocalStorage

. 프로젝트 최적화

. 배포 준비 & 프로젝트 빌드

. Firebase

. Open Graph 설정

📖 참고 📖

• 🗒️ 예시

1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣
⬆️⬇️➡️

• 📋 코드 📋

• 📋 실행 📋