[스터디챌린지] React 기초(3)

방채원·2023년 7월 17일

React

목록 보기

3/6

(목표 수정)
3주차 - 리액트 복습 및 프로젝트 기획 => 리액트 기초(3)
4주차 - 해커톤 프로젝트 기획 및 역할 분담 => 리액트 기초(4)
5주차 - 해커톤 프로젝트(1) => 리액트 기초(5)
6주차 - 해커톤 프로젝트(2) => 메모장 프로젝트 (1)
7주차 - 해커톤 프로젝트(3) => 메모장 프로젝트 (2)
8주자 - 해커톤 프로젝트(4) => 웹 페이지 프로젝트 (1)
9주차 - 해커톤 프로젝트(5) => 웹 페이지 프로젝트 (2)

이유 : 해커톤 프로젝트 과정을 공유하려 했으나, 아이디어와 개발 과정이 노출, 악용될 가능성이 있어서 다른 소규모 프로젝트로 대체 !!

React

변수(Variable)와 프로퍼티(Property) 차이

실행 컨텍스트와 변수객체(VO)
- 자바 스크립트에서 코드는 Global Context(전역)와 Function Context(함수 영역)에서 실행된다.
- Global Context - 브라우저의 window 객체와 같이 전체 코드에서 1개만 생성됨
  Function Context - 각각의 함수 호출마다 생성됨
- 실행된 컨텍스트들은 각각 변수객체(VariableObject, VO)를 가지는데, 여기에 우리가 선언한 변수나 함수에 대한 정보가 담기게 된다. 다시 말해, 변수 or 함수를 선언하는 것은 VO에 프로퍼티를 만드는 것이다.
전역 컨텍스트와 함수 컨텍스트는 참조하는 변수객체가 다르다.
AbstractVO
|
|→ GlobalContextVO // Global Context의 변수객체(VO)는 전역객체이다.
| ( VO === this === global )
|
|→ FunctionContextVO // Function Context의 변수객체(VO)는 Activation Object(AO, 활성화 객체)이다.
| ( VO === AO )

즉, Global Context는 global을 참조하고 Function Context는 AO를 참조한다.

변수

var a = "Global Context";

function func(){
    var a = "Function Context";
    console.log(window.a); //Global Context
    console.log(a); //Function Context
}
func();

Global Context의 변수객체가 전역 개체(global)인 변수 a와 Function Context의 변수 객체가 활성화 객체인 변수 a. // window(=global)

프로퍼티
```
var a = "Hi";
window.a; //Hi
```
프로퍼티란, 객체 내에 포함(선언)되어 있는 변수이다. (멤버 변수라고도 한다)
위의 코드를 보면, a는 전역변수 이면서 window의 프로퍼티 이기도 하다.
```
//define as property, access as a variable
window.a = "1";
a; //1

//define as variable, access as a property
var b = "2";
window.b; //2
```
위와 같이, VO가 전역 객체(global)일 경우에는 상호작용 가능.

비동기 프로그래밍

지난번 시간 자바스크립트 복습 하는데 프로미스라는 개념이 어려워서 제대로 이해하려고 공부 start!

주로 서버에서 데이터를 가져올 때 사용

function first() {
  let value;

  setTimeout(() => {
    value = { name: "MaxlChan", age: 18 };
  }, 3000);  // 서버에서 데이터를 가지고 오는 과정이라 가정(몇초가 걸리는 지 실제로는 모름)

  return value;
}

console.log(first()); // undefined

=> value 데이터가 할당되기 전에 first() 함수가 호출되므로 undefined 출력한다.

실제로 API 데이터를 가져올 때 데이터가 언제 할당되는지 알 수 없으므로 콜백 함수, promise, async/await 등의 방법으로 데이터를 핸들링한다.

setTimeout() ?

코드를 바로 실행하지 않고 일정 시간 기다린 후에 실행하는 경우 사용하는 함수이다.
첫 번째 인자 - 실행할 코드를 담은 함수를 받음
두 번째 인자 - 지연 시간 (ms 단위)
(일반적으로는 두 번째 인자까지만 받는다)
세,네 번째 인자 - 첫 번째 인자로 넘어온 함수가 매개변수(인자)를 받는 경우 ...
(예시 : add(a,b)일 경우 a,b를 세,네 번째 인자로 받는다.)
```
function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 3, 4);
```
화살표 함수로 표현

  const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);

콜백 함수

나중에 호출할 함수를 의미

function first(callback) {
  let value;

  setTimeout(() => {
    value = { name: "MaxlChan", age: 18 };
    callback(null, value);
  }, 4000);
}

first(function (error, value) {
  if (error) {
    // 데이터 송신이 실패할 가능성은 언제나 있기 때문에, 콜백 함수는 에러를 핸들링할 수 있어야 한다.
  } else {
    console.log(value); // { name: "MaxlChan", age: 18 }
  }
});

=> first 함수는 callback 함수를 인자로 받아, 비동기 처리가 끝난 후 콜백함수를 실행하여 정상적으로 데이터를 가져온다.

그런데 만약 그 가지고 온 값을 활용하기 위해 또 특정 비동기 콜백함수(편의상 1 함수로 명명)를 실행해야되는 상황이라면?
1 함수를 통해 가지고 온 값을 또 활용하기 위해 특정 비동기 콜백함수(편의상 2 함수로 명명)를 실행해야되는 상황이라면?
2 함수를 통해 가지고 온 값을 또 활용하기 위해 특정 비동기 콜백함수(편의상 3 함수로 명명)를 실행해야되는 상황이라면?

function first(callback) {
  let value;

  setTimeout(() => {
    value = { name: "MaxlChan", age: 18 };
    callback(null, value);
  }, 4000);
}

first(function callbackOne(error, value) {
  if (error) {
    // ErrorHandling
  } else {
    second(value, function callbackTwo(error, value) {
      if (error) {
        // ErrorHandling
      } else {
        third(value, function callbackThree(error, value) {
          if (error) {
            // ErrorHandling
          } else {
            console.log(
              `Final value is ${value}. Here is end of Callback hell...`
            );
          }
        });
      }
    });
  }
});

=> Callback Hell이 발생

Promise

실행이 잘 성공했는 지, 실패 했는 지, 성공 or 실패의 결과 값은 무엇인지
위의 세 가지 내용을 비동기 작업이 종료된 후 반환해주겠다고 약속해주는 객체이다.

const successPromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Success");
  }, 3000);
}); // 비동기 작업 완료 후, 성공 값 "Success"를 가진 프로미스 객체(인스턴스)를 생성하고 변수에 할당

const failurePromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    reject(new Error("Request is failed"));
  }, 3000);
}); // 실패 값 new Error("Request is failed")를 가진 프로미스 객체(인스턴스)를 생성하고 변수에 할당

=> 프로미스는 콜백함수를 인자로 받는다. 인자로 받아지는 함수를 executor(실행자)라고 부른다. 해당 실행자 함수는 두 가지 함수(resolve, reject)를 인자로 받는다.
(비동기 작업 성공 -> resolve / 비동기 작업 실패 -> reject) 두 함수 중 하나를 함수를 호출한다.

promise 객체의 3가지 상태 = 대기(pending)/이행(fulfilled)/거부(rejected)
프로미스 객체의 결과값은 내부객체이기 때문에 then과 catch로만 접근이 가능하다.

then

프로미스가 이행 상태일 때 실행되는 메소드이다.
첫 번째 인자로 함수를 받고, 그 함수의 인자는 프로미스의 성공 결과 값을 받는다.

const successPromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Success");
  }, 3000);
});

successPromise.then(function (value) {
  console.log(value); // value인자가 결과 값 "Success"임.
});

successPromise.then((value) => console.log(value)); // 위와 동일한 코드

rejected 되었을 때도 then으로 제어할 수 있지만, 주로 catch 메소드를 사용한다.

catch

프로미스가 거부 상태일 때 실행되는 메소드이다.
첫 번째 인자로 함수를 받고, 그 함수의 인자는 프로미스의 거부 결과 값을 받는다.

const failurePromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    reject(new Error("Request is failed"));
  }, 3000);
});

failurePromise
  .then(function (value) { // 거부(실패)된 프로미스는 then 메소드를 통과하고 
    console.log(value);
  })
  .catch(function (error) {
    console.log(error); 
  }); // catch메소드를 실행. error인자가 거부 결과 값임.

failurePromise
  .then((value) => console.log(value))
  .catch((error) => console.log(error)); // 위와 동일한 코드