리액트 심화

객체

• 객체는 {}안에 key:value 형태로 구성된다.

• {}안에는 여러 쌍의 프로퍼티를 넣을 수 있고, 여러 타입의 데이터를 넣을 수 있다.

• key는 무조건 문자형이다.

• value에는 모든 자료형이 들어갈 수 있다.

const로 선언된 객체

const로 선언된 값은 재할당 할 수 없다.

but, const로 선언된 객체는 재할당 할 수 있다!

객체의 프로퍼티는 보호되지 않아서 변경이 가능하다

함수

😎함수도 객체이며 JS에선 함수를 특별한 값(?) 취급을 한다.

JS는 ()가 있음연 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력한다.

이를 응용하면 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있다.
return 값은 기본적으로 undefined를 반환한다.

• 함수 표현식에서 this는 그 함수 자체
• 화살표 함수의 this는 부모를 불러온다

• 내부변수가 외부변수보다 우선 순위가 높다

콜백함수

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.

---

promise

콜백 헬을 해결하기 위한 방법

• 비동기 연산이 종료된 이후에 결과를 알기 위해 사용하는 객체
• 프로미스는 생성자 함수를 가지고 만든다 (new)
• 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.

const promise = new promise((resolve, reject) => {
    if(...){
        ...
        resolve("성공!");
    }
    else{
        ...
        reject("실패!");
    }
});

• pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행 성공(resolve가 호출된 상태)
• rejected: 수행 실패(reject가 호출된 상태)
• settled: 성공 or 실패(resolve나 reject가 호출된 상태)

---

async, await

promise를 더 편히 쓰게 해주는 키워드

---

세션 스토리지

• HTML5에서 추가된 저장소. key:value 형태의 저장소
• 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거가 된다.
• 따라서 유지해야되는 데이터들(장바구나, 자동로그인)을 넣기엔 어렵다.

---

로컬 스토리지

• 따로 지워주지 않는다면 브라우저를 닫아도 데이터가 제거되지 않는다.
• 중요한 정보는 넣지 않는게 좋다.
• 쿠키와 마찬가지로 key : value 형태의 저장소이다.

---

그렇다면 토큰은 어디에 저장하면 좋을까?

• 프로젝트의 성향에 맞춰 저장 장소는 그때그때 달라져야 한다.

• 각각 장단점이 있기 때문에 쿠키에 저장하는 경우도, 로컬 스토리지에 저장하는 경우도 있다.

---

오늘의 TMI

• 강의 듣다가 잡생각이 들면 바로 일시정지 눌러라~!