CSS의 Cascading은 스타일 적용 시 우선순위에 따라 스타일이 결정되며, 중요도, 명시도, 소스 순서가 영향을 미칩니다.

✅시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 태그는 코드의 가독성을 높이고, SEO와 웹 접근성을 향상시킵니다.

✅사용자가 브라우저 font-size를 변경하였을 때, 이에 대응해서 웹 화면의 요소가 크거나 작아지도록 하려면 어떻게 스타일링 하면 좋을까요?

rem 또는 em 단위를 사용해 브라우저 폰트 크기에 따라 요소 크기를 유동적으로 조정할 수 있습니다.

rem 은 항상 루트 폰트 사이즈를 참조합니다. 일반적인 브라우저 기본 폰트 크기가 16px이고 이를 이용하면 사용자가 브라우저 폰트 크기 설정을 변경하지 않는 일반적인 경우, 1rem 은 16px 크기라 보고 스타일링 하면 됩니다.

✅position의 속성들과 각각의 특징을 설명해 주세요.

• static: 기본 값으로 위치 지정 없음.
• relative: 요소의 원래 위치를 기준으로 이동.
• absolute: 부모 요소를 기준으로 이동.
• fixed: 뷰포트를 기준으로 고정.
• sticky: 스크롤에 따라 상대적 또는 고정 위치가 적용됩니다.

  ✅Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요.

• merge: 일반적으로 많이 사용하는 merge 방법이며, 커밋 이력을 모두 남길 때 사용합니다. 장점이자 단점은 모든 커밋과 분기했던 branch 히스토리가 남는다는 점입니다.
• Squash & Merge: 분기했던 branch에 있던 내용 a, b, c 커밋을 모두 합쳐 하나의 새로운 커밋을 만듭니다. 지저분한 커밋 히스토리들을 하나로 합쳐서, 기능상 의미있는 하나의 커밋만 남길 때 사용합니다.
• Rebase & Merge: 분기했던 branch의 기준을 최신 Base로 설정하고, merge하는 방법. 머지 커밋을 남길 필요가 없는 merge의 경우 사용하면 좋습니다. 커밋 그래프가 하나의 라인으로 그려져 가독성에 좋습니다.

✅Git Flow 브랜치 전략에 대해 설명해 주세요.

master는 프로덕션 릴리즈 브랜치, develop은 개발 브랜치로, feature, release, hotfix 브랜치로 기능 개발과 버그 수정을 관리하는 전략입니다.

• 안정적인 배포를 위한 구조가 갖춰져 있습니다.
• 긴 개발 주기에 적합하며, 복잡한 기능 개발과 버그 수정에 유용합니다.
• 배포 전 마무리 작업과 테스트를 위한 release 브랜치를 사용할 수 있습니다.
• 브랜치가 많아지고 관리해야 할 작업이 증가할 수 있습니다. 이를 보완하기 위한 git flow 도구가 있을 정도죠.
• 작은 규모의 프로젝트에서는 비효율적일 수 있습니다.

✅자바스크립트에서 ==와 ===가 어떻게 다른지 설명해 주세요.

==는 타입 변환을 허용한 비교, ===는 타입과 값 모두를 엄격하게 비교합니다.

== 는 암묵적 형변환이이 일어나는데, 암묵적 형변환이 일어날 것을 모두 기억하거나 예측하는 것이 어렵기 때문에, 의도하지 않은 결과를 얻게 될 가능성이 크고 이로 인해 오류 가능성이 커집니다. 따라서 동등함을 비교하기 위해서 === 를 사용하는 것이 좋습니다.

✅자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.

얕은 복사는 객체의 참조만 복사해 원본과 복사본이 같은 객체를 가리키는 방식입니다. 반면, 깊은 복사는 객체의 모든 속성을 새로 복사해 독립적인 객체를 생성하는 방식입니다.

✅var, let, const를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

• 중복 선언: var는 중복 선언이 가능하지만, let과 const는 불가능합니다.
• 스코프: var는 함수 스코프를 따르고, let과 const는 블록 스코프를 따릅니다.
• 호이스팅: var는 선언과 초기화가 동시에 호이스팅되고, let과 const는 선언만 호이스팅되어 초기화 전에 접근하면 에러가 발생합니다.

✅브라우저가 어떻게 동작하는지 설명해 주세요.

브라우저는 URL을 입력하면 해당 서버에 HTTP 요청을 보내고, 서버로부터 HTML, CSS, JavaScript 파일을 받아 해석하여 DOM 트리와 렌더 트리를 생성하고 화면에 렌더링합니다.

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
2. Render Tree 생성
3. Layout
4. Paint

✅이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.

• 이벤트 버블링: 이벤트가 하위 요소에서 상위 요소로 전파됩니다.
• 이벤트 캡쳐링: 이벤트가 상위 요소에서 하위 요소로 전파됩니다.
• 이벤트 위임: 상위 요소에 이벤트 리스너를 설정해 하위 요소들의 이벤트를 처리하는 방식입니다.

  ✅자바스크립트에서 this에 대해 설명해 주세요.

  this는 함수가 호출될 때의 실행 문맥에 따라 값이 결정됩니다. 일반 함수에서는 전역 객체를 가리키고, 메서드에서는 해당 객체를 가리키며, 화살표 함수에서는 상위 스코프의 this를 가리킵니다.

✅렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.

렉시컬 스코프는 함수가 정의될 때의 스코프 체인을 기준으로 변수의 유효 범위가 결정되는 것을 의미합니다. 즉, 함수 호출 위치가 아닌 정의 위치에 따라 변수를 참조합니다.

✅HTTP 메소드에 대해 설명해 주세요.

• GET: 서버에서 데이터를 요청할 때 사용합니다.
• POST: 서버에 데이터를 제출할 때 사용합니다.
• PUT: 서버의 데이터를 업데이트할 때 사용합니다.
• DELETE: 서버의 데이터를 삭제할 때 사용합니다.

• PATCH: 기존 리소스의 부분적인 수정을 위한 메소드
• HEAD: 특정 리소스를 GET 메소드로 요청했을 때 돌아올 헤더를 받기 위한 메소드
• OPTIONS: 주어진 URL 또는 서버에 대해 허용된 통신 옵션을 받기 위한 메소드
• CONNECT: 요청한 리소스에 대해 양방향 연결을 시작하는 메소드

✅예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요.

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

자바스크립트는 싱글 스레드 기반의 언어입니다. 여기서 스레드란 작은 단위의 실행 흐름을 말합니다. 자바스크립트 엔진을 간단히 살펴보면 위와 같이 Memory Heap과 Call Stack(자료구조에서 배우게 될 stack처럼 구현된 저장소)으로 구성되어 있는데요. 하나의 스레드에서 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고, 다음에 어떤 함수가 호출되어야 하는지 등을 제어합니다.

• 1번 실행으로 num 에 1이 할당됩니다.
• 2번 실행으로 setTimeout 을 Web API(NodeJS의 경우 Timers 모듈)가 처리하도록 넘깁니다. 이때 중요한 건, 즉시 setTimeout 에 있는 callback을 실행할지 판단하지 않습니다. 따라서 num 은 여전히 1인 상태입니다.
• 한편, Web API에서는 setTimeout 작업이 완료되면 setTimeout callback 함수를 Callback Queue에 등록합니다.
• 3번 실행으로 num 에 3이 재할당됩니다.
• 4번 실행으로 화면에 3이 출력됩니다.
• 이렇게 모든 실행을 마치면, 그 후에 Event Loop를 돌아 Callback Queue에 있는 callback 함수를 Call Stack으로 가져와 실행하고 num 은 2가 재할당됩니다.

✅프로토타입 체인에 대해 설명해 주세요.

프로토타입 체인은 객체가 다른 객체의 속성이나 메서드를 상속받을 수 있도록 연결된 구조입니다. 자바스크립트는 프로토타입을 통해 객체 간 상속을 구현하며, 객체가 다른 객체의 프로토타입을 참조할 수 있습니다.

✅AJAX에 대해 설명해 주세요.

AJAX는 비동기적으로 서버와 통신해 전체 페이지를 새로고침하지 않고도 데이터 일부를 업데이트할 수 있는 기술입니다. 주로 XML, JSON 형식의 데이터를 서버에서 받아와 웹페이지에 적용합니다.

✅시간복잡도와 공간복잡도에 대해 설명해 주세요.

• 시간복잡도: 알고리즘의 실행 시간이 입력 크기에 따라 어떻게 변하는지 분석합니다.
• 공간복잡도: 알고리즘이 사용하는 메모리 양을 입력 크기에 따라 분석합니다.

✅자바스크립트 실행 컨텍스트(Execution context)에 대해 설명해 주세요.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하며, 변수, 함수 선언, this 등의 정보를 포함합니다. 실행 컨텍스트는 콜 스택에 쌓여서 실행됩니다.

✅해시 테이블과 해시 함수에 대해 설명해 주세요.

해시 테이블은 데이터를 키-값 쌍으로 저장하는 자료구조로, 해시 함수를 사용해 키를 해시값으로 변환하여 저장 위치를 결정합니다. 이를 통해 빠른 데이터 검색이 가능합니다.

✅정적 배열과 동적 배열을 비교해 설명해 주세요.

정적 배열: 크기가 고정되어 있으며, 선언 시 메모리가 미리 할당됩니다. 동적 배열: 크기가 가변적이며, 필요에 따라 메모리가 동적으로 할당됩니다.

✅리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

Virtual DOM은 실제 DOM을 가상으로 표현한 객체로, 변경 사항을 최소화하여 효율적인 업데이트를 위해 사용합니다. 가상 DOM 생성 후 이전 가상 DOM과 비교 후 바뀐 부분만 DOM에 업데이트한다.

리액트는 Virtual DOM을 활용해 UI의 이상적인 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화 합니다. 이 과정을 재조정(Reconciliation)이라고 합니다. 이렇게 연산이 끝난 뒤 최종적인 변화를 실제 DOM에 반영해서 여러 번 reflow, repaint가 발생할 수 있는 작업을 한번으로 줄여줍니다. 또한, Virtual DOM은 변화에 대한 관리를 자동화하고 추상화해서 작업의 편의성을 제공합니다.

✅리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

key는 배열의 요소를 고유하게 식별해, 리액트가 변화를 효율적으로 감지하고 렌더링 성능을 최적화할 수 있게 합니다.

리액트는 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, 리액트는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. key 는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key 는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key 는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 가장 좋습니다. 대부분의 경우 데이터의 id를 key 로 사용합니다. key는 배열의 항목들 사이(형제 사이)에서 고유하면 되고, 전역에서 고유할 필요는 없습니다.

✅리액트 생명주기(life cycle)에 대해 설명해 주세요.

리액트 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 나타내며, 주요 단계로는 Mounting, Updating, Unmounting이 있습니다.

✅웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

• CSR: 클라이언트에서 렌더링, 초기 로딩은 느리지만 이후 빠름. SPA에 적합.

• SSR: 서버에서 렌더링, 초기 로딩이 빠르고 SEO에 유리. 자주 변하는 콘텐츠에 적합.

• SSG: 정적 페이지를 생성, 속도가 매우 빠르고 CDN에 적합. 자주 변하지 않는 콘텐츠에 유리.

  ✅본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

• 장점: 컴포넌트 단위로 스타일을 관리해 유지보수가 쉽고, 동적 스타일 적용에 유리합니다.

• 단점: 런타임에서 스타일을 처리하므로 성능 저하가 있을 수 있고, 파일 크기가 커질 수 있습니다.

  ✅Presentational & Container 디자인 패턴에 대해 설명해 주세요.

Presentational 컴포넌트는 UI에만 집중하고, Container 컴포넌트는 상태 관리와 로직을 처리하는 패턴으로, 관심사의 분리를 통해 유지보수성과 재사용성을 높입니다.

✅JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.

TypeScript는 정적 타입을 지원해 코드의 안정성과 가독성을 높이고, 개발 중 오류를 사전에 방지할 수 있습니다.

이런 TypeScript의 특징을 통해 컴파일 단계에서 오류를 포착할 수 있고, 코드를 통해 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드의 흐름을 이해하기 쉽고 협업에 도움이 됩니다.

이 밖에도 vscode와 같은 IDE를 통해 인텔리센스 활용이 가능해지고, 인터페이스, 제네릭 등을 지원해 객체지향 프로그래밍에 도움을 줍니다.

✅TypeScript의 동작 원리에 대해 설명해 주세요.

TypeScript는 정적 타입 검사 기능을 제공하는 JavaScript의 상위 집합 언어입니다. 코드를 컴파일할 때 타입 오류를 감지하고, 이 과정에서 JavaScript로 변환되어 브라우저에서 실행됩니다. 런타임에 타입이 제거되므로 브라우저에서는 일반적인 JavaScript로 동작합니다.

✅리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.

React는 클라이언트 사이드 렌더링(CSR)을 주로 처리하지만, Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅 기능을 내장하여 SEO와 초기 로딩 성능을 개선할 수 있습니다. 이 외에도 API 라우팅, 이미지 최적화 같은 추가 기능을 제공합니다.

기본적으로 순수 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 합니다. 웹 사이트를 요청할 때 현재 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩합니다. 이로 인해 앱의 첫 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO(Search Engine Optimization)에 취약 하다는 단점이 있습니다.

• 프리렌더링
  • 기본적으로 프리렌더링을 지원합니다. 데이터의 성격에 따라 getStaticProps를 활용해 빌드 단계에서 데이터를 받아 정적 생성 또는 SSR(Server Side Rendering)할 수 있습니다. 이를 통해 이미 렌더링된 html 문서를 가져올 수 있어서 첫 로딩이 빨라져 유저 경험에 좋고, SEO에도 강점이 있습니다.
• 이미지 최적화
  • Image 컴포넌트를 통해 필요한 크기에 맞는 이미지를 제공하고, lazy-loading을 통해 필요한 순간 이미지를 가져와 최적화 합니다.
• Client side navigation
  • Link 컴포넌트를 통해 페이지 이동할 때 페이 전체를 불러오는 것이 아니라 필요한 데이터만 가져오기 때문에 이동 속도도 빨라지고, 넘어가는 동작도 부드럽습니다.
• 코드 스플리팅
  • Webpack과 같은 번들러 설정과 import() 문법, lazy, Suspense 사용없이도 빌드 과정에서 페이지 단위로 자동으로 코드 스플리팅을 지원합니다.
• 개발자 경험
  • 파일 시스템 라우팅, 리다이렉트, 스타일링을 위한 환경 설정(Sass, CSS Modules, Tailwind 등)등을 제공해 좋은 개발자 경험을 제공합니다.

✅Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

SSR에서는 서버가 요청을 받으면 React 컴포넌트를 서버에서 렌더링해 HTML을 클라이언트로 전송합니다. 클라이언트는 이 HTML을 초기 화면으로 사용하고, 그 이후에 React가 클라이언트에서 해당 HTML을 재사용하며 인터랙티브 기능을 활성화하는 과정을 hydration이라고 합니다.

✅CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

CORS(Cross-Origin Resource Sharing) 에러는 클라이언트가 다른 도메인으로 요청할 때 서버가 해당 도메인에서 오는 요청을 허용하지 않아 발생합니다. 이를 해결하려면 서버에서 응답 헤더에 Access-Control-Allow-Origin을 설정해 허용할 도메인을 명시해야 합니다.

• 먼저 백엔드 서버 개발자에게 에러가 발생하는 출처를 허용하도록 Access-Control-Allow-Origin 설정을 요청하는 방법이 있습니다.
• CORS 허용을 위한 설정 요청을 할 수 없는 경우, 동일 출처 정책을 강제하지 않는 proxy 서버를 활용해 우회하는 방법이 있습니다. Next.js의 경우 rewrites 를 활용할 수 있습니다

✅SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.

SEO(Search Engine Optimization)는 검색 엔진에서 웹사이트의 가시성을 높이기 위한 작업입니다. SEO 개선을 위해 메타 태그 작성, 시맨틱한 HTML 사용, 페이지 로딩 속도 최적화, 서버 사이드 렌더링(SSR) 등을 활용할 수 있습니다.

✅클로저가 무엇인지 그리고 JavaScript에서 어떤 경우에 활용하면 좋을지 예시와 함께 설명해 주세요.

클로저는 함수가 생성될 때 자신의 스코프 외부에 있는 변수를 기억하고, 그 변수를 함수가 종료된 후에도 접근할 수 있는 개념입니다. 예를 들어, 함수 내부에서 변수를 캡처하여 반환하는 패턴으로, 비공개 데이터를 저장하거나 함수 상태를 유지할 때 유용합니다.

function makeCounter() {
  let count = 0;
  return function () {
    return ++count;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

✅세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요.

• 세션 기반 인증: 서버가 사용자 로그인 정보를 서버에 저장하고 세션 ID를 브라우저 쿠키로 전달해 인증합니다. 서버 측 부담이 큽니다.
• 토큰 기반 인증: 로그인 시 서버가 JWT 같은 토큰을 발급하고, 클라이언트가 이후 요청에 이 토큰을 보내 인증합니다. 서버는 상태를 저장하지 않아 확장성이 좋습니다.

✅Authorization Code를 활용하는 구글 소셜 로그인을 실행하기까지 유저, 프론트엔드, 백엔드, OpenID Connect 프로바이더 사이에 어떤 과정을 거치는지 설명해 주세요.

1. 유저가 프론트엔드에서 구글 로그인 버튼을 클릭합니다.
2. 프론트엔드가 구글의 OpenID Connect 프로바이더에 인증 코드를 요청합니다.
3. 유저는 구글 로그인 페이지에서 인증을 완료하고, 구글이 프론트엔드에 Authorization Code를 반환합니다.
4. 프론트엔드는 이 코드를 백엔드로 전송하고, 백엔드는 구글에 이 코드를 제출해 액세스 토큰과 ID 토큰을 받습니다.
5. 백엔드는 받은 토큰을 통해 유저 정보를 확인하고, 로그인 처리를 완료합니다.

✅React Query가 만들어진 이유와 React Query를 사용할 때 얻게 되는 이점에 대해 설명해 주세요.

React Query는 서버 상태 관리의 복잡성을 줄이기 위해 만들어졌습니다. 서버 데이터의 캐싱, 동기화, 업데이트를 자동으로 처리하며, 비동기 요청의 로딩, 에러 처리, 데이터 패칭을 쉽게 관리할 수 있습니다. 이를 통해 코드의 복잡성이 줄고 성능이 향상됩니다.

✅서버 상태와 클라이언트 상태의 차이에 대해 설명해 주세요.

• 서버 상태: 서버에 저장된 데이터로, 클라이언트에서 요청을 통해 가져와야 하는 상태입니다. 변경 사항은 서버와 동기화가 필요합니다.
• 클라이언트 상태: 사용자 인터페이스와 관련된 데이터로, 서버와 상관없이 클라이언트에서만 관리하는 상태입니다.

✅Storybook을 사용할 때 기대할 수 있는 장점에 대해 설명해 주세요.

Storybook을 사용하면 컴포넌트를 독립적으로 개발하고 테스트할 수 있으며, 팀원과 컴포넌트 라이브러리를 공유하기 쉽습니다. 또한, 각 컴포넌트의 다양한 상태를 미리보기로 확인할 수 있어 개발 효율성과 협업이 개선됩니다.

✅테스트 코드를 작성하면서 개발할 때 장점과 단점에 대해 설명해 주세요.

• 장점: 코드의 안정성이 높아지고, 리팩토링 시 오류를 미리 방지할 수 있으며, 유지보수가 쉬워집니다.
• 단점: 초기 개발 속도가 느려질 수 있으며, 테스트 코드 유지에도 시간이 필요합니다.

실행 컨텍스트는 두 가지 주요 구성 요소인 Lexical Environment와 Variable Environment로 이루어져 있다.

2-2.VariableEnvironment

• VariableEnvironment 에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행 시의 스냅샷을 유지한다는 점이 다르다.

• 실행 컨텍스트를 처음 생성할 때 VariableEnvironment에 정보를 먼저 담고, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다.
• 내부는 environmentRecord와 outer-EnvironmentReference로 구성되어있다.

📘역할

• VariableEnvironment는 변수 선언(var, let, const)과 관련된 정보를 저장한다.
• 변수 선언 시 VariableEnvironment에 해당 변수의 정보가 저장된다.
• VariableEnvironment는 변수의 값을 관리하고 접근할 수 있게 한다.

📘구조

• VariableEnvironment는 environmentRecord와 outer 속성으로 구성된다.
• environmentRecord는 변수 선언 정보를 저장한다.
• outer 속성은 상위 VariableEnvironment에 대한 참조를 가진다.

  📘활용

• VariableEnvironment를 통해 변수의 값을 관리하고 접근할 수 있다.
• 변수 선언 및 할당, 변수 값 참조 등의 작업이 VariableEnvironment를 통해 이루어진다.

2-3. LexicalEnvironment

📘역할

• 코드의 구문 구조와 관련된 정보를 저장한다.
• 함수 선언, 변수 선언 등 코드의 구조적 정보가 LexicalEnvironment에 저장된다.
• 변수와 함수의 스코프 정보를 관리한다.

📍environmentRecord와 호이스팅

• environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.
• 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집한다.
• 실행 컨텍스트가 코드를 실행하기 전에 이미 변수 정보를 모두 수집함. 즉, 코드 실행 전에도 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고있다. -> 호이스팅

  호이스팅

  • 변수와 함수 선언이 코드 실행 전에 메모리 공간에 할당되는 현상
  • 변수 선언의 경우, var 키워드로 선언된 변수는 undefined로 초기화되지만, let과 const 키워드로 선언된 변수는 초기화되지 않는다.
  • 함수 선언의 경우, 함수 전체가 메모리에 할당되지만, 함수 표현식은 호이스팅되지 않는다.

🔖변수 호이스팅

function a (x) { 
    console.log(x); //------------ (1)
    var x;
    console.log(x); //------------ (2)
    var x = 2;
    console.log(x); //------------ (3)
}

a(1)

1
undefined
2

를 예상했지만?

실제 결과는?

1
1
2

function a (x) { 
    var x;  // 수집 대상 1의 변수 선언 부분
    var x;  // 수집 대상 2의 변수 선언 부분
    var x;  // 수집 대상 3의 변수 선언 부분

    x = 1;  // 수집 대상 1의 할당 부분
    console.log(x); //------------ (1)
    console.log(x); //------------ (2)
    x = 2; // 수집 대상 2의 할당 부분
    console.log(x); //------------ (3)
}

a(1)

호이스팅을 할 때 변수는 선언부와 할당부를 나누어 ‘선언부'만 끌어올린다!!

📍함수 선언문과 함수 표현식

함수선언문

• function 정의부만 존재하고 별도의 할당 명령이 없는 것
• 함수명이 반드시 정의되어 있어야 함

함수표현식

• 정의한 function을 별도의 변수에 할당하는 것
• 함수명 없어도 됨

  기명 함수표현식: 함수명 정의한 것 익명 함수표현식: 함수명 정의 안 한 것

❓함수 선언문과 함수 표현식의 호이스팅 차이

함수 선언문

• 호이스팅의 영향을 받습니다.
• 변수 선언과 함께 함수 전체가 호이스팅되어 함수를 선언하기 전에도 호출할 수 있다.

  console.log(a()); // Output: "Hello, world!"
  

function a() { return "Hello, world!"; }

함수 표현식
- 호이스팅의 영향을 받지 않습니다.
- 변수 선언만 호이스팅되고, 함수 할당은 호이스팅되지 않는다.
- 함수 표현식을 사용하는 경우 함수를 선언하기 전에는 호출할 수 없다.
```js
console.log(a()); // TypeError: a is not a function

var a = function() {
  return "Hello, world!";
};

📍스코프, 스코프 체인, outerEnvironmentReference

📘스코프

• 식별자(변수, 함수)에 대한 유효범위
• ES5 까지의 자바스크립트는 전역 공간을 제외하면, 오직 함수에 의해서만 스코프가 생성된다.

📘스코프의 종류

전역 스코프(Global Scope)

• 전역 변수: 전역 공간에서 선언한 변수(어디서든 접근할 수 있는 변수)
• 전역 함수: 어디서든 호출할 수 있는 함수

  전역 스코프는 피하는 것이 좋다. 변수 충돌, 메모리 누수 등의 문제가 발생할 수 있다.

var globalVar = 'Hello, global!';

function globalFunc() {
  console.log(globalVar); // 'Hello, global!'
}

globalFunc();

지역 스코프(Local Scope)

• 지역 변수: 함수 내부에서 선언한 변수
• 함수 스코프: 함수 내부에서만 유효한 변수와 함수
• 블록 스코프: { } 내부에서만 유효한 변수와 함수 (ES6 let, const 도입)

  지역 스코프를 사용하면 변수 충돌을 방지하고 메모리 관리를 효율적으로 할 수 있다.

function localFunc() {
  var localVar = 'Hello, local!';
  console.log(localVar); // 'Hello, local!'
}

localFunc();
console.log(localVar); // ReferenceError: localVar is not defined

렉시컬 스코프(Lexical Scope)

• 함수가 정의된 위치에 따라 결정되는 스코프
• 함수 내부에서 외부 변수에 접근할 수 있다.

var x = 5;

function outer() {
  var x = 10;
  function inner() {
    console.log(x); // 10
  }
  inner();
}

outer();
console.log(x); // 5

inner() 함수는 outer() 함수 내부에 정의되어 있기 때문에, inner() 함수 내부의 x는 outer() 함수의 지역 변수 x를 참조한다.

📗스코프 체인

• 변수와 함수를 찾는 과정에서 스코프가 중첩되어 계층적으로 구성된 구조
• 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것 -> outerEnvironmentReference가 함

  var x = 5; // 전역 스코프
  

function outer() { var x = 10; // outer 함수 스코프 function inner() { console.log(x); // 10 (outer 함수 스코프의 x) } inner(); }

outer(); console.log(x); // 5 (전역 스코프의 x)

```

1. 전역 변수 x가 선언
2. outer() 함수 내부에서 지역 변수 x가 선언
3. inner() 함수 내부에서 x를 참조하면, 가장 가까운 스코프인 outer() 함수 스코프의 x를 찾아 10을 출력한다.
4. outer() 함수 실행이 끝나면 전역 스코프로 돌아간다.
5. 전역 변수 x의 값인 5가 출력된다.

스코프 체인은 변수와 함수를 찾는 과정에서 스코프가 중첩되어 계층적으로 구성된 구조다. 자바스크립트 엔진은 코드를 실행하기 전에 스코프 체인을 구성하며, 변수와 함수를 찾을 때 스코프 체인을 따라 올라가며 검색한다. 의도치 않은 변수 값 변경을 방지하고 효율적인 메모리 관리를 할 수 있다. 또한 렉시컬 스코프 규칙에 따라 함수가 선언될 때의 환경을 기반으로 변수와 함수를 찾는 방식을 사용한다.

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
• 동일 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택(call stack)에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.
• 실행 컨텍스트를 구성하는 방법: 함수를 실행하는 것

실행 컨텍스트와 콜 스택 예시)

var a = 1;
function outer() {
    function inner() {
        console.log(a); // undefined
        var a = 3;
    }
    inner();
    console.log(a);  // 1
}
outer();
console.log(a);    // 1

1. 전역 실행 컨텍스트가 생성되고, 전역 변수 a가 1로 초기화
2. outer 함수가 호출되면 새로운 실행 컨텍스트가 생성된다.
3. inner 함수가 정의되고, inner 함수 실행 컨텍스트가 outer 함수 실행 컨텍스트 내부에 생성된다.
4. inner 함수가 호출되면 새로운 실행 컨텍스트가 생성된다. inner 함수 내부에서 a 변수가 선언되지만 초기화되지 않아 undefined가 출력된다. 이후 a 변수가 3으로 초기화된다.
5. inner 함수 실행이 종료되면 해당 실행 컨텍스트가 제거된다.
6. outer 함수 내부의 console.log(a)에서 전역 변수 a의 값인 1이 출력된다.
7. outer 함수 실행이 종료되면 해당 실행 컨텍스트가 제거된다.
8. 전역 실행 컨텍스트에서 console.log(a)가 실행되어 전역 변수 a의 값인 1이 출력된다.

전역컨텍스트

• 전역 컨텍스트는 자바스크립트 코드 실행의 시작점이 되는 실행 컨텍스트
• 브라우저에서는 window 객체가, Node.js에서는 global 객체가 전역 컨텍스트를 나타낸다.

실행컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다.

• VariableEnvironment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 선언시점의 LexicalEnvironment의 스냅샷으로, 변경사항은 반영되지 않음.
• LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경사항이 실시간으로 반영됨
• ThisBinding: this 식별자가 바라봐야 할 대상 객체.

📍클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)

• 브라우저에서 JavaScript를 실행하여 페이지를 렌더링하는 방식
• 초기 로딩 시간이 느리지만, 이후 동적 업데이트가 빠름
• 검색 엔진 최적화(SEO)가 어려움
• 단일 페이지 애플리케이션(SPA)에 적합

  단일 페이지 애플리케이션(SPA), 동적 UI 업데이트가 중요한 경우

📍서버 사이드 렌더링 (SSR, Server-Side Rendering)

• 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식
• 초기 로딩 속도가 빠르고 SEO에 유리
• 서버 부하가 증가할 수 있음
• 동적 업데이트가 상대적으로 느림

  검색 엔진 최적화(SEO)가 중요한 경우, 초기 로딩 속도가 중요한 경우

📍정적 사이트 생성 (SSG, Static Site Generation)

• 빌드 시점에 HTML 파일을 생성하여 제공하는 방식
• 초기 로딩 속도가 매우 빠르고 SEO에 유리
• 동적 콘텐츠 업데이트가 어려움
• 정적 웹사이트에 적합

  정적 콘텐츠 중심의 웹사이트, 빠른 초기 로딩 속도가 중요한 경우

❓ 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

CSS-in-JS란?

• CSS-in-JS는 JavaScript 코드 내에서 CSS 스타일을 작성하는 방식

예시) styled component

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

장점

• 컴포넌트 단위로 스타일을 관리할 수 있어 유지보수가 용이
• 동적 스타일 적용이 쉬움
• 코드 스플리팅을 통한 성능 향상
• 스타일 충돌 방지

단점

• 초기 로딩 시간이 길어질 수 있음
• 개발자 경험이 기존 CSS 방식과 다름
• 서버 사이드 렌더링(SSR) 시 추가 작업이 필요

사용자가 성공적인 로그인을 하면 서버는 클라이언트에 인증서를 보낸다. 클라이언트가 이 인증서를 가져오면 어떤 사람인지 구별하는 것이다. 클라이언트는 리퀘스트를 보낼 때마다 이 인증서를 함께 보내야 한다. → 이럴 때 쿠키를 쓴다.

• 서버로부터 리스폰스로 쿠키를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아도 알아서 웹 브라우저가 알아서 저장하고 리퀘스트를 보낼 때도 웹 브라우저가 알아서 보낸다.
• 자바스크립트를 통해서 쿠키 값을 추가, 수정, 참조할 수 있다.
• 수명을 지정할 수 있다. 수명이 다한 쿠키는 알아서 지워진다.

📍사용법

📘서버에서 리스폰스할 때

서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장한다.

Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

여기서 맨 앞의 session-id 는 쿠키의 Key에 해당하는 값

1234 는 Value에 해당하는 값

domain, path, samesite 등은 쿠키의 Attribute에 해당하는 값 (헤더 이름이나 Attribute 이름들은 대소문자를 구분하지 않기 때문에 set-cookie, domain, path, samesite 로 쓸 수도 있음)

📘클라이언트에서 보낼 때

리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.

Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

📘자바스크립트로 사용하기

보통은 서버가 쿠키 값을 만들고, 클라이언트에서는 웹 브라우저에 맡기고 건드리지 않는 것이 권장된다. 하지만 클라이언트에서 자바스크립트로 쿠키를 생성/수정/참조 할 수도 있다.

• 추가, 수정하기

  변수 할당처럼 보이지만 이 코드는 새로운 쿠키를 추가하거나

  
    document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;";
  

• 값 참조하기

  • document.cookie 값을 참조하면 모든 쿠키의 키와 값이 ; 문자로 구분된 문자열

  • split() 함수를 사용해서 직접 분리해서 사용하거나, 스택오버플로우사용

    Get cookie by name

  • cookie 라는 NPM 패키지를 활용할 수도 있다.

• 값 지우기

  Max-Age 값을 0으로 업데이트하면 (수명이 0) 지워진다.

  
    document.cookie = "session-id; Max-Age: 0;";

  📍알아두면 좋은 Attribute

  📘Domain

  브라우저가 쿠키를 보낼 도메인을 지정한다.

  예를 들어서 Domain=codeit.kr 이라고 하면 https://codeit.kr 은 물론이고 https://abc.codeit.kr, https://xyz.abc.codeit.kr 같은 서브 도메인에 리퀘스트를 할 때도 쿠키를 보낸다.

  📘Path

  브라우저가 쿠키를 보낼 경로를 지정한다.

  예를 들어서 Path=/ 라고 하면 / 아래에 있는 경로들, /abc, /abc/xyz 같은 경로에 리퀘스트를 보낼 때에도 모두 쿠키를 보낸다.

  📘HttpOnly ⭐️

  document.cookie 값을 자바스크립트로 사용할 수 있으면, 해커들이 악성 코드를 사용자들에게 유포해 쿠키를 훔칠 수 있다.

  로그인 정보 같은 민감한 정보는 되도록이면 자바스크립트로 조작하지 말기.

  HttpOnly 를 사용하면 쿠키를 자바스크립트로 사용하지 못하게 막을 수 있다.

  📘Secure ⭐️

  Secure 를 지정하면 HTTPS 리퀘스트를 보낼 때만 쿠키를 보낸다. (SameSite=None 을 지정하면 반드시 Secure 도 함께 지정해야 함)

  📘SameSite ⭐️

  자바스크립트를 사용하면 현재 사이트에서 다른 사이트로 리퀘스트를 보낼 수 있고, 사이트의 링크를 클릭하면 웹 브라우저는 다른 사이트로 GET 리퀘스트를 보내며 이동한다. 그리고 이미지 파일을 다운 받거나 할 때도 GET 리퀘스트를 보내서 받는다.

  codeit.kr 이라는 사이트에서 쿠키를 발급해서 사용자가 저장하고 있는데, 사용자가 hacker-site.com 이라는 악성 사이트에 접속한다고 하면)

  이 악성 사이트는 codeit.kr 이라는 사이트로 리퀘스트를 보내서 개인정보를 탈취하는 사이트 → 악성 사이트에서 코드잇으로 리퀘스트를 보낼 때 쿠키가 함께 간다면 개인정보를 탈취당한다. → 크로스 사이트 요청 위조 (Cross-site request forgery, CSRF, XSRF)

  CSRF를 방지하기 위해서 제3자 사이트(Third-party site)에서 쿠키를 보내지 못하게 SameSite 를 지정해야 한다.

  SameSite 속성의 값에는 Strict, Lax (아무것도 지정하지 않았을 때 기본값), None이 있다.

  	SameSite=Strict	SameSite=Lax	SameSite=None
  다른 사이트에서 우리 사이트로 리퀘스트를 보낼 때	X	X	O
  다른 사이트에서 이미지 파일 등을 받을 때	X	X	O
  다른 사이트에서 사용자가 링크를 클릭해 우리 사이트로 이동할 때	X	O	O
  우리 사이트에서 우리 사이트로 리퀘스트를 보낼 때	O	O	O

  📘Expires 와 Max-Age ⭐️

  쿠키의 수명을 지정하는 속성

  Expires로 만료될 시기를 지정하거나, Max-Age 로 쿠키의 수명을 지정할 수 있다.

  • 세션 쿠키(Session Cookie)는 Expires 나 Max-Age 를 지정하지 않으면 만들 수 있다. (세션 쿠키는 브라우저를 닫으면 지워지는 쿠키)
  • 영속적인 쿠키(Persistent Cookie)는 Expries 나 Max-Age 로 수명을 지정해서 만들 수 있다. (수명이 다하면 지워지는 쿠키)

쿠키, 세션, 캐시가 뭔가요?

HTTP 쿠키 - HTTP | MDN

Set-Cookie - HTTP | MDN

브라우저 쿠키와 SameSite 속성 / seob.dev

react-cookie 쉽게 사용하기

Cross Site Request Forgery (CSRF) | OWASP Foundation

✨세션 스토리지와 로컬 스토리지

쿠키는 서버에서 만들고, 클라이언트는 거의 건드리지 않는다. 그런데 사이트에 따라서는 클라이언트에서만 사용하는 데이터인데, 저장해 놓고 사용하고 싶은 경우가 있다.

→ 세션 스토리지(Session Storage)와 로컬 스토리지(Local Stroage)

📘세션 스토리지

• 현재 탭에서만 유효한 저장소
• 탭을 닫으면 데이터가 사라진다.
• 다른 탭과 데이터는 공유되지 않는다.

// 값을 저장하는 코드. (이미 값이 있다면) 수정하는 코드
const data = inputElement.value;
sessionStorage.setItem('draft', data);

// 값을 참조해서 사용할 때
const draftData = sessionStorage.getItem('draft');

// 값 지우기
sessionStorage.removeItem('draft');

📘로컬 스토리지

• 해당 사이트에서 유효한 저장소
• 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.
• 여러 탭 사이에서도 데이터가 공유된다.

// 사용자가 사이드바 감추기 버튼을 클릭했을 때
// 값을 저장, 수정
localStorage.setItem('show-sidebar', 'false');

// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';

// 값 지우기
localStorage.removeItem('show-sidebar');

❓쿠키와 세션, 로컬 스토리지의 다른 점?

• 클라이언트가 만들고 관리하는 데이터
• 자바스크립트로 편리하게 조작할 수 있다.
• 만료 기간(수명)이 없다
• 쿠키보다 사용할 수 있는 용량이 크다.

📘스토리지가 변경되었을 때 처리하기

스토리지가 변경되었을 때 'storage' 라는 이벤트가 발생한다.

window.addEventListener("storage", () => {
  const showSidebar = localStorage.getItem('show-sidebar') === 'true';
    // showSidebar 값 적용하기
});

Web Storage API - Web API | MDN

웹용 스토리지

localStorage와 sessionStorage

✨활용 사례

📍쿠키

로그인

(세션 기반 인증의 경우)

처음에 세션 ID를 쿠키로 보낸다. 로그인에 성공하면 서버 쪽에서 세션 상태를 업데이트한다.

(토큰 기반 인증의 경우)

로그인에 성공하면 서버가 토큰을 발급해 쿠키로 보내준다.

하루동안 팝업 다시 보지 않기

하루 동안 다시 보지 않기’를 체크하고 닫으면 클라이언트가 수명이 1일인 쿠키를 만든다.

다음에 접속했을 때는 이 쿠키를 확인해서 팝업을 보여주지 않는다.

👇🏻만약 로컬 스토리지로 구현한다면?👇🏻

How to Set Expiry Time (TTL) for LocalStorage With Javascript

장바구니

(세션 기반 인증을 사용하는 경우)

처음 세션 ID를 쿠키로 보낸다. 이 세션 ID를 기반으로 서버에서 장바구니 정보를 저장한다.

📍세션 스토리지, 로컬 스토리지

초안(draft) 임시 저장하기

텍스트를 입력하다가 실수로 창을 닫아 버리더라도 내용이 남아있게 할 수 있다.

웹 앱

웹 기반으로 만들어진 프로그램(웹 앱)들은 세션, 로컬 스토리지를 적극적으로 사용한다.

• Key는 React에서 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하는 데 사용된다.
• 각 요소에 고유한 key 값을 부여함으로써 리액트는 각 요소를 안정적으로 식별할 수 있다.
• 요소의 추가, 삭제, 변경 등의 변화를 효과적으로 감지할 수 있다.
• 배열의 고유한 식별자(예: id)를 key 값으로 사용하는 것이 가장 좋다.

key를 사용하지 않으면❓

• 배열의 변화를 잘 감지하지 못해 전체 배열을 다시 렌더링할 수 있다.
• 배열의 순서가 변경되면 React는 각 항목을 새로운 위치에 렌더링할 때 이전 위치와의 비교를 통해 업데이트한다. 하지만 key 값이 없는 경우 React는 각 항목을 고유하게 식별할 수 없어서 예기치 않은 결과가 발생할 수 있다.

  import React from 'react';
  

function ExampleComponent() { const items = ['A', 'B', 'C'];

const listItems = items.map((item, index) =>

return (

{listItems}

export default ExampleComponent;

# ❓리액트 생명주기(life cycle)에 대해 설명해 주세요.
React 컴포넌트의 라이프 사이클은 컴포넌트가 생성, 업데이트, 소멸되는 일련의 단계를 말한다. 라이프 사이클 메소드는 이러한 단계에서 실행되는 함수들을 말하며, 클래스형 컴포넌트에서 주로 사용된다.
![](https://velog.velcdn.com/images/bori_note/post/cd021bb8-6d86-4388-8369-eb2ccff28cf9/image.png)


## 1. Mounting (생성 단계)
>컴포넌트가 처음 렌더링될 때 발생하는 단계

- constructor(): 컴포넌트가 생성될 때 호출되는 생성자 메소드.
- static getDerivedStateFromProps(): props를 통해 파생된 상태를 설정할 때 사용되는 메소드.
- render(): UI를 렌더링하는 메소드.
- componentDidMount(): 컴포넌트가 실제 DOM에 추가된 후 호출되는 메소드.


## 2. Updating (업데이트 단계)
>컴포넌트가 업데이트될 때 발생하는 단계

- static getDerivedStateFromProps(): props를 통해 파생된 상태를 업데이트할 때 호출.
- shouldComponentUpdate(): 컴포넌트가 업데이트 여부를 결정하는 메소드.
- render(): UI를 업데이트하는 메소드.
- getSnapshotBeforeUpdate(): 업데이트 전에 이전의 DOM 상태를 캡처하는 메소드.
- componentDidUpdate(): 컴포넌트가 업데이트를 완료한 후 호출되는 메소드.

## 3. Unmounting (소멸 단계)
>컴포넌트가 DOM에서 제거될 때 발생하는 단계

- componentWillUnmount(): 컴포넌트가 제거되기 전에 호출되는 메소드.

## 4. Error Handling (에러 처리 단계)
>컴포넌트 렌더링 중 에러가 발생할 때 호출되는 단계

- static getDerivedStateFromError: 하위 컴포넌트에서 오류가 발생할 때 호출.
- componentDidCatch: 하위 컴포넌트에서 발생한 오류를 처리하기 위해 호출.

```jsx
// 실행했을 때의 순서: -1-, -2- ...
// 버튼 클릭 후의 순서: (1), (2) ...
import React, { Component } from 'react';

class LifeCycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    // 컴포넌트가 생성될 때 호출되는 생성자 메서드 -1-
    console.log('Constructor called'); 
  }

  static getDerivedStateFromProps(props, state) {
    // props로부터 state를 도출할 때 호출되는 메서드 -2- (1)
    console.log('getDerivedStateFromProps called'); 
    return null;
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 직후 호출되는 메서드 -4-
    console.log('componentDidMount called'); 
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 컴포넌트 업데이트 여부를 결정할 때 호출되는 메서드  (2)
    console.log('shouldComponentUpdate called'); 
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 실제 DOM에 변화가 반영되기 직전 호출되는 메서드  (4)
    console.log('getSnapshotBeforeUpdate called'); 
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 컴포넌트 업데이트 직후 호출되는 메서드 -6-  (5)
    console.log('componentDidUpdate called');
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되기 직전 호출되는 메서드 -5-
    console.log('componentWillUnmount called'); 
  }

  handleClick = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    // 컴포넌트가 렌더링될 때 호출되는 메서드 -3-  (3)
    console.log('Render called'); 
    return (
      <div>
        <h1>React Lifecycle Example</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default LifeCycleExample;

https://ko.legacy.reactjs.org/docs/react-component.html#the-component-lifecycle

📍함수형 컴포넌트와 Hooks

최근에는 함수형 컴포넌트와 Hooks가 많이 사용되고 있다. 함수형 컴포넌트에서는 생명주기 메서드 대신 useEffect Hook을 사용하여 비슷한 작업을 수행할 수 있다.

useEffect는 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 작업을 수행할 수 있게 해준다.
예) useEffect의 두 번째 인자로 빈 배열을 전달하면 마운트 시에만 실행되는 것과 유사한 효과를 얻을 수 있다. 또한 의존성 배열을 통해 특정 state 변화에 반응하도록 할 수 있다.

이처럼 함수형 컴포넌트와 Hooks를 사용하면 생명주기 메서드를 직접 사용하지 않고도 컴포넌트의 상태 관리와 부수 효과 처리가 가능하다.

import React, { useState, useEffect } from 'react';

function LifeCycleHooksExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트되거나 업데이트될 때 호출되는 useEffect
    console.log('Component mounted or updated'); 

    return () => {
      // 컴포넌트가 언마운트될 때 호출되는 cleanup 함수
      console.log('Component will unmount'); 
    };
  }, []);

  useEffect(() => {
    // count state가 변경될 때 호출되는 useEffect
    console.log('Count state changed');
  }, [count]);

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

  return (
    <div>
      <h1>React Lifecycle Hooks Example</h1>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default LifeCycleHooksExample;

✨Nesting 문법

• CSS 규칙 안에서 CSS 규칙을 만드는 것.

📘 & 선택자

& 선택자를 사용해서 앞에서 만든 버튼 컴포넌트를 호버하거나 클릭했을 때 배경색이 바뀌게👇🏻👇🏻

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5426&directory=4-1.gif&name=4-1.gif

src/Button.js

import styled from 'styled-components';

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

• Nesting에서 &는 부모 선택자를 의미한다.
• 위 코드에서는 버튼 컴포넌트의 클래스를 뜻하는 건데요.
• 버튼 컴포넌트가 .Button이라는 클래스 이름을 쓸 때 &:hover는 .Button:hover와 같은 의미

.Button {
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;
}

.Button:hover,
.Button:active {
  background-color: #463770;
}

📘컴포넌트 선택자

Styled Components에선 클래스 이름을 쓰지 않는다. 그럼 컴포넌트 안에 있는 또 다른 컴포넌트를 선택하고 싶으면 어떻게 해야 할까?

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5426&directory=4-2.gif&name=4-2.gif

• 컴포넌트를 선택자로 쓰고 싶을 때는 ${Icon}같이 컴포넌트 자체를 템플릿 리터럴 안에 넣어주면 된다.

import styled from 'styled-components';
import nailImg from './nail.png';

const Icon = styled.img`
  width: 16px;
  height: 16px;
`;

const StyledButton = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  & ${Icon} {
    margin-right: 4px;
  }

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

function Button({ children, ...buttonProps }) {
  return (
    <StyledButton {...buttonProps}>
      <Icon src={nailImg} alt="nail icon" />
      {children}
    </StyledButton>
  );
}

export default Button;

자손 결합자(Descendant Combinator)로 쓴 & ${Icon} { ... } 부분을 기존 CSS로 표현해 본다면 아래처럼 나타낼 수 있다.

.StyledButton {
  ...
}

.StyledButton .Icon {
  margin-right: 4px;
}

특히, &와 자손 결합자를 사용하는 경우에는 &를 생략할 수 있다. 즉 ${Icon}만 써도 똑같이 동작한다. .

 const StyledButton = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  padding: 16px;

  ${Icon} {
    margin-right: 4px;
  }

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

참고로 Nesting은 여러 겹으로 할 수도 있다.

const StyledButton = styled.button`
  ...
  &:hover,
  &:active {
    background-color: #7760b4;

    ${Icon} {
      opacity: 0.2;
    }
  }
`;

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5426&directory=4-3.gif&name=4-3.gif

&:hover, &:active { ... } 안에 있는 ${Icon} 선택자를 CSS 코드로 표현해 보면

.StyledButton:hover .Icon,
.StyledButton:active .Icon {
  opacity: 0.5;
}

✨다이나믹 스타일링

📘${ ... } 안에 값(변수) 사용하기

• 가장 기본적인 사용법은 JavaScript 변수를 그대로 넣는 방식

const a = 1;
const b = 2;
const str = `${a} 더하기 ${b}는 ${a + b} 입니다.`;

아래 예시 코드에서 ${SIZES['medium']} 부분은 숫자 20을 뜻하기 때문에, font-size: ${SIZES['medium']}px;는 font-size: 20px;란 코드가 된다.

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  ...
  font-size: ${SIZES['medium']}px;
`;

📘${ ... } 안에 함수 사용하기

• Prop에 따라 스타일을 다르게 적용하는 함수를 넣기
• 함수의 파라미터로는 Props를 받고, 리턴 값으로는 스타일 코드를 리턴하면 된다.

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  ...
  font-size: ${(props) => SIZES[props.size]}px;
`;

만약에 구조 분해(Destructuring)하면 아래처럼 쓸 수 있다.

font-size: ${({ size }) => SIZES[size]}px;

size Prop이 값이 없거나 잘못된 값이면 어떻게 될까?

Styled Components에서는 undefined 값을 빈 문자열로 처리해 주기 때문에 font-size: px 같은 잘못된 CSS 코드가 된다. 그래서 가능하면 기본 값을 정해주는 게 좋다. (널 병합 연산자 쓰기..)

font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;

📘논리 연산자 사용하기

함수를 사용할 때 많이 사용하는 패턴 중 하나는 논리 연산자를 사용하는 것.

예를 들어서, round라는 Prop이 참일 때 컴포넌트의 모서리를 둥글게 만듦

const Button = styled.button`
  ...
  ${({ round }) => round && `
      border-radius: 9999px;
    `}
`;

round 값이 참이면 그 뒤에 값까지 계산하기 때문에 border-radius: 9999px이라는 문자열이 리턴돼서 적용된다. 반대로, round 값이 거짓이면 그냥 false가 리턴돼서 아무런 값도 적용되지 않는다.

📘삼항 연산자 사용하기

round 가 참이면 완전히 둥근 모서리를 보여주고, 거짓이면 3px 정도로 살짝 부드럽게 깎인 모서리를 보여주고 싶다면 아래와 같이 삼항 연산자로 쓸 수 있다.

border-radius: ${({ round }) => round ? `9999px` : `3px`};

✨스타일 재사용: 상속

HTML 태그에 스타일링하는 건 styled.tagname을 사용해서 할 수 있다. 그런데, JSX 문법으로 직접 만든 컴포넌트나, Styled Components를 사용해 이미 만들어진 다른 컴포넌트에 스타일을 입히려면 어떻게 해야 할까? → 상속

📘styled() 함수

Styled Components로 만들어진 컴포넌트를 상속하려면 styled() 함수를 사용하면 된다.

src/Button.js

import styled from 'styled-components';

const SIZES = {
  large: 24,
  medium: 20,
  small: 16,
};

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  color: #ffffff;
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
  padding: 16px;

  ${({ round }) =>
    round
      ? `
      border-radius: 9999px;
    `
      : `
      border-radius: 3px;
    `}

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

src/App.js

import styled from 'styled-components';
import Button from './Button';

const SubmitButton = styled(Button)`
  background-color: #de117d;
  display: block;
  margin: 0 auto;
  width: 200px;

  &:hover {
    background-color: #f5070f;
  }
`;

function App() {
  return (
    <div>
      <SubmitButton>계속하기</SubmitButton>
    </div>
  );
}

export default App;

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5431&directory=9-1.png&name=9-1.png

Button 컴포넌트의 스타일을 상속해서 새로운 버튼 SubmitButton을 만들고, App 컴포넌트 안에 SubmitButton을 배치하고 있다.

styled(Button)

SubmitButton이 Button의 스타일을 상속받게 된다. Button 컴포넌트에 SubmitButton의 스타일이 상속됐기 때문에, 마찬가지로 글씨는 흰색이다.

📘JSX로 직접 만든 컴포넌트에 styled() 사용하기

styled.tagname으로 만든 컴포넌트는 바로 styled() 함수를 사용할 수 있지만, 그렇지 않은 컴포넌트는 따로 처리가 필요하다.

예시) 약관을 보여주는 TermsOfService라는 컴포넌트가 있으면

src/TermsOfService.js

function TermsOfService() {
  return (
    <div>
      <h1>㈜코드잇 서비스 이용약관</h1>
      <p>
        환영합니다.
        <br />
        Codeit이 제공하는 서비스를 이용해주셔서 감사합니다. 서비스를
        이용하시거나 회원으로 가입하실 경우 본 약관에 동의하시게 되므로, 잠시
        시간을 내셔서 주의 깊게 살펴봐 주시기 바랍니다.
      </p>
      <h2>제 1 조 (목적)</h2>
      <p>
        본 약관은 ㈜코드잇이 운영하는 기밀문서 관리 프로그램인 Codeit에서
        제공하는 서비스를 이용함에 있어 이용자의 권리, 의무 및 책임사항을
        규정함을 목적으로 합니다.
      </p>
    </div>
  );
}

export default TermsOfService;

TermsOfService는 JSX 문법을 직접 사용해서 바로 컴포넌트가 만들어졌다.

이 컴포넌트를 styled() 함수로 감싸면

src/App.js

import styled from 'styled-components';
import Button from './Button';
import TermsOfService from './TermsOfService';

const StyledTermsOfService = styled(TermsOfService)`
  background-color: #ededed;
  border-radius: 8px;
  padding: 16px;
  margin: 40px auto;
  width: 400px;
`;

const SubmitButton = styled(Button)`
  background-color: #de117d;
  display: block;
  margin: 0 auto;
  width: 200px;

  &:hover {
    background-color: #f5070f;
  }
`;

function App() {
  return (
    <div>
      <StyledTermsOfService />
      <SubmitButton>계속하기</SubmitButton>
    </div>
  );
}

export default App;

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5431&directory=9-2.png&name=9-2.png

styled()로 지정한 스타일이 적용되지 않는다.

StyledTermsOfService에 지정한 배경색이랑 너비가 적용이 안 된 거 같다. 왜 그럴까?

Styled Components는 내부적으로 className을 따로 생성합니다. 그리고, 자체적으로 생성된 className이 있는 부분에 styled() 함수의 스타일이 입혀진다.

그런데, JSX 문법으로 직접 만든 컴포넌트는 styled() 함수가 적용될 className에 대한 정보가 없다. styled() 함수에서 지정한 스타일이 입혀질 부분이 어딘지 알 수 없으니 스타일이 적용되지 않은 것이다.

이렇게, Styled Components를 사용하지 않고 직접 만든 컴포넌트는 className 값을 Prop으로 따로 내려줘야 styled() 함수를 사용할 수 있다.

src/TermsOfService.js

function TermsOfService({ className }) {
  return (
    <div className={className}>
      ...
    </div>
  );
}

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5431&directory=9-3.png&name=9-3.png

직접 만든 컴포넌트에 className Prop을 따로 내려주는 건 syled() 함수가 적용될 부분의 className을 별도로 정해주는 거라고 이해하자.

위 코드의 경우엔, <div> 태그에 className을 내려줬기 때문에 styled(TermsOfService)에서 작성한 코드는 TermsOfService 안에 있는 <div> 태그에 적용된다.

정리하자면, 스타일 상속을 하려면 styled() 함수를 사용하면 되는데, styled.tagname으로 만든 컴포넌트는 styled() 함수로 바로 상속하면 되고, Styled Components를 사용하지 않고 직접 만든 컴포넌트에는 클래스 이름을 내려준 후에 styled() 함수로 상속해야 한다.

✨스타일 재사용: css 함수

가끔 중복되는 CSS 코드들을 변수처럼 저장해서 여러 번 다시 사용하고 싶을 때가 있다. → css 함수

Button 컴포넌트와 Input 컴포넌트에 같은 글자 크기를 갖도록 하는 상황을 생각해보자.

size라는 Prop으로 small, medium, large 각각에 지정된 크기를 전달하면 16, 20, 24 픽셀로 글자 크기를 지정하려 한다. 가장 단순한 방법은 아래처럼 똑같은 코드를 두 번 작성하는 형태가 될 것이다.

import styled from 'styled-components';

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  ...
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
`;

const Input = styled.input`
  ...
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
`;

import styled, { css } from 'styled-components';

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const fontSize = css`
  font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;
`;

const Button = styled.button`
  ...
  ${fontSize}
`;

const Input = styled.input`
  ...
  ${fontSize}
`;

일반적인 템플릿 리터럴을 쓰는 게 아니라 css라는 태그 함수를 붙여서 쓴다는 점!!!

Props를 받아서 사용하는 함수가 들어있기 때문에 반드시 css 함수를 사용해야 한다.

만약에 아래 코드처럼 함수를 삽입하지 않는 단순한 문자열이라면 일반적인 템플릿 리터럴을 써도 된다.

const boxShadow = `
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
`;

하지만, 이런 경우에도 항상 css 함수를 사용하도록 습관화하는 걸 권장 드립니다.

const boxShadow = css`
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
`;

✨글로벌 스타일

CSS를 작성하다 보면, 모든 컴포넌트에 적용하고 싶은 코드가 생기는 경우가 있다. ( 폰트나 box-sizing: border-box )

→ 글로벌 스타일 컴포넌트를 사용하자. 글로벌 스타일 컴포넌트를 최상위 컴포넌트에서 렌더링 하면 글로벌 스타일이 항상 적용된 상태가 되도록 할 수 있다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>글로벌 스타일</div>
    </>
  );
}

export default App;

createGlobalStyle이라는 함수는 다른 Styled Components 함수들과 마찬가지로 템플릿 리터럴 문법으로 사용한다. 이 함수는 <style> 태그를 컴포넌트로 만드는 것이다. 실제로 <style> 태그가 저 위치에 생기는 건 아니고, Styled Components가 내부적으로 처리해서 <head> 태그 안에 우리가 작성한 CSS 코드를 넣어 준다.

✨애니메이션

📘키프레임이란?

영상과 애니메이션은 여러 개의 사진을 연속으로 보여주면서 마치 움직이는 듯한 효과를 만들어 낸다. 이때 연속으로 보여주는 한 장 한 장의 이미지를 프레임이라고 한다. 이때 '움직임의 기준이 되는 프레임'을 '키프레임'이라고 부른다.

CSS에서 키프레임은 CSS 애니메이션을 만들 때 기준이 되는 지점을 정하고, 적용할 CSS 속성을 지정하는 문법을 뜻한다.

예시) 아래 HTML/CSS 코드는 .ball이라는 <div> 태그를 위아래로 움직이는 애니메이션이다. 시작 지점에서는 기본값인 translateY(0%)를 적용하고, 애니메이션의 중간 시점에서는 translateY(100%)를 적용한 다음, 마지막에는 기본값인 translateY(0%) 을 적용하고 있다.

<div class="ball"></div>

@keyframes bounce {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.ball {
  animation: bounce 1s infinite;
  background-color: #ff0000;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

@keyframes로 키프레임 애니메이션을 선언한 다음에, animation 속성에서 이름으로 쓰고 있다.

📘keyframes 함수

Styled Components에서는 키프레임 애니메이션을 어떻게 넣을 수 있을까?

플레이스홀더 애니메이션은 사이트에서 보여줄 내용을 로딩하는 동안 내용이 들어갈 자리에 미리 네모나 동그라미 같은 걸 보여주면서, 애니메이션으로 로딩 중이라는 걸 보여주는 것이다.

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5437&directory=15-2.gif&name=15-2.gif

플레이스홀더 애니메이션을 HTML/CSS 코드로 간단히 만들어보면 아래와 같다.

<div class="placeholder">
  <div class="placeholder-item a"></div>
  <div class="placeholder-item b"></div>
  <div class="placeholder-item c"></div>
</div

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

.placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

.placeholder-item {
  background-color: #888888;
  height: 20px;
  margin: 8px 0;
}

.a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.b {
  width: 400px;
}

.c {
  width: 200px;
}

여기서 placeholder-glow라는 애니메이션 코드는 애니메이션의 중간인 50% 시점에 0.2의 불투명도로 만드는 것이다. 불투명도의 기본값이 1이니까, 불투명도가 0.2로 낮아졌다가 다시 1로 높아지는 애니메이션이 된다.

Styled Components 버전)

@keyframes는 keyframes라는 함수를 쓰면 된다. styled 함수와 마찬가지로 템플릿 리터럴로 사용하는 태그 함수다. 여기서 특히 keyframes로 만든 애니메이션을 ${placeholderGlow}처럼 템플릿 리터럴에 삽입하는 형태로 사용했다는 점!!

src/Placeholder.js

import styled, { keyframes } from 'styled-components';

const placeholderGlow = keyframes`
  50% {
    opacity: 0.2;
  }
`;

export const PlaceholderItem = styled.div`
  background-color: #888888;
  height: 20px;
  margin: 8px 0;
`;

const Placeholder = styled.div`
  animation: ${placeholderGlow} 2s ease-in-out infinite;
`;

export default Placeholder;

src/App.js

import styled from 'styled-components';
import Placeholder, { PlaceholderItem } from './Placeholder';

const A = styled(PlaceholderItem)`
  width: 60px;
  height: 60px;
  border-radius: 50%;
`;

const B = styled(PlaceholderItem)`
  width: 400px;
`;

const C = styled(PlaceholderItem)`
  width: 200px;
`;

function App() {
  return (
    <div>
      <Placeholder>
        <A />
        <B />
        <C />
      </Placeholder>
    </div>
  );
}

export default App;

참고로, keyframes 함수가 리턴하는 변수는 단순한 문자열이 아니라 JavaScript 객체다. 리턴되는 값이 이런 객체이기 때문에 반드시 styled 함수나 css 함수를 통해 사용해야 한다!

{
    id: "sc-keyframes-bEnYbJ"
    inject: ƒ (e, t)
    name: "bEnYbJ"
    rules: "\n  50% {\n    opacity: 0.2;\n  }\n"
    toString: ƒ ()
}

✨테마

📘ThemeProvider로 테마 설정 사용하기

테마 기능을 만들기 위해서는 현재 테마로 설정된 값을 사이트 전체에서 참조할 수 있어야 한다. React에서는 이런 상황에서 Context라는 걸 사용한다. Styled Components에서도 Context를 기반으로 테마를 사용할 수 있다. Context를 내려주는 컴포넌트로 ThemeProvider라는 걸 사용하면 된다.

App.js

import { ThemeProvider } from "styled-components";
import Button from "./Button";

function App() {
  const theme = {
    primaryColor: '#1da1f2',
  };

  return (
    <ThemeProvider theme={theme}>
      <Button>확인</Button>
    </ThemeProvider>
  );
}

export default App;

ThemeProvider라는 Context Provider를 사용해서 theme이라는 객체를 내려준다. 이렇게 하면 ThemeProvider 안에 있는 Styled Components로 만든 컴포넌트에서는 Props를 사용하듯이 theme이라는 객체를 쓸 수 있다.

예를 들어서 Button 컴포넌트에서 theme 값을 써 볼게요. Prop 값을 사용하듯이 theme이라는 값을 쓰면 된다. 기존에 있던 배경색 대신에 아래처럼 함수를 삽입해서 테마 값을 사용한다.

src/Button.js

const Button = styled.button`
  background-color: ${({ theme }) => theme.primaryColor};
  /* ... */
`;

만약에 여러 테마를 선택하게 하고 싶다면 useState 를 활용해서 테마를 바꿔주면 된다.

import { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import Button from './Button';

function App() {
  const [theme, setTheme] = useState({
    primaryColor: '#1da1f2',
  });

  const handleColorChange = (e) => {
    setTheme((prevTheme) => ({
      ...prevTheme,
      primaryColor: e.target.value,
    }));
  };

  return (
    <ThemeProvider theme={theme}>
      <select value={theme.primaryColor} onChange={handleColorChange}>
        <option value="#1da1f2">blue</option>
        <option value="#ffa800">yellow</option>
        <option value="#f5005c">red</option>
      </select>
      <br />
      <br />
      <Button>확인</Button>
    </ThemeProvider>
  );
}

export default App;

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5439&directory=17-2.gif&name=17-2.gif

그런데, 만약 테마 설정 페이지를 만든다고 하면 테마 값을 일반적인 컴포넌트에서 참조할 필요도 생길 것이다. 그럴 때는 ThemeContext를 불러오면 된다. 이 값은 React Context이기 때문에 useContext로 쓴다.

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

// ...

function SettingPage() {
  const theme = useContext(ThemeContext); // { primaryColor: '#...' }
}

💡tip

📍버튼 모양 링크가 필요할 때

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5441&directory=19-1.png&name=19-1.png

사이트를 개발하다보면 모양은 버튼이지만 역할은 링크인 경우가 있다. 예를 들어 페이스북의 로그인 페이지에 있는 "Create new account" 버튼은 모양은 버튼이지만 "Log In"이랑 달리 <a> 태그로 되어 있고, 클릭하면 회원가입 페이지로 이동한다.

버튼의 스타일 코드는 버튼 컴포넌트에 있을텐데, 이걸 <a> 태그 버전으로도 만들어야 하는 걸까? 이렇게 반복되는 스타일링 코드를 어떻게 관리하면 좋을까?

이럴 때 간편하게 사용할 수 있는게 바로 as 라는 Prop 이다.

예를 들어서 아래와 같이 Button 이라는 컴포넌트가 <button> 태그로 만들어져 있을 때, 이걸 <a> 태그로 바꿔서 사용할 수 있다.

const Button = styled.button`
  /* ... */
`;

as 로 태그 이름을 내려주면 해당하는 태그로 사용할 수 있다. 굳이 버튼 모양의 링크 컴포넌트를 만들 필요가 없다!!

<Button href="https://example.com" as="a">
  LinkButton
</Button>

📍원치 않는 Props가 전달될 때

Prop을 Spread 문법을 사용해서 <a> 태그로 전달하는 Link 컴포넌트가 있다고 해 보자. 그리고 StyledLink 라는 걸 만들어서 underline 이라는 불린 Prop으로 스타일링 해보자.

import styled from 'styled-components';

function Link({ className, children, ...props }) {
  return (
    <a {...props} className={className}>
      {children}
    </a>
  );
};

const StyledLink = styled(Link)`
  text-decoration: ${({ underline }) => underline ? `underline` : `none`};
`;

function App() {
  return (
    <StyledLink underline={false} href="https://codeit.kr">
      Codeit으로 가기
    </StyledLink>
  );
}

export default App;

위 코드를 실행하면 경고가 뜬다.

react-dom.development.js:86 Warning: Received `false` for a non-boolean attribute `underline`.

If you want to write it to the DOM, pass a string instead: underline="false" or underline={value.toString()}.

If you used to conditionally omit it with underline={condition && value}, pass underline={condition ? value : undefined} instead.
    at a
    at Link (http://localhost:3000/static/js/bundle.js:26:5)
    at O (http://localhost:3000/static/js/bundle.js:44495:6)
    at App

HTML 태그에 underline 이라는 속성을 지정했는데, 그 속성의 값이 문자열이 아니라서 생긴 오류다. <a> 태그에는 underline 이라는 속성이 없다.

이 문제의 근본적인 원인은 <a {...props} className={className}> 이 부분이다. Spread를 하는 과정에서 의도하지 않은 underline Prop까지 내려간 것이 원인이다.

underline Prop이 전달되는 순서를 정리해 보면…

1. StyledLink 컴포넌트에서 underline 이라는 Prop을 받는다
2. StyledLink 가 스타일링하고 있는 Link 컴포넌트에 underline Prop이 전달된다
3. Link 컴포넌트에서 Spread 문법을 통해 <a> 태그에 underline Prop이 전달된다.

이럴 때는 구조 분해 코드를 조금 고쳐서 underline을 제외하면 원치 않는 Prop이 전달되는 걸 막을 수 있다.

function Link({ className, children, underline, ...props }) {
  return (
    <a {...props} className={className}>
      {children}
    </a>
  );
};

underline 이라는 Prop은 Link 에서 쓰려고 만든 게 아니라 StyledLink 컴포넌트에서만 쓰려고 만든 건데, Link 에 Prop으로 전달되는게 좀 더 근본적인 문제인 거 같다.

이럴 때 아예 Prop이 전달되지 않게 만드는 방법이 있다. 바로 Transient Prop이라는 걸 사용하는 것이다.

Transient(일시적) Prop을 사용하면 Styled Components로 스타일링하는 컴포넌트에서만 Prop을 사용하고, 스타일링의 대상이 되는 컴포넌트에는 Prop이 전달되지 않도록 할 수 있다.

StyledLink 컴포넌트 안에서만 Prop을 사용하고 Link에는 전달하지 않는 예시)

Transient Prop을 만들려면 앞에다 $ 기호를 붙여주면 된다. 아래 코드에서 $underline Prop은 StyledLink 안에서만 사용되고, Link 로 전달되지는 않는다.

import styled from 'styled-components';

function Link({ className, children, ...props }) {
  return (
    <a {...props} className={className}>
      {children}
    </a>
  );
};

const StyledLink = styled(Link)`
  text-decoration: ${({ $underline }) => $underline ? `underline` : `none`};
`;

function App() {
  return (
    <StyledLink $underline={false} href="https://codeit.kr">
      Codeit으로 가기
    </StyledLink>
  );
}

export default App;

✨태그 함수(Tagged Function)

태그 함수(Tagged Function)는 템플릿 리터럴 문법을 사용해서 실행할 수 있는 함수다. .

function h1(strings, ...values) {
  return [strings, values];
}
const result = h1`color: pink;`;
console.log(result); // [['color: pink;'], []]

h1 이라는 함수는 첫 번째 파라미터로 strings, 그리고 나머지 파라미터들을 values 배열로 받는다. 이 함수를 템플릿 리터럴로 실행했다. 이렇게 일반적인 형태로 함수를 선언하고, 템플릿 리터럴로 실행하면 특정한 형태로 파라미터가 전달된다.

console.log 로 출력하면 strings 에는 입력한 문자열이 배열로 나온다. values 는 빈 배열로 출력된다.

템플릿 리터럴에 값을 삽입하고 출력하면)

function h1(strings, ...values) {
  return [strings, values];
}
const backgroundColor = 'black';
const result2 = h1`
  background-color: ${backgroundColor};
  color: pink;
`;
console.log(result2);
// [['\n  background-color: ', ';\n  color: pink;\n'], ['black']]

strings 에는 값이 삽입되는 부분 앞뒤의 문자열들이 잘려서 배열로 들어가 있고, values에는 삽입된 값들이 배열로 들어가 있다. 이것이 태그 함수의 기본적인 동작이다. 이걸 사용해서 CSS 스타일이 생성된 리액트 컴포넌트를 만드는 것이 Styled Components의 핵심 아이디어다.

간단하게 <style> 태그를 렌더링하는 컴포넌트를 만들어 보자.

function h1(strings, ...values) {
  // React 컴포넌트를 만든다
  function Component({ children }) {
    // 템플릿 리터럴에서 받은 값을 CSS 코드로 만든다
    let style = '';
    for (let i = 0; i < strings.length; ++i) {
      style += strings[i];
      if (values[i]) {
        style += values[i];
      }
    }

    // CSS 코드에 따라 클래스 이름을 만든다
    const className = `my-sc-${style.length}`;

    // `<style>` 태그로 만든 CSS 코드를 렌더링한다
    return (
      <>
        <style>{`.${className} {${style}}`}</style>
        <h1 className={className}>{children}</h1>
      </>
    );
  }
  return Component;
}

const backgroundColor = 'black';
const StyledH1 = h1`
  background-color: ${backgroundColor};
  color: pink;
`;

function App() {
  return <StyledH1>Hello World</StyledH1>;
}

export default App;

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5443&directory=21-1.png&name=21-1.png

태그 함수 안에서 컴포넌트를 만들고 이걸 리턴하는 것이다. 이 컴포넌트는 우리가 태그 함수에서 집어넣은 CSS 코드를 <style> 태그에 렌더링하는 컴포넌트다.

Styled Components에서는 내부적으로 클래스네임을 알아서 생성해주기 때문에 우리가 클래스 이름을 신경 쓸 필요가 없다.

함수를 삽입하는 예시)

단순히 strings 와 values 배열을 합쳐주는 게 아니라, React 컴포넌트의 Props를 활용하는 함수가 삽입되는 경우를 처리할 것임.

function h1(strings, ...values) {
  // React 컴포넌트를 만든다
  function Component({ children, ...props }) {
    // 템플릿 리터럴에서 받은 값을 CSS 코드로 만든다
    let style = '';
    for (let i = 0; i < strings.length; ++i) {
      style += strings[i];
      // 삽입된 값이 함수이면 props를 가지고 실행한 값을 CSS에 넣는다.
      if (typeof values[i] === 'function') {
        const fn = values[i];
        style += fn(props);

        // 그 외에 값이 존재하면 CSS에 문자열로 넣는다.
      } else if (values[i]) {
        style += values[i];
      }
    }

    // CSS 코드에 따라 클래스 이름을 만든다
    const className = `my-sc-${style.length}`;

    // `<style>` 태그로 만든 CSS 코드를 렌더링한다
    return (
      <>
        <style>{`.${className} {${style}}`}</style>
        <h1 className={className}>{children}</h1>
      </>
    );
  }
  return Component;
}

const backgroundColor = 'black';
const StyledH1 = h1`
  color: pink;
  ${({ dark }) => dark && 'background-color: black;'}
`;

function App() {
  return <StyledH1 dark>Hello World</StyledH1>;
}

export default App;

Component 함수 안에서 CSS 코드를 생성하는 부분에 함수를 처리하는 부분이 추가되었다.

1. 템플릿 리터럴로 태그 함수 h1 을 실행해서, StyledH1 이라는 컴포넌트가 만들어진다.
2. App 컴포넌트를 렌더링하면 StyledH1 컴포넌트도 렌더링한다.
3. StyledH1 컴포넌트에서는 CSS 코드를 생성해서 <style> 태그로 넣는다. 이때 함수로 삽입된 값(${({ dark }) => dark && 'background-color: black;'} 부분)은 함수이기 때문에, Props를 가지고 실행해서 CSS로 만든다. 우리 코드에서는 dark 라는 값이 있기 때문에, CSS에는 background-color: black; 이라는 값으로 반영된다.

리액트 컴포넌트로 페이지를 나누는 라이브러리

npm install react-router-dom@6

import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import HomePage from './pages/HomePage';

function Main() {
  return (
    <BrowserRouter>
      <App>
        <HomePage />
      </App>
    </BrowserRouter>
  );
}

export default Main;

📘라우터

리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요하다. → BrowserRouter

이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있다.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return <BrowserRouter> ... </BrowserRouter>;
}

📘페이지 나누는 방법

Routes 컴포넌트 안에다가 Route 컴포넌트를 배치해서 각 페이지를 나눠줄 수 있다.

이때 Routes 안에서는 위에서부터 차례대로 Route를 검사한다.

현재 경로와 path prop이 일치하는 Route 를 찾는다.

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="posts" element={<PostListPage />} />
  <Route path="posts/1" element={<PostPage />} />
</Routes>

📘링크

리액트 라우터에서는 <a> 태그 대신에 Link 컴포넌트를 사용한다.

to 라는 prop으로 이동할 경로를 정해주면 된다.

<Link to="/posts">블로그</Link>

📘하위 페이지 나누기

Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 된다.

이때 하위 페이지에서 최상위 경로에 해당하는 경로는 path prop이 아니라 index 라는 prop을 사용하면 된다.

<Routes>
  <Route path="/"><HomePage /></Route><Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path="1" element={<PostPage />}  />
  </Route>
</Routes>

이때 부모 Route 컴포넌트에 element 를 지정하고,

아래처럼 Outlet 이라는 컴포넌트를 활용하면 공통된 레이아웃을 지정해줄 수 있다.

PostLayout.js

import { Outlet } from 'react-router-dom';

function PostLayout() {
  return (
    <div>
      <h1>블로그</h1>
      <hr />
      <Outlet />
    </div>
  );
}

export default PostLayout;

📘동적인 경로 다루기

콜론 (:) 으로 시작하는 문자열을 사용하면 경로에 파라미터를 지정할 수 있다.

예시) 아래처럼 /posts/:postId 라는 경로는 /posts/123 이라던지

/posts/abc 라는 주소로 접속하면 123 이나 abc 라는 값을 postId 라는 파라미터로 받는다.

<Routes>
  <Route path="/"><HomePage /></Route><Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path=":postId" element={<PostPage />}  />
  </Route>
</Routes>

경로 파라미터를 사용하려면 useParams 라는 훅을 사용하면 된다.

function PostPage() {
  const { postId } = useParams();
  // ...
}

📘쿼리 사용하기

useSearchParams 라는 Custom hook으로 SearchParams 객체를 받아올 수 있다. 이 hook은 SearchParams 객체와 Setter 함수를 배열형으로 리턴한다.

이때 쿼리 값은 SearchParams 의 get 함수로 가져온다.

import { useSearchParams } from 'react-router-dom';

function PostListPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filterQuery = searchParams.get('filter');

  // ...
}

만약 쿼리 값을 변경하고 주소를 이동하고 싶다면 Setter 함수에 객체를 넘겨주면 된다.

이때 객체의 프로퍼티로 쿼리 값을 지정할 수 있다.

예시) ?filter=react 라는 쿼리로 이동하기

setSearchParams({
  filter: 'react',
});

📘페이지 이동하기

📗Navigate 컴포넌트

리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동한다.

function PostPage() {
  // ...

  const post = getPost(postId);

  // post가 없는 경우 /posts 페이지로 이동
  if (!post) {
    return <Navigate to="/posts" />;
  }

  // ...
}

📗useNavigate Hook

useNavigate 라는 hook으로 navigate 함수를 가져오면 이 함수를 통해 페이지를 이동할 수 있다.

const navigate = useNavigate();

const handleClick = () => {
  // ... 어떤 작업을 한 다음에 페이지를 이동
  navigate('/wishlist');
}

❓Link, Navigate, useNavigate는 언제 쓰는게 좋을까?

📍Link

• 사용자가 클릭해서 페이지를 이동하도록 할 때
• 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등
• 대부분의 경우 Link 만으로도 충분하다.

📍Navigate

• 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때

예시:

• 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
• 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

📍useNavigate

특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때

예시:

• 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
• 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
• 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우

각 페이지에 들어갔을 때 페이지 제목이 바꾸려면?

react-helmet 이라는 라이브러리

import { Helmet } from 'react-helmet';
import Button from '../components/Button';
import Container from '../components/Container';
import Lined from '../components/Lined';
import styles from './HomePage.module.css';
import landingImg from '../assets/landing.svg';

function HomePage() {
  return (
    <>
      <Helmet>
        <title>Codethat - 코딩이 처음이라면, 코드댓</title>
      </Helmet>
      <div className={styles.bg} />
      <Container className={styles.container}>
        <div className={styles.texts}>
          <h1 className={styles.heading}>
            <Lined>코딩이 처음이라면,</Lined>
            <br />
            <strong>코드댓</strong>
          </h1>
          <p className={styles.description}>
            11만 명이 넘는 비전공자, 코딩 입문자가 코드댓 무제한 멤버십을
            선택했어요.
            <br />
            지금 함께 시작해보실래요?
          </p>
          <div>
            <Button>지금 시작하기</Button>
          </div>
        </div>
        <div className={styles.figure}>
          <img src={landingImg} alt="그래프, 모니터, 윈도우, 자물쇠, 키보드" />
        </div>
      </Container>
    </>
  );
}

export default HomePage;

• Helmet 이라는 컴포넌트로 감싼 다음에, 안에다가 <title> 태그를 배치하면 이 컴포넌트가 렌더링 될 때 HTML의 <title> 태그를 덮어쓸 수 있다.

✨리액트를 렌더링하는 방식

SPA

하나의 HTML 문서 안에서 자바스크립트로 여러 페이지를 보여주는 사이트

📘클라이언트사이드 렌더링(Client-side Rendering)

• 웹 브라우저에서 자바스크립트로 HTML을 만드는 것
• 리액트로 할 수 있는 가장 기본적인 방식의 렌더링
• 리액트로 작성한 코드는 자바스크립트로 변환이 가능하다.(트랜스파일링)

클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 것

📘서버사이드 렌더링(Server-side Rendering)

• 서버에서 HTML을 만들고 리스폰스로 보내주는 것
• 백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을
• 서버에서 HTML을 만든다는 뜻

📘정적 사이트 생성(Static Site Generation)

• 미리 HTML 파일을 만들어서 서버를 배포하는 것
• 서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비다. 그래서 미리 HTML 파일로 만들고 이걸 서버로 배포하는 방법을 사용한다.(정적 사이트 생성)
  • 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 것.
  • '정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 것
  • 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미다.
  • 리액트 코드로 HTML 파일을 만든다는 뜻

✨렌더링을 활용한 리액트 기술 세 가지

📘Next.js

리액트 서버사이드 렌더링을 편하게

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=p4wxlvwuf-nextjs-example.png&name=p4wxlvwuf-nextjs-example.png

Next.js 기본 예제 프로젝트 모습

리액트에서는 서버사이드 렌더링을 하는 기능들을 제공하고 있지만, 아주 기본적인 방법만 제공한다. 때문에 매번 작성해야 하는 코드의 양도 많고 복잡하다. 그래서 개발자들은 서버사이드 렌더링을 대신 구현해주는 기술들을 만들기 시작했다.

리액트 라우터랑은 다르게 HTML 파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 사용할 수 있다는 장점이 있다.

📘Gatsby

리액트로 정적 사이트 만들기

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=bfuyqam0x-gatsby-example.png&name=bfuyqam0x-gatsby-example.png

gatsby-starter-blog 프로젝트의 모습

빌드라는 건 리액트로 작성된 소스코드들을 브라우저가 알아들을 수 있도록 만드는 것이다.

Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML 파일로 만든다.(정적 사이트 생성) Gatsby를 사용하면 리액트로 만든 사이트를 빌드해서 손쉽게 HTML 파일로 만들 수 있다.

📘React Native

모바일 앱의 화면도 리액트로

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5122&directory=react-native-example.png&name=react-native-example.png

리액트 네이티브에서 텍스트와 버튼을 배치한 예시

React Native는 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해 준다. 리액트 코드로 개발하면 웹과 안드로이드와 iOS 앱에서 사용하는 공통적인 코드를 한 번에 개발할 수 있다는 장점이 있다.

화면에서 사용하는 데이터를 관리하는 것

Flux

• 데이터의 변경을 한 곳에서 하면서 흐름을 정리

Home | Meta Open Source

• 데이터를 변경하고 싶으면 액션을 만들어서 dispatcher에게 전달.
• dispathcher는 액션을 모아 stroe에 넘겨줌.
• store는 들어온 액션을 차례대로 보면서 데이터를 변경함.
• store에서 데이터가 변경되면 컴포넌트들은 다시 렌더링함.

컴포넌트 - 액션 만들기

store - 데이터 변경하기

dispatcher = store로 전달되는 액션을 차례대로 살펴보기

Redux

Redux - A JS library for predictable and maintainable global state management | Redux

데이터 하나를 추가하려고 매번 무의미한 리덕스 코드를 작성하게 됨

리덕스를 통해서 비동기를 처리하려면 코드가 복잡해지고 알아보기 힘듦

클라이언트 상태와 서버상태를 구분함 (데이터의 출처를 기반으로)

프론트 개발자들은 클라이언트 상태 관리에만 집중하고

서버상태는 서버랑 동기화하면 되지 않을까 하는 아이디어를 떠올림👇🏻👇🏻

React Query

TanStack Query

SWR

React Hooks for Data Fetching – SWR

리액트 쿼리 + SWR

리퀘스트를 정해 놓으면 알아서 서버랑 동기화를 하기 때문에 편하게 서버 상태 관리를 할 수 있다.

Recoil

Recoil

Context는 편리하지만 데이터를 추가할 때마다 Context도 하나씩 늘어난다는 문제점이 있다. Context 한 개에 모든 데이터를 모으면 데이터가 변할 때마다 상관없는 컴포넌트들도 함께 재렌더링 된다. 그리고, 데이터의 구조가 컴포넌트 구조와 섞인다.

• 단순한 상태 관리 라이브러리
• 전역적으로 쓸 수 있는 useState
• 공유할 데이터(Atom)를 컴포넌트 구조와 별개로 분리하는 것
  • Atom: 어디서나 갖다 쓸 수 있는 state 같은 것

map 으로 렌더링하기

배열 메소드 map에서 콜백 함수의 리턴 값으로 리액트 엘리먼트를 리턴하면 된다.

import items from './pokemons';

function Pokemon({ item }) {
  return (
    <div>
      No.{item.id} {item.name}
    </div>
  );
}

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Pokemon item={item} />
        </li>
      ))}
    </ul>
  );
}

export default App;

참고로 반드시 JSX의 중괄호 안에서 map 함수를 써야 하는 것은 아님.

아래처럼 renderedItems 라는 변수에 map의 결과를 지정해도 똑같이 렌더링 하게 된다.

import items from './pokemons';

function Pokemon({ item }) {
  return (
    <div>
      No.{item.id} {item.name}
    </div>
  );
}

function App() {
  const renderedItems = items.map((item) => (
    <li key={item.id}>
      <Pokemon item={item} />
    </li>
  ));

  return (
    <ul>
      {renderedItems}
    </ul>
  );
}

export default App;

sort 로 정렬하기

배열 메소드의 sort 메소드를 사용하면 배열을 정렬할 수 있다.

import { useState } from 'react';
import items from './pokemons';

function Pokemon({ item }) {
  return (
    <div>
      No.{item.id} {item.name}
    </div>
  );
}

function App() {
  const [direction, setDirection] = useState(1);
  const handleAscClick = () => setDirection(1);
  const handleDescClick = () => setDirection(-1);

  const sortedItems = items.sort((a, b) => direction * (a.id - b.id));

  return (
    <div>
      <div>
        <button onClick={handleAscClick}>도감번호 순서대로</button>
        <button onClick={handleDescClick}>도감번호 반대로</button>
      </div>
      <ul>
        {sortedItems.map((item) => (
          <li key={item.id}>
            <Pokemon item={item} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

filter 로 삭제하기

배열 메소드 중 filter 와 배열형 스테이트를 활용하면 삭제 기능을 간단히 구현할 수 있다.

import { useState } from 'react';
import mockItems from './pokemons';

function Pokemon({ item, onDelete }) {
  const handleDeleteClick = () => onDelete(item.id);

  return (
    <div>
       No.{item.id} {item.name}
      <button onClick={handleDeleteClick}>삭제</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState(mockItems);

  const handleDelete = (id) => {
    const nextItems = items.filter((item) => item.id !== id);
    setItems(nextItems);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Pokemon item={item} onDelete={handleDelete} />
        </li>
      ))}
    </ul>
  );
}

export default App;

❓const nextItems = items.filter((item) => [item.id](http://item.id/) !== id);

• filter 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과가 참인 요소들로 이루어진 새로운 배열을 반환한다.
• 예를 들어, items 배열에 다음과 같은 요소들이 있다고 가정하면:

const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' }
];

그리고 id 변수에는 2가 저장되어 있다고 가정하면

1. 첫 번째 요소({ id: 1, name: 'Apple' })의 id는 2와 다르기 때문에 결과에 포함
2. 두 번째 요소({ id: 2, name: 'Banana' })의 id는 2와 같기 때문에 결과에 포함되지 않음
3. 세 번째 요소({ id: 3, name: 'Orange' })의 id는 2와 다르기 때문에 결과에 포함

반드시 key 를 내려주자

• 각 요소를 렌더링 할 때는 key Prop을 내려줘야 한다.
• 이때 가장 바깥쪽에 있는 (최상위) 태그에다가 key Prop을 지정하면 된다.
• 반드시 id 일 필요는 없고 각 데이터를 구분할 수 있는 고유한 값이면 무엇이든 key 로 활용해도 상관없다.

import items from './pokemons';

function Pokemon({ item }) {
  return (
    <div>
      No.{item.id} {item.name}
    </div>
  );
}

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.name}>
          <Pokemon item={item} />
        </li>
      ))}
    </ul>
  );
}

export default App;

❓배열을 렌더링할 때 key를 지정하지 않으면?

• key를 지정하더라도 배열의 인덱스같이 데이터를 구분할 수 없는 고유하지 않은 값으로 key를 지정하면 렌더링이 잘못될 수 있다.
• 각 데이터를 구분할 수 있는 고유한 값으로 key를 꼭 정해줘야 함!!

데이터 가져오면서 무한루프에 빠짐

import React, { useState } from "react";
import ReviewList from "./components/ReviewList";
import { getReviews } from "./api";

function App() {
  const [items, setItems] = useState([]);
  const [order, setOrder] = useState("createdAt"); // 최신순
  const sortedItems = items.sort((a, b) => b[order] - a[order]); // 평점 높은 순(내림차순)

  const handleNewestClick = () => setOrder("createdAt");
  const handBestClick = () => setOrder("rating");
  const handleDelete = (id) => {
    // 현재 순회 중인 요소의 id가 주어진 id와 같지 않은 경우를 체크
    const nextItems = items.filter((item) => item.id !== id);
    setItems(nextItems);
  };

  const handleLoad = async () => {
    // 비동기로 리퀘스를 보냈다가 리스폰스가 도착하면 reviews 변수를 지정하고
    const { reviews } = await getReviews();
    // setItems를 통해 state 변경 -> App 컴포넌트를 다시 렌더링함
    setItems(reviews)
  };

  // 다시 이 함수가 렌더링 되어 무한루프가 생김
  handleLoad()

  return (
    <div>
      <div>
        <button onClick={handleNewestClick}>최신순</button>
        <button onClick={handBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete} />
      <button>불러오기</button>
    </div>
  );
}

export default App;

→ useEffect로 해결하기

✨useEffect

📘처음 한 번만 실행하기

useEffect(() => {
  // 실행할 코드
}, []);

컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행한다.

그 이후로는 콜백 함수를 실행하지 않는다.

📘값이 바뀔 때마다 실행하기

useEffect(() => {
  // 실행할 코드
}, [dep1, dep2, dep3, ...]);

컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가 실행한다.

그 이후로 렌더링 할 때는 디펜던시 리스트에 있는 값들을 확인해서 하나라도 바뀌면 콜백 함수를 기억해뒀다가 실행한다.

✨페이지네이션

책의 페이지처럼 데이터를 나눠서 제공하는 것

📘오프셋 기반 페이지네이션

offset: 상쇄하다 = 지금까지 받아온 데이터의 개수

• 받아온 개수 기준

📘커서 기반 페이지네이션

cursor: 데이터를 가리키는 값 = 지금까지 받은 데이터를 표시한 책갈피

데이터가 바뀌더라고 커서가 가리키는 데이터 값은 변하지 않음 → 데이터 중복이나 빠짐없이 데이터를 잘 가져온다.

• 데이터를 가리키는 커서 기준

✨조건부 렌더링

논리 연산자 활용하기

📘AND 연산자

import { useState } from 'react';

function App() {
  const [show, setShow] = useState(false);

  const handleClick = () => setShow(!show);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {show && <p>보인다 👀</p>}
    </div>
  );
}

export default App;

show 값이 true 이면 렌더링 하고, false 이면 렌더링 하지 않는다.

OR 연산자

import { useState } from 'react';

function App() {
  const [hide, setHide] = useState(true);

  const handleClick = () => setHide(!hide);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {hide || <p>보인다 👀</p>}
    </div>
  );
}

export default App;

hide 값이 true 이면 렌더링 하지 않고, false 이면 렌더링 한다.

📘삼항 연산자 활용하기

import { useState } from 'react';

function App() {
  const [toggle, setToggle] = useState(false);

  const handleClick = () => setToggle(!toggle);

  return (
    <div>
      <button onClick={handleClick}>토글</button>
      {toggle ? <p>✅</p> : <p>❎</p>}
    </div>
  );
}

export default App;

삼항 연산자를 사용하면 참, 거짓일 경우에 다르게 렌더링해줄 수 있다.

toggle 의 값이 참일 경우엔 '✅'을, 거짓일 경우에는 '❎'를 렌더링한다.

📘렌더링되지 않는 값들

function App() {
  const nullValue = null;
  const undefinedValue = undefined;
  const trueValue = true;
  const falseValue = false;
  const emptyString = '';
  const emptyArray = [];

  return (
    <div>
      <p>{nullValue}</p>
      <p>{undefinedValue}</p>
      <p>{trueValue}</p>
      <p>{falseValue}</p>
      <p>{emptyString}</p>
      <p>{emptyArray}</p>
    </div>
  );
}

export default App;

위 컴포넌트에서 중괄호 안에 있는 값들은 모두 아무것도 렌더링하지 않는다.

function App() {
  const zero = 0;
  const one = 1;

  return (
    <div>
      <p>{zero}</p>
      <p>{one}</p>
    </div>
  );
}

export default App;

이 값들은 각각 숫자 0과 1을 렌더링 한다.

⚠️조건부 렌더링을 사용할 때 주의할 점

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);

  const handleClick = () => setNum(num + 1);

  return (
    <div>
      <button onClick={handleClick}>더하기</button>
      {num && <p>num이 0 보다 크다!</p>}
    </div>
  );
}

export default App;

num 값이 0일 때는 false 로 계산되니까 뒤의 값을 계산하지 않기 때문에 아무것도 렌더링 하지 않는 코드 같지만, 숫자 0은 0으로 렌더링 된다.

그래서 처음 실행했을 때 숫자 0이 렌더링 되고 '더하기' 버튼을 눌러서 num 값이 증가하면 num이 0 보다 크다! 가 렌더링 된다.

그래서 이런 경우엔 아래처럼 보다 명확한 논리식을 써주는 게 좋다.

true 나 false 값은 리액트에서 렌더링 하지 않기 때문!!

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0);

  const handleClick = () => setNum(num + 1);

  return (
    <div>
      <button onClick={handleClick}>더하기</button>
      {(num > 0) && <p>num이 0 보다 크다!</p>}
    </div>
  );
}

export default App;

✨useState

📘초깃값 지정하기

const [state, setState] = useState(initialState);

useState 함수에 값을 전달하면 초깃값으로 지정할 수 있다.

📘콜백으로 초깃값 지정하기

const [state, setState] = useState(() => {
  // 초기값을 계산
  return initialState;
});

초깃값을 계산해서 넣는 경우 콜백을 사용하면 좋다.

function ReviewForm() {
  const savedValues = getSavedValues(); // ReviewForm을 렌더링할 때마다 실행됨
  const [values, setValues] = useState(savedValues);
  // ...
}

getSavedValues 라는 함수를 통해서 컴퓨터에 저장된 초깃값을 가져온다고 해보면,

savedValues 라는 값은 처음 렌더링 한 번만 계산하면 되는데, 매 렌더링 때마다 불필요하게 getSavedValues 함수를 실행해서 저장된 값을 가져온다.

function ReviewForm() {
  const [values, setValues] = useState(() => {
    const savedValues = getSavedValues(); // 처음 렌더링할 때만 실행됨
    return savedValues
  });
  // ...
}

이럴 때는 이렇게 콜백 형태로 초깃값을 지정해주면 처음 렌더링 할 때 한 번만 콜백을 실행해서 초깃값을 만들고, 그 이후로는 콜백을 실행하지 않기 때문에 getSavedValues 를 불필요하게 실행하지 않는다.

단, 이때 이 콜백 함수가 리턴할 때까지 리액트가 렌더링하지 않고 기다린다. 콜백 함수의 실행이 오래 걸릴 수록 초기 렌더링이 늦어진다.

✨Setter 함수 사용하기

const [state, setState] = useState(0);

const handleAddClick = () => {
  setState(state + 1);
}

Setter 함수에다가 값을 전달하면, 해당하는 값으로 변경된다.

주의할 점) 배열이나 객체 같은 참조형은 반드시 새로운 값을 만들어서 전달해야 한다.

참조형 State 사용의 잘못된 예

const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  state.count += 1; // 참조형 변수의 프로퍼티를 수정
  setState(state); // 참조형이기 때문에 변수의 값(레퍼런스)는 변하지 않음
}

참조형 State 사용의 올바른 예

const [state, setState] = useState({ count: 0 });

const handleAddClick = () => {
  setState({ ...state, count: state.count + 1 }); // 새로운 객체 생성
}

📘콜백으로 State 변경

setState((prevState) => {
  // 다음 State 값을 계산
  return nextState;
});

만약 이전 State 값을 참조하면서 State를 변경하는 경우, 비동기 함수에서 State를 변경하게 되면 최신 값이 아닌 State 값을 참조하는 문제가 있다. 이럴 때는 콜백을 사용해서 처리할 수 있다. 파라미터로 올바른 State 값을 가져와서 사용할 수 있다.

콜백으로 State를 변경하는 예시

const [count, setCount] = useState(0);

const handleAddClick = async () => {
  await addCount();
  setCount((prevCount) => prevCount + 1);
}

✨입력 폼 (form)

📘onChange

• 리액트에선 순수 HTML과 다르게 onChange Prop을 사용하면 입력 값이 바뀔 때마다 핸들러 함수를 실행한다.
• oninput 이벤트와 비슷.

📘htmlFor

• <label /> 태그에서 사용하는 속성인 for 는 자바스크립트 반복문 키워드인 for 와 겹치기 때문에 리액트에서는 htmlFor 를 사용한다.

🔖폼을 다루는 기본적인 방법

• 스테이트를 만들고 target.value 값을 사용해서 값을 변경해 줄 수 있다.
• value Prop으로 스테이트 값을 내려주고, onChange Prop으로 핸들러 함수를 넘긴다.

function TripSearchForm() {
  const [location, setLocation] = useState('Seoul');
  const [checkIn, setCheckIn] = useState('2022-01-01');
  const [checkOut, setCheckOut] = useState('2022-01-02');

  const handleLocationChange = (e) => setLocation(e.target.value);

  const handleCheckInChange = (e) => setCheckIn(e.target.value);

  const handleCheckOutChange = (e) => setCheckOut(e.target.value);

  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={location} placeholder="어디로 여행가세요?" onChange={handleLocationChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={checkIn} onChange={handleCheckInChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={checkOut} onChange={handleCheckOutChange} />
      <button type="submit">검색</button>
    </form>
  )
}

🔖폼 값을 객체 하나로 처리하기

이벤트 객체의 target.name 과 target.value 값을 사용해서 값을 변경해 줄 수도 있었습니다.

이렇게하면 객체형 스테이트 하나만 가지고도 값을 처리할 수 있었죠.

function TripSearchForm() {
  const [values, setValues] = useState({
    location: 'Seoul',
    checkIn: '2022-01-01',
    checkOut: '2022-01-02',
  })

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  }

  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={values.location} placeholder="어디로 여행가세요?" onChange={handleChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={values.checkIn} onChange={handleChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={values.checkOut} onChange={handleChange} />
      <button type="submit">검색</button>
    </form>
  )
}

🔖기본 submit 동작 막기

• HTML 폼의 기본 동작은 submit 타입의 버튼을 눌렀을 때 페이지를 이동한다.
• 이벤트 객체의 preventDefault 를 사용하면 이 동작을 막을 수 있다.

const handleSubmit = (e) => {
  e.preventDefault();
  // ...
}

✨제어 컴포넌트(Controlled Component)

• 인풋의 value값을 리액트에서 지정
• 리액트에서 사용하는 값과 살제 인풋 값이 항상 일치
• 값을 예측하기가 쉽고 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있다.
• State냐 Prop이냐는 중요하지 않고, 리액트로 value 를 지정한다는 것이 핵심

function TripSearchForm() {
  const [values, setValues] = useState({
    location: 'Seoul',
    checkIn: '2022-01-01',
    checkOut: '2022-01-02',
  })

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  }

  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={values.location} placeholder="어디로 여행가세요?" onChange={handleChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={values.checkIn} onChange={handleChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={values.checkOut} onChange={handleChange} />
      <button type="submit">검색</button>
    </form>
  )
}

function TripSearchForm({ values, onChange }) {
  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={values.location} placeholder="어디로 여행가세요?" onChange={onChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={values.checkIn} onChange={onChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={values.checkOut} onChange={onChange} />
      <button type="submit">검색</button>
    </form>
  )
}

✨비제어 컴포넌트(Unontrolled Component)

• 인풋의 value값을 리액트에서 지정하지 않음
• file input

function TripSearchForm({ onSubmit }) {
  return (
    <form onSubmit={onSubmit} >
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" placeholder="어디로 여행가세요?" />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" />
      <button type="submit">검색</button>
    </form>
  )
}

onSubmit 함수에서는 폼 태그를 참조할 수 있다. 👇🏻값들을 참조하려면 이벤트 객체의 target 활용👇🏻

const handleSubmit = (e) => {
  e.preventDefault();
  const form = e.target;
  const location = form['location'].value;
  const checkIn = form['checkIn'].value;
  const checkOut = form['checkOut'].value;
  // ....
}

폼 태그로 곧바로 FormData 를 바로 만드는 것도 가능하다.

const handleSubmit = (e) => {
  e.preventDefault();
  const form = e.target;
  const formData = new FormData(form);
  // ...
}

✨ref와 useRef

📘Ref 객체 생성

import { useRef } from 'react';

// ...

const ref = useRef();

useRef 함수로 Ref 객체를 만들 수 있다.

📘 ref Prop 사용하기

const ref = useRef();

// ...

<div ref={ref}> ... </div>

ref Prop에다가 앞에서 만든 Ref 객체를 내려주면 된다.

📘Ref 객체에서 DOM 노드 참조하기

const node = ref.current;
if (node) {
  // node 를 사용하는 코드
}

Ref 객체의 current 라는 프로퍼티를 사용하면 DOM 노드를 참조할 수 있다.

current 값은 없을 수도 있으니까 반드시 값이 존재하는지 검사하고 사용해야 하는 점!!!

예시: 이미지 크기 구하기

img 노드의 크기를 ref 를 활용해서 출력하는 예시

img 노드에는 너비 값인 width 와 높이 값인 height 라는 속성이 있다.

Ref 객체의 current 로 DOM 노드를 참조해서 두 속성 값을 가져왔다.

import { useRef } from 'react';

function Image({ src }) {
  const imgRef = useRef();

  const handleSizeClick = () => {
    const imgNode = imgRef.current;
    if (!imgNode) return;

    const { width, height } = imgNode;
    console.log(`${width} x ${height}`);
  };

  return (
    <div>
      <img src={src} ref={imgRef} alt="크기를 구할 이미지" />
      <button onClick={handleSizeClick}>크기 구하기</button>
    </div>
  );
}

✨사이드 이펙트(Side Effect)

• 사이드 이펙트는 한국어로는 '부작용'이라는 뜻

예를 들면 감기약을 먹었을 때

감기 증상은 없어졌지만 (작용) 피부가 붉게 올라오면 (부작용)

let count = 0;

function add(a, b) {
  const result = a + b;
  count += 1; // 함수 외부의 값을 변경
  return result;
}

const val1 = add(1, 2);
const val2 = add(-4, 5);

• add 함수는 실행하면서 함수 외부의 상태(count 변수)가 바뀌기 때문에, 이런 함수를 "사이드 이펙트가 있다"고 한다.
• console.log 함수를 사용하면 값을 계산해서 리턴하는 게 아니라 웹 브라우저 콘솔 창에 문자열을 출력한다. ⇒ 외부 상태를 변경해서 문자열을 출력하는 것이다.

함수 안에서 함수 바깥에 있는 값이나 상태를 변경하는 걸 '사이드 이펙트'라고 부른다.

📘사이드 이펙트와 useEffect

useEffect 는 리액트 컴포넌트 함수 안에서 사이드 이펙트를 실행하고 싶을 때 사용하는 함수다.

예를 들면 DOM 노드를 직접 변경한다거나,

브라우저에 데이터를 저장하고,

네트워크 리퀘스트를 보내는 것

주로 리액트 외부에 있는 데이터나 상태를 변경할 때 사용한다.

📘페이지 정보 변경

useEffect(() => {
  document.title = title; // 페이지 데이터를 변경
}, [title]);

📘네트워크 요청

useEffect(() => {
  fetch('https://example.com/data') // 외부로 네트워크 리퀘스트
    .then((response) => response.json())
    .then((body) => setData(body));
}, [])

📘데이터 저장

useEffect(() => {
  localStorage.setItem('theme', theme); // 로컬 스토리지에 테마 정보를 저장
}, [theme]);

참고: localStorage 는 웹 브라우저에서 데이터를 저장할 수 있는 기능

📘타이머

useEffect(() => {
  const timerId = setInterval(() => {
    setSecond((prevSecond) => prevSecond + 1);
  }, 1000); // 1초마다 콜백 함수를 실행하는 타이머 시작

  return () => {
    clearInterval(timerId);
  }
}, []);

참고: setInterval 이라는 함수를 쓰면 일정한 시간마다 콜백 함수를 실행할 수 있다.

✨useEffect를 쓰면 좋은 경우

데이터 불러오는 기능 만들 때 처음에는 onclick 이벤트 핸들러에서 네트워크 리퀘스트를 보냈고, 페이지가 열리자마자 데이터를 불러오기 위해서 useEffect 를 사용하는 걸로 바꿨다.

하지만 만약 둘 다 가능한 경우라면 핸들러 함수를 써야 하는 걸까? 아니면 useEffect 를 써야 하는 걸까?

정해진 규칙은 없습니다. 하지만 useEffect 는 쉽게 말해서 '동기화'에 쓰면 유용한 경우가 많다. (동기화는 컴포넌트 안에 데이터와 리액트 바깥에 있는 데이터를 일치시키는 것)

📍핸들러 함수만 사용한 예시

// 인풋 입력에 따라 페이지 제목을 바꾸는 컴포넌트
import { useState } from 'react';

const INITIAL_TITLE = 'Untitled';

function App() {
  const [title, setTitle] = useState(INITIAL_TITLE);

  const handleChange = (e) => {
    const nextTitle = e.target.value;
    setTitle(nextTitle);
    document.title = nextTitle;
  };

  const handleClearClick = () => {
    const nextTitle = INITIAL_TITLE;
    setTitle(nextTitle);
    document.title = nextTitle;
  };

  return (
    <div>
      <input value={title} onChange={handleChange} />
      <button onClick={handleClearClick}>초기화</button>
    </div>
  );
}

export default App;

• handleChange 함수와 handleClearClick 함수가 있다.
• 모두 title 스테이트를 변경한 후에 document.title 도 함께 변경하고 있다.
• 여기서 document.title 값을 바꾸는 건 외부의 상태를 변경하는 거니까 사이드 이펙트다.

만약 새로 함수를 만들어서 setTitle 을 사용하는 코드를 추가할 때마다 document.title 값도 변경해야 한다는 걸 기억해뒀다가 관련된 코드를 작성해야 한다는 점

📍useEffect를 사용한 예시

import { useEffect, useState } from 'react';

const INITIAL_TITLE = 'Untitled';

function App() {
  const [title, setTitle] = useState(INITIAL_TITLE);

  const handleChange = (e) => {
    const nextTitle = e.target.value;
    setTitle(nextTitle);
  };

  const handleClearClick = () => {
    setTitle(INITIAL_TITLE);
  };

  useEffect(() => {
    document.title = title;
  }, [title]);

  return (
    <div>
      <input value={title} onChange={handleChange} />
      <button onClick={handleClearClick}>초기화</button>
    </div>
  );
}

export default App;

• useEffect 를 사용한 예시에서는 document를 다루는 사이드 이펙트 부분만 따로 처리하고 있다.
• 이렇게 하면 setTitle 함수를 쓸 때마다 document.title 을 변경하는 코드를 신경 쓰지 않아도 되니까 편리하다.
• 게다가 처음 렌더링 되었을 때 'Untitled'라고 페이지 제목을 변경하는 효과까지 낼 수 있다.
• useEffect 는 리액트 안과 밖의 데이터를 일치시키는데 활용하면 좋다. (useEffect 를 사용했을 때 반복되는 코드를 줄이고, 동작을 쉽게 예측할 수 있는 코드를 작성할 수 있기 때문)

✨정리 함수 (Cleanup Function)

useEffect(() => {
  // 사이드 이펙트

  return () => {
    // 사이드 이펙트에 대한 정리
  }
}, [dep1, dep2, dep3, ...]);

• useEffect 의 콜백 함수에서 사이드 이펙트를 만들면 정리가 필요한 경우가 있다.
• 이럴 때 콜백 함수에서 리턴 값으로 정리하는 함수를 리턴할 수 있다.
• 리턴한 정리 함수에서는 사이드 이펙트에 대한 뒷정리를 한다.

예를 들면 이미지 파일 미리보기를 구현할 때 Object URL을 만들어서 브라우저의 메모리를 할당(createObjectURL) 했다. 정리 함수에서는 이때 할당한 메모리를 다시 해제(revokeObjectURL)했다.

📘정리 함수가 실행되는 시점

쉽게 말해서 콜백을 한 번 실행했으면, 정리 함수도 반드시 한 번 실행된다.

정확히는 새로운 콜백 함수가 호출되기 전에 실행되거나 (앞에서 실행한 콜백의 사이드 이펙트를 정리), 컴포넌트가 화면에서 사라지기 전에 실행된다 (맨 마지막으로 실행한 콜백의 사이드 이펙트를 정리).

📍예시: 타이머

import { useEffect, useState } from 'react';

function Timer() {
  const [second, setSecond] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      console.log('타이머 실행중 ... ');
      setSecond((prevSecond) => prevSecond + 1);
    }, 1000);
    console.log('타이머 시작 🏁');

    return () => {
      clearInterval(timerId);
      console.log('타이머 멈춤 ✋');
    };
  }, []);

  return <div>{second}</div>;
}

function App() {
  const [show, setShow] = useState(false);

  const handleShowClick = () => setShow(true);
  const handleHideClick = () => setShow(false);

  return (
    <div>
      {show && <Timer />}
      <button onClick={handleShowClick}>보이기</button>
      <button onClick={handleHideClick}>감추기</button>
    </div>
  );
}

export default App;

• 일정한 시간 간격마다 콜백 함수를 실행하는 setInterval 이라는 함수도 정리가 필요한 사이드 이펙트다.
• 이 컴포넌트는 렌더링이 끝나면 타이머를 시작하고, 화면에서 사라지면 타이머를 멈춘다.
• 사용자가 '보이기' 버튼을 눌렀을 때 show 값이 참으로 바뀌면서 다시 렌더링된다.
• 조건부 렌더링에 의해서 Timer 컴포넌트를 렌더링한다.
  • Timer 컴포넌트에서는 useEffect 에서 타이머를 시작하고, 정리 함수를 리턴한다.
  • 콘솔에는 '타이머 시작 🏁'이 출력
  • 다시 사용자가 '감추기' 버튼을 누르면 show 값이 거짓으로 바뀌면서 다시 렌더링된다.
  • 조건부 렌더링에 의해서 이제 Timer 컴포넌트를 렌더링 하지 않는다.
  • 그럼 리액트에선 마지막으로 앞에서 기억해뒀던 정리 함수를 실행해준다.
  • 타이머를 멈추고 콘솔에는 '타이머 멈춤 ✋'이 출력된다.

정리 함수를 리턴하면 사이드 이펙트를 정리하고 안전하게 사용할 수 있다는 것.

✨리액트 훅

리액트가 제공하는 기능에 연결해서 그 값이나 기능을 사용하는 함수

📍Hook의 규칙

• 반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함
• 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀)

📘useState

State 사용하기

const [state, setState] = useState(initialState);

콜백으로 초깃값 지정하기

초깃값을 계산하는 코드가 복잡한 경우에 활용

const [state, setState] = useState(() => {
  // ...
  return initialState;
});

State 변경

setState(nextState);

이전 State를 참조해서 State 변경

비동기 함수에서 최신 State 값을 가져와서 새로운 State 값을 만들 때

setState((prevState) => {
  // ...
  return nextState
});

📘useEffect

컴포넌트 함수에서 사이드 이펙트(리액트 외부의 값이나 상태를 변경할 때)에 활용하는 함수

처음 렌더링 후에 한 번만 실행

useEffect(() => {
  // ...
}, []);

렌더링 후에 특정 값이 바뀌었으면 실행

• 참고로 처음 렌더링 후에도 한 번 실행됨

useEffect(() => {
  // ...
}, [dep1, dep2, dep3, ...]);

사이드 이펙트 정리(Cleanup)하기

useEffect(() => {
  // 사이드 이펙트

  return () => {
    // 정리
  }
}, [dep1, dep2, dep3, ...]);

📘useRef

생성하고 DOM 노드에 연결하기

const ref = useRef();

// ...

return <div ref={ref}>안녕 리액트!</div>;

DOM 노드 참조하기

const node = ref.current;
if (node) {
  // node를 사용하는 코드
}

📘useCallback

함수를 매번 새로 생성하는 것이 아니라 디펜던시 리스트가 변경될 때만 함수를 생성

const handleLoad = useCallback((option) => {
  // ...
}, [dep1, dep2, dep3, ...]);

📘Custom Hook

자주 사용하는 Hook 코드들을 모아서 함수로 만들 수 있다.

이때 useOOO 처럼 반드시 맨 앞에 use 라는 단어를 붙여서 다른 개발자들이 Hook이라는 걸 알 수 있게 해줘야 한다.

useHooks – The React Hooks Library

https://github.com/streamich/react-use

📗useAsync

비동기 함수의 로딩, 에러 처리를 하는 데 사용할 수 있는 함수

함수를 asyncFunction 이라는 파라미터로 추상화해서 wrappedFunction 이라는 함수를 만들어 사용하는 방식을 눈여겨보자.

function useAsync(asyncFunction) {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState(null);

  const wrappedFunction = useCallback(async (...args) => {
    setPending(true);
    setError(null);
    try {
      return await asyncFunction(...args);
    } catch (error) {
      setError(error);
    } finally {
      setPending(false);
    }
  }, [asyncFunction]);

  return [pending, error, wrappedFunction];
}

📗useToggle

toggle 함수를 호출할 때마다 value 값이 참/거짓으로 번갈아가며 바뀐다.

ON/OFF 스위치 같은 걸 만들 때 유용함

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue((prevValue) => !prevValue);
  return [value, toggle];
}

📗useTimer

start 를 실행하면 callback 이라는 파라미터로 넘겨 준 함수를 timeout 밀리초 마다 실행하고, stop 을 실행하면 멈춘다.

setInterval 이란 함수는 웹 브라우저에 함수를 등록해서 일정한 시간 간격마다 실행한다. 실행할 때마다 사이드 이펙트를 만들고, 사용하지 않으면 정리를 해줘야 한다.

clearInterval 이라는 함수를 실행해서 사이드 이펙트를 정리하는 부분을 눈여겨보자.

function useTimer(callback, timeout) {
  const [isRunning, setIsRunning] = useState(false);

  const start = () => setIsRunning(true);

  const stop = () => setIsRunning(false);

  useEffect(() => {
    if (!isRunning) return;

    const timerId = setInterval(callback, timeout); // 사이드 이펙트 발생
    return () => {
      clearInterval(timerId); // 사이드 이펙트 정리
    };
  }, [isRunning, callback, timeout]);

  return [start, stop];
}

✨디펜던시(exhaustive-deps)

📘exhaustive-deps 규칙

아래 코드는 num 버튼을 누르면 num 스테이트 값이 증가되고,

count 버튼을 누르면 count 스테이트 값을 증가시키는 컴포넌트다.

이때 count 스테이트 값을 증가시키면서 콘솔에는 num 스테이트 값을 출력한다.

useEffect Hook에서는 1초마다 addCount 함수를 실행하는 타이머를 실행한다.

import { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  const addCount = () => {
    setCount(c => c + 1);
    console.log(`num: ${num}`);
  }

  const addNum = () => setNum(n => n + 1);

  useEffect(() => {
    console.log('timer start');
    const timerId = setInterval(() => {
      addCount();
    }, 1000);

    return () => {
      clearInterval(timerId);
      console.log('timer end');
    };
  }, []);

  return (
    <div>
      <button onClick={addCount}>count: {count}</button>
      <button onClick={addNum}>num: {num}</button>
    </div>
  );
}

export default App;

이 코드를 실행해보면 1초마다 count 값이 증가하는데,

버튼을 클릭해서 num 스테이트의 값이 바뀌더라도 콘솔 출력에서는 숫자가 바뀌지 않고 0만 계속 출력된다는 문제가 있다.

그 이유는 useEffect 안에서 addCount 라는 함수를 사용하는데, 이 함수에서는 num 스테이트 값을 잘못 참조하기 때문이다. (과거의 num 스테이트 값을 계속해서 참조하고 있기 때문)

⚠️이런 문제점을 경고해주는 규칙이 react-hooks/exhaustive-deps 라는 규칙

리액트에서는 Prop이나 State와 관련된 값은 되도록이면 빠짐없이 디펜던시에 추가해서 항상 최신 값으로 useEffect 나 useCallback 을 사용하도록 권장하고 있다.

import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  const addCount = () => {
    setCount((c) => c + 1);
    console.log(`num: ${num}`);
  };

  const addNum = () => setNum((n) => n + 1);

  useEffect(() => {
    console.log('timer start');
    const timerId = setInterval(() => {
      addCount();
    }, 1000);

    return () => {
      clearInterval(timerId);
      console.log('timer end');
    };
  }, [addCount]);

  return (
    <div>
      <button onClick={addCount}>count: {count}</button>
      <button onClick={addNum}>num: {num}</button>
    </div>
  );
}

export default App;

하지만 이렇게 하면 한 가지 문제가 있다.

실행해서 콘솔을 확인해보면 count 가 바뀔 때마다 타이머를 새로 시작하고 종료하는 걸 반복한다.

addCount 라는 함수는 렌더링 할 때마다 새로 만들어지는데, 이걸 디펜던시 리스트에 추가했기 때문에 useEffect 의 콜백이 매번 불필요하게 실행되는 버그가 있다.

📘useCallback으로 함수 재사용하기

import { useCallback, useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  const addCount = useCallback(() => {
    setCount((c) => c + 1);
    console.log(`num: ${num}`);
  }, [num]);

  const addNum = () => setNum((n) => n + 1);

  useEffect(() => {
    console.log('timer start');
    const timerId = setInterval(() => {
      addCount();
    }, 1000);

    return () => {
      clearInterval(timerId);
      console.log('timer end');
    };
  }, [addCount]);

  return (
    <div>
      <button onClick={addCount}>count: {count}</button>
      <button onClick={addNum}>num: {num}</button>
    </div>
  );
}

export default App;

디펜던시 리스트에 추가한 함수가 매번 바뀌는 문제를 해결하려면 함수를 useCallback 으로 감싸주면 된다.

useCallback 을 사용하면 함수를 매번 생성하는 게 아니라 리액트에다 함수를 기억해둘 수 있다.

이때 리액트는 useCallback 의 디펜던시 리스트 값이 바뀔 때만 함수를 새로 만들어준다. addCount 함수에서는 num 이라는 스테이트를 참조하고 있으니까 이 값을 디펜던시 리스트에 추가했다. 이렇게하면 리액트는 num 값이 바뀔 때만 addCount 함수를 새로 만들 것이다.

useEffect 의 디펜던시로 addCount 가 들어가 있으니까, 결론적으로 useEffect 의 콜백은 num 값이 바뀔 때만 새로 실행된다.

이런 식으로 컴포넌트 안에서 만든 함수를 디펜던시 리스트에 사용할 때는 useCallback 훅으로 매번 함수를 새로 생성하는 걸 막을 수 있다.

📘파라미터를 활용하자

addCount 라는 함수에서 num 값을 꼭 직접 참조할 필요는 없다.

그래서 useCallback 을 쓰지 않고, 아래처럼 파라미터로 받아오게 할 수 있다.

이렇게 하면 addCount 함수 자체만 놓고 보면 바깥에 있는 스테이트 값을 직접적으로 참조하지 않기 때문에 오래된 스테이트 값을 참조할 염려가 없다.

import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);

  const addCount = (log) => {
    setCount((c) => c + 1);
    console.log(log);
  }

  const addNum = () => setNum((n) => n + 1);

  useEffect(() => {
    console.log('timer start');
    const timerId = setInterval(() => {
      addCount(`num ${num}`);
    }, 1000);

    return () => {
      clearInterval(timerId);
      console.log('timer end');
    };
  }, [num]);

  return (
    <div>
      <button onClick={addCount}>count: {count}</button>
      <button onClick={addNum}>num: {num}</button>
    </div>
  );
}

export default App;

디펜던시 리스트를 이렇게 바꾸면 num 값이 바뀔 때마다 타이머를 재시작한다는 게 좀 더 명확해진다.

Prop이나 State 값을 사용할 때는 이렇게 되도록이면 파라미터로 넘겨서 사용하면,

어떻게 사용되는지 코드에서 명확하게 보여줄 수 있다.

✨Context

• 많은 컴포넌트에서 사용하는 데이터를 반복적인 prop(prop drilling) 전달 없이 공유

prop Drilling

상위 컴포넌트에서 하위 컴포넌트로 반복해서 prop을 내려주는 상황

→ 해결) context를 만듦

📘Context 만들기

Context는 createContext 라는 함수를 통해 만들 수 있다.

import { createContext } from 'react';

const LocaleContext = createContext();

참고로 이때 아래처럼 기본값을 넣어줄 수도 있다.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

📘Context 적용하기

Context를 쓸 때는 반드시 값을 공유할 범위를 정하고 써야 한다.

이때 범위는 Context 객체에 있는 Provider 라는 컴포넌트로 정해줄 수 있다.

이때 Provider의 value prop으로 공유할 값을 내려주면 된다.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

📘Context 값 사용하기

useContext 라는 Hook을 사용하면 값을 가져와 사용할 수 있다.

이때 아규먼트로는 사용할 Context를 넘겨주면 된다.

import { createContext, useContext } from 'react';

const LocaleContext = createContext('ko');

function Board() {
  const locale = useContext(LocaleContext);
  return <div>언어: {locale}</div>;
}

function App() {
  return (
    <div>
       <LocaleContext.Provider value="en">
          <Board />
       </LocaleContext.Provider>
    </div>
  );
}

📘State, Hook와 함께 활용하기

Provider 역할을 하는 컴포넌트를 하나 만들고, 여기서 State를 만들어서 value 로 넘겨줄 수 있다.

그리고 아래의 useLocale 같이 useContext 를 사용해서 값을 가져오는 커스텀 Hook을 만들 수도 있다. 이렇게 하면 Context에서 사용하는 State 값은 반드시 우리가 만든 함수를 통해서만 쓸 수 있기 때문에 안전한 코드를 작성하는데 도움이 된다.

import { createContext, useContext, useState } from 'react';

const LocaleContext = createContext({});

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState();
  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { locale } = context;
  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { setLocale } = context;
  return setLocale;
}

📘기본형

• 기본형 데이터를 변수에 할당하면 값 자체가 변수에 복제된다. 변수와 값 사이에 직접적인 관계를 갖지 않고, 값이 변경되어도 다른 변수에는 영향을 주지 않는다. (불변값)
• 숫자, 문자열, 불리언, null, undefined, Symbol

📘참조형

• 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 (가변값)
• 참조형 데이터를 변수에 할당하면 값이 담긴 메모리 주소(참조)가 변수에 복제된다.
• 배열, 객체, 함수

✨데이터타입에 관한 배경지식

과거에는 메모리 용량이 제한적이었기 때문에 작은 크기의 정수형 타입(short 등)을 사용하여 메모리를 절약했다. 하지만 특정 범위를 벗어나는 값이 입력되면 오류가 발생하거나 잘못된 값이 저장되는 문제가 있었다. 이를 해결하기 위해 사용자가 직접 형변환을 해야 했다.

현대의 자바스크립트와 같은 프로그래밍 언어는 메모리 용량이 훨씬 커졌기 때문에 이러한 메모리 제약이 크게 줄었다. 숫자형 데이터의 크기에 대한 걱정이 덜해졌고, 대부분의 경우에는 64비트, 즉 8바이트를 사용하여 숫자를 저장한다. 그래서 형변환이나 메모리 제약과 같은 문제를 걱정할 필요가 없어졌다.

모든 데이터는 바이트 단위의 식별자 (메모리 주솟값)을 통해 서로 구분하고 연결할 수 있다.

📘식별자와 변수

변수: 변할 수 있는 수(변경 가능한 데이터가 담길 수 있는 공간) 식별자: 어떤 데이터를 식별하는 데 사용하는 이름 (변수명)

✨변수 선언과 데이터 할당

변수 영역: 변수와 상수를 구분 짓는 곳 데이터 영역: 불변성 여부를 구분하는 곳

var a = 'abc'

var obj 1 = { 
    a: 1 , 
    b: 'bbb' 
}; 

참조형은 객체의 변수 영역이 별도로 존재한다. 객체가 별도로 할애한 영역은 변수 영역일 뿐 데이터 영역은 기존의 공간의 메모리 공간을 그대로 활용하고 있다. 변수에는 다른 값을 얼마든지 대입할 수 있기 때문에 참조형은 가변값이라고 하는 것이다.

📘변수 영역과 데이터 영역을 분리하는 이유

*- 구조화된 메모리 관리 *프로그램의 변수와 데이터를 각각의 목적에 맞게 분리하여 메모리를 효율적으로 관리할 수 있다. *- 변수와 데이터의 독립성 유지 *변수와 데이터가 분리되면 변수에 대한 수정이 데이터에 영향을 미치지 않으며, 데이터의 변경이 변수에 영향을 주지 않는다.

✨기본형 데이터와 참조형 데이터

📘불변값

• 값이 생성된 후에 변경할 수 없는 특성
• 기본형 데이터는 모두 불변값이다.
• 새로운 값을 할당하면 이전 값은 변하지 않고 메모리에 새로운 공간에 저장된다.
• 데이터 영역에 저장된 값은 모두 불변값

  var name = '보'
  name = name + '미'

  변수name에 문자열 '보' 를 할당했다가 뒤에 '미'를 추가하면 기존의 '보'가 '보미'로 바뀌는 것이 아니라 새로운 문자열 '보미'를 만들어 그 주소를 변수에 저장한다.

• '보'와 '보미'는 완전히 별개의 데이터!

• 주소가 다르다고 생각하자. 변수영역에 name이 생기고, 데이터 영역의 (예를 들어) 5003에 보가 저장되어있는 것이고, 나중에 보미라는 문자열이 5004에 저장되는 것. 그래서 변수영역의 값이 5003에서5004로 바뀐다는 뜻.

📘가변값

• 값이 생성된 후에 변경할 수 있는 특성
• 참조형 데이터는 같은 메모리 주소를 공유하는 다른 변수나 객체에 영향을 줄 수 있다.

  let person = { name: '보미' };
  person.name = '보라'; // 객체 내의 속성 값 변경 가능

  📘변수 복사 비교

  기본형

  // 기본형 데이터 (원시형)
  let num1 = 10; // 숫자
  let str1 = "Hello"; // 문자열
  

// 변수에 복사된 값 확인 let copiedNum1 = num1; let copiedStr1 = str1;

// 변수의 값 변경 num1 = 20; str1 = "World";

// 변수의 값과 복제된 값 출력 console.log(num1); // 20 console.log(copiedNum1); // 10 console.log(str1); // "World" console.log(copiedStr1); // "Hello"

### 참조형

```js
// 참조형 데이터 (객체형)
let obj1 = { name: "John", age: 30 }; // 객체
let arr1 = [1, 2, 3, 4, 5]; // 배열

// 변수에 복사된 값 확인
let copiedObj1 = obj1;
let copiedArr1 = arr1;

// 변수의 값 변경
obj1.name = "Jane";
arr1.push(6);

// 변수의 값과 복제된 값 출력
console.log(obj1); // { name: "Jane", age: 30 }
console.log(copiedObj1); // { name: "Jane", age: 30 }
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(copiedArr1); // [1, 2, 3, 4, 5, 6]

✨불변 객체

불변 객체: 한 번 생성되면 그 상태를 변경할 수 없는 객체

❓불변 객체가 왜 필요할까

값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우가 있다.

// 가변성으로 인한 문제점

const obj1 = { value: 10 };

const obj2 = obj1;

obj1.value = 20;

console.log(obj2.value); // 출력 결과: 20

obj1과 obj2가 동일한 객체를 가리키고 있다.

📘불변 객체 만드는 간단한 방법

해결책)

const obj1 = { value: 10 };

// 객체의 프로퍼티를 복사하여 새로운 객체 생성
const obj2 = { ...obj1 };

obj1.value = 20;

console.log(obj2.value); // 출력 결과: 10

obj1을 복사하여 새로운 객체를 만든다.

📘얕은 복사와 깊은 복사

얕은 복사 (Shallow Copy)

• 객체의 최상위 레벨만을 복사하고 내부 객체는 참조로 복사하는 방식
• 바로 아래 단계의 값만 복사한다.
• 프로퍼티 값이 객체일 경우에는 해당 객체를 참조로 복사한다. (복사된 객체와 원본 객체가 같은 객체를 참조)
• 복사된 객체의 프로퍼티 값이 변경되면, 원본 객체의 프로퍼티 값도 변경될 수 있다.
• Object.assign()이나 Spread 연산자(...)

  // 얕은 복사 예시
  

// 원본 객체 const originalObj = { name: '보미', age: 25, address: { city: '서울', country: '대한민국' } };

// 얕은 복사 const shallowCopyObj = { ...originalObj };

// 원본 객체와 얕은 복사된 객체의 주소 확인 console.log(originalObj === shallowCopyObj); // false

// 내부 객체의 주소 확인 // 내부 객체인 address는 얕은 복사되어 참조로 복사되었기 때문에 동일한 메모리 주소를 가짐 console.log(originalObj.address === shallowCopyObj.address); // true

// 내부 객체 변경 originalObj.address.city = '제주도';

// 얕은 복사된 객체의 내부 객체도 변경되었는지 확인 // originalObj의 address 객체를 변경 -> shallowCopyObj.address도 같은 객체를 참조하고 있기 때문에 shallowCopyObj 객체에서 address 객체의 변화가 반영됨 console.log(shallowCopyObj.address.city); // 제주도

### 깊은 복사 (Deep Copy)
- 원본 객체의 모든 프로퍼티들을 재귀적으로 복사하여 완전히 새로운 객체를 생성한다.
- 새로운 객체와 원본 객체는 완전히 독립적이며, 서로 다른 메모리 공간을 참조한다.
- 복사된 객체의 프로퍼티 값이 변경되어도, 원본 객체의 프로퍼티 값은 영향을 받지 않는다.
- JSON.stringify()와 JSON.parse()
```js
// 원본 객체
const originalObj = {
  name: '보미',
  age: 25,
  address: {
    city: '서울',
    country: '대한민국'
  }
};

// 깊은 복사
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));

// 원본 객체와 깊은 복사된 객체의 주소 확인
console.log(originalObj === deepCopyObj); // false

// 내부 객체의 주소 확인
console.log(originalObj.address === deepCopyObj.address); // false

// 내부 객체 변경
originalObj.address.city = '제주도';

// 깊은 복사된 객체의 내부 객체가 변경되었는지 확인
console.log(deepCopyObj.address.city); // 서울

• 깊은 복사를 사용하면 내부 객체의 변경이 원본 객체나 다른 복사된 객체에 영향을 주지 않는다.
• 깊은 복사는 JSON 문자열을 중간에 생성하므로 일부 데이터 타입이나 함수 등을 복사할 수 없는 한계가 있다.

✨undefined와 null

📘undefined

• 변수에 값이 할당되지 않았거나, 객체에서 존재하지 않는 프로퍼티에 접근할 때 반환된다.
• 변수가 선언되었지만 초기화되지 않았거나, 함수에서 반환값이 명시되지 않은 경우에도 undefined가 반환된다.
• 자바스크립트 엔진이 자동으로 부여하는 값으로, 직접 할당하는 경우도 있지만 보통은 변수가 초기화되지 않았을 때 발생한다.

📘null

• null은 의도적으로 "값이 없음"을 나타내는 데 사용된다.
• 변수에 의도적으로 값이 없음을 할당하거나, 객체의 프로퍼티를 삭제할 때 주로 사용된다.
• null은 객체가 존재하지 않음을 나타내는 것이 아니라, 객체가 있는데 그 값이 없음을 나타낸다.

// 변수 선언만 하고 초기화되지 않은 경우
let undefinedVariable;
let nullVariable = null;

// 값이 없음을 나타내는 변수에 대한 비교
console.log(undefinedVariable === undefined); // true
console.log(nullVariable === null); // true

// undefined와 null 비교
// 서로 다른 데이터 타입이므로 === 비교 연산자를 사용하여 비교할 때 false 반환
console.log(undefined === null); // false

✨오프셋 기반 페이지네이션

📘동작 방식

데이터를 가져올 때 오프셋(offset)과 리미트(limit)를 사용하여 명시된 개수의 항목을 건너뛰고 가져온다.

function App() {
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(1);
  const limit = 20; // 한 페이지에 표시할 아이템 수

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 페이지 번호와 limit을 곱하여 offset 값을 계산합니다.
        const offset = (page - 1) * limit;
        // 데이터베이스에서 offset부터 limit까지의 아이템을 가져옵니다.
        const response = await axios.get(`/users?offset=${offset}&limit=${limit}`);
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, [page]);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={() => setPage(page => page + 1)}>Next Page</button>
    </div>
  );
}

offset: 지금까지 받아온 데이터 개수 limit: 한 페이지에 표시할 아이템 수

전체 데이터가 20개이고 페이지당 표시할 항목의 수가 10개인 경우)

// 첫 번째 페이지의 데이터를 가져올 때
const offsetFirstPage = 0;
const limit = 10;
// 데이터베이스에서 0부터 limit(10)까지의 아이템을 가져온다.
// 따라서 첫 번째 페이지에는 첫 10개의 항목이 표시된다.

// 두 번째 페이지의 데이터를 가져올 때
const offsetSecondPage = 10;
// 데이터베이스에서 10부터 limit(10)까지의 아이템을 가져온다.
// 따라서 두 번째 페이지에는 11번째부터 20번째까지의 항목이 표시된다.

첫번째 페이지에서는 offset이 0이므로 데이터베이스에서 0부터 limit만큼의 아이템을 가져온다.

두 번째 페이지에서는 offset이 limit의 배수가 되므로 다음 limit만큼의 아이템을 가져온다.

페이지를 변경할 때마다 이전 페이지의 아이템을 건너뛰고 새로운 페이지의 아이템을 가져오는 원리다.

📘장점

• 간단하고 직관적인 구현이 가능하다.
• 데이터가 적을 때에는 효율적이다.

📘단점

• 대량의 데이터를 처리할 때 성능이 저하될 수 있다. (각 페이지를 가져올 때마다 모든 이전 데이터를 건너뛰어야 하기 때문)
• 데이터가 변경되면 페이지의 인덱스가 변경될 수 있다.

✨커서 기반 페이지네이션

📘동작 방식

• 이전 페이지에서 가져온 마지막 항목의 커서(cursor)를 사용하여 다음 페이지의 항목을 가져온다.
• 이전 페이지와 다음 페이지 사이의 관계를 유지하며 데이터를 가져온다.

📘장점

• 대량의 데이터를 처리할 때 성능이 좋다.(이전 페이지의 데이터를 매번 다시 탐색하지 않기 때문)
• 데이터가 변경되어도 페이지 인덱스를 업데이트할 필요가 없다.

📘단점

• 구현이 복잡하다.(이전 페이지의 커서를 유지하고 다음 페이지의 데이터를 가져오는 방식을 처리해야 함)
• 커서를 유지하는 데 필요한 추가적인 리소스가 있을 수 있다.

데이터베이스의 크기와 사용 사례에 따라 오프셋 기반 페이지네이션과 커서 기반 페이지네이션 중에서 선택할 수 있다.

데이터베이스가 작고 변경이 자주 일어나지 않는 경우에는 오프셋 기반 페이지네이션을 사용할 수 있지만, 대용량의 데이터나 변경이 빈번한 경우에는 커서 기반 페이지네이션을 사용하는 것이 좋다.

function App() {
  const [users, setUsers] = useState([]);
  const [cursor, setCursor] = useState(null); // 초기 커서는 null로 설정
  const perPage = 10; // 페이지당 보여질 개수

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get(`/users?cursor=${cursor}&limit=${perPage}`);
        setUsers(response.data.users);
        setCursor(response.data.next_cursor); // 다음 페이지의 커서를 설정
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, [cursor, perPage]);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      {cursor && <button onClick={() => setCursor(cursor)}>Next Page</button>}
    </div>
  );
}

초기 커서를 null로 설정하고, 페이지를 로드할 때마다 해당 페이지의 커서를 사용하여 다음 페이지의 데이터를 가져오도록 한다. 페이지당 보여질 개수를 perPage 상수로 설정하고, 커서 기반 페이지네이션을 구현할 때 각 페이지마다 이 값을 사용하여 쿼리를 수행한다.

리액트는 왜 만들어지게 되었을까? 리액트의 설계 의도는 무엇일까?

web의 눈부신 발전과 리액트의 탄생

기술이 어떤 시대적인 배경에서 어떤 문제를 해결하기 위해 탄생했는지 알아야 한다.

90_00: 읽기 전용 기반의 웹 서비스가 대부분 오늘날: 사용자와 실시간으로 상호작용하는 서비스들이 대세, read-write 기반의 웹 서비스 -> 현대 웹서비스 개발에서 화면 업데이트(인터렉션) 구현의 중요성이 매우 높아짐

JQuery

• 바닐라 js 기반으로 DOM을 직접 수정하는 방식으로 동작함.
• 크로스 브라우징 이슈를 해결하고자 만들어짐.
• 쉽고 빠르게 다양한 업데이트를 구현하기에는 무리가 있었음.

리액트

• 화면 업데이트를 더 쉽게 구현할 수 있음.
• 화면 업데이트가 빠름, 최적화가 거의 자동으로 이루어짐

리액트3가지 핵심 특징

1. 컴포넌트 기반의 UI 표현

컴포넌트: 구성요소 -> 화면을 구성(UI를 구성)하는 요소 UI 모듈화 가능 -> 중복 코드 최소화

2. 선언형 프로그래밍을 통한 쉬운 업데이트

선언형 프로그래밍: 과정은 생략하고 목적만 간결히 명시하는 방법 명령형 프로그래밍: 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식

리액트에서는 선언형으로 업데이트를 구현할 수 있다. -> 업데이트를 위한 모든 로직을 일일이 작성하지 않아도 됨.

State 상태

• 컴포넌트 내부에 선언할 수 있는 특별한 변수
• 컴포넌트가 현재 어떤 상태인지 저장하는 역할
• 상태 값에 따라 컴포넌트가 렌더링 하는 UI를 바꿀 수 있음

✔️리엑트에서는 업데이트를 구현할 때 state만 바꾸면 된다.

3. 자체 렌더링 프로세스를 통한 빠른 업데이트

리액트는 화면 업데이트를 쉽게 구현할 수 있으면서 동시에 빠르게 처리한다. ❓어떻게 이럴 수 있을까?

브라우저는 어떻게 동작하는가?

1. HTML 파싱: HTML 문서를 파싱하여 DOM 트리를 생성
2. CSS 파싱: CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성
3. 렌더 트리 구성: DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성
4. 레이아웃: (reflow) 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하여 레이아웃을 수행
5. 페인팅: (repainting) 레이아웃이 완료되면 화면에 픽셀을 그리는 과정인 페인팅이 수행

-> 업데이트할 때마다 DOM 전체가 업데이트 된다. -> 리액트는 동시에 발생한 업데이트를 모아서 한번에 수정한다.(자동으로 해줌)

Virtual DOM

• DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판임
• 리액트는 가상 DOM을 사용한다.
• 엘리먼트를 새로 렌더링할 때 리액트는 그 모습을 실제 DOM트리에 바로 반영하는 것이 아니라 가상 DOM에 적용한다.
• 리액트는 state 변경 전의 가상 DOM과 변경 후의 가상 DOM을 비교한다. 그래서 바뀐 부분만 찾아내고 각각에 해당하는 실제 DOM 노드를 변경한다.

뷰도 배워야 하나? 배우면 좋겠지만 비추. 뷰가 할 수 있는 건 리액트도 다 할 수 있음

리덕스: 리덕스 툴킷 많이 씀. 경량화된 라이브러리 주스탕: 리덕스에서 더 경량화 된 라이브러리 (추천 + 리덕스도 함께 하는 것도 추천)

면접에서) 프로젝트에서 리덕스를 썼다고 가정했다면, 주스탕과 리덕스의 차이점에 대해 설명하면서 왜 더 좋았는지 이걸 써는지 어필..

토이프로젝트를 대하는 방식에 대해 생각해보자 https://velog.io/@dus532/series/%EC%86%8C%ED%94%84%ED%8A%B8%EC%BD%98-%EB%B7%B0%EC%96%B4%EC%89%BD-%EC%A0%9C%EC%9E%91%EA%B8%B0

챗지피티를 활용해서 10년된 개발자가 짠 코드 알려줘해서 -> 코드 비교해보기

리액트 설계원리에 맞춰서 코딩해라 https://react.dev/learn/thinking-in-react

리액트는 Flux패턴

✨JSX란?

• JSX는 자바스크립트의 확장 문법
• 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);

render 메소드는 첫 번째 아규먼트 값을 활용해서 HTML요소를 만들고, 두 번째 아규먼트 값에 그 요소를 넣어 주는 역할을 함.

✨JSX 문법

JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들도 있습니다.

HTML과 다른 속성명

1. 속성명은 카멜 케이스로 작성하기

JSX 문법에서도 태그에 속성을 지정해 줄 수 있다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case)로 작성해야 한다.

단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스(Camel Case)가 아니라 기존의 HTML 문법 그대로 작성해야 한다.

  <div>
    상태 변경:
    <button className="btn" data-status="대기중">대기중</button>
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>

2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다

JSX 문법도 결국은 자바스크립트 문법이기 때문에, for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없다. 그래서 HTML의 for의 경우에는 자바스크립트의 반복문 키워드 for와 겹치기 때문에 htmlFor로, HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성해야 한다.

  <form>
    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />
  </form>

반드시 하나의 요소로 감싸기 - Fragment

JSX 문법을 활용할 때는 반드시 하나의 요소로 감싸야 한다.

Fragment로 감싸주면 의미 없는 부모 태그를 만들지 않아도 여러 요소를 작성할 수 있다.

ReactDOM.render(
  <Fragment>
    <p>안녕</p>
    <p>리액트!</p>
  </Fragment>

참고로 Fragment는 아래 코드처럼 빈 태그로 감싸는 단축 문법으로 활용할 수도 있다.

  <>
    <p>안녕</p>
    <p>리액트!</p>
  </>

자바스크립트 표현식 넣기

JSX 문법에서 중괄호({})를 활용하면 자바스크립트 표현식을 넣을 수 있다.

import ReactDOM from 'react-dom';

const product = '맥북';

ReactDOM.render(
  <h1>나만의 {product} 주문하기</h1>,
  document.getElementById('root')
);

단, JSX 문법에서 중괄호는 자바스크립트 표현식을 다룰 때 활용하기 때문에, 중괄호 안에서 for, if문 등의 문장은 다룰 수 없다는 점! 그런데도 만약 JSX 문법을 활용할 때 조건문이 꼭 필요하다면 조건 연산자를, 반복문이 꼭 필요하다면 배열의 반복 메소드를 활용할 수는 있다…

✨리액트 엘리먼트

JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}

• 이런 객체를 리액트 엘리먼트라고 부름.
• 이 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것.
• 리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소다.

✨리액트 컴포넌트

• 리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법이다.
• 컴포넌트를 만드는 가장 간단한 방법은 자바스크립트의 함수를 활용하는 것임.
• 아래 코드에서 JSX 문법으로 작성된 하나의 요소를 리턴하는 Hello 함수가 바로 하나의 컴포넌트다.

import ReactDOM from 'react-dom';

function Hello() {
  return <h1>안녕 리액트</h1>;
}

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

ReactDOM.render(element, document.getElementById('root'));

• 컴포넌트를 작성하면, 위 코드에서 element 변수 안의 JSX 코드에서 볼 수 있듯 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수 있다.
• 이런 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수 있다.
• 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 한다는 것.

✨Props

JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부른다.

• Props는 Properties의 약자
• 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.

✨Children

props에는 children이라는 프로퍼티(prop, 프롭)가 있다.

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다.

Button.js

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

App.js

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;

• JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고,
• 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용한다.
• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 객체이며, children은 React 컴포넌트의 태그 내에 포함된 내용을 나타냄

✨State

• state는 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 한다.
• 리액트에서 state를 만들고, state를 바꾸기 위해 useState라는 함수를 쓴다.

import { useState } from 'react';

// ...

  const [num, setNum] = useState(1);

// ...

• 보통 Destructuring 문법으로 작성한다.
• useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴을 하기 때문.
• 첫 번째 요소가 바로 state이고, 두 번째 요소가 이 state를 바꾸는 setter 함수
• 첫 번째 변수는 원하는 state의 이름(num)을 지어주고, 두 번째 변수에는 state 이름 앞에 set을 붙인 다음 카멜 케이스로 이름을 지어주는 것(setNum)이 일반적이다.
• state는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이 아니라 이 setter 함수를 활용해야 한다. setter 함수는 호출할 때 전달하는 아규먼트 값으로 state 값을 변경해 준다.

setter 함수를 활용해서 이벤트 핸들러를 등록해두면, 이벤트가 발생할 때마다 상태가 변하면서 화면이 새로 그려지는 것이다.

import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

function App() {
  const [num, setNum] = useState(1);

  const handleRollClick = () => {
    setNum(3); // num state를 3으로 변경!
  };

  const handleClearClick = () => {
    setNum(1); // num state를 1로 변경!
  };

  return (
    <div>
      <Button onClick={handleRollClick}>던지기</Button>
      <Button onClick={handleClearClick}>처음부터</Button>
      <Dice color="red" num={num} />
    </div>
  );
}

export default App;

✨참조형 State

자바스크립트의 자료형은 크게 기본형(Primitive type)과 참조형(Reference type)로 나뉜다.

// ...

  const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    gameHistory.push(nextNum);
    setGameHistory(gameHistory); // state가 제대로 변경되지 않는다!
  };

// ...

• 배열 값을 가진 gameHistory에 push 메소드를 이용해서 배열의 값을 변경한 다음, 변경된 배열을 setter 함수로 state를 변경하려고 하면 코드가 제대로 동작하지 않는다.
• gameHistory state는 배열 값 자체를 가지고 있는 게 아니라 그 배열의 주솟값을 참조하고 있는 것이다. 때문에 push 메소드로 배열 안에 요소를 변경했다고 하더라도 결과적으로 참조하는 배열의 주솟값은 변경된 것이 아니다.
• 결과적으로 리액트 입장에서는 gameHistory state가 참조하는 주솟값은 여전히 똑같기 때문에 상태(state)가 바뀌었다고 판단하지 않는 것이다.
• 참조형 state를 활용할 때는 반드시 새로운 참조형 값을 만들어 state를 변경해야 한다.

가장 간단한 방법은 Spread 문법(...) 을 활용하는 것!!

// ...

  const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    setGameHistory([...gameHistory, nextNum]); // state가 제대로 변경된다!
  };

// ...

참조형 state를 활용할 땐 반드시 새로운 참조형 값을 만들어서 state를 변경해야 한다는 점!!

✨컴포넌트

📘컴포넌트 장점

• 반복적인 개발 줄어듦.
• 오류를 고치기 쉽다.
• 일을 쉽게 나눌 수 있다.

✨리액트가 렌더링하는 방식

기본적으로 HTML 요소들은 DOM 트리라고 하는 자료구조로 저장되어 있다.

리액트는 가상 DOM이라는 자료구조를 사용한다.

그래서 엘리먼트를 새로 렌더링할 때 리액트는 그 모습을 실제 DOM트리에 바로 반영하는 것이 아니라 가상 DOM에 적용한다.

리액트는 state 변경 전의 가상 DOM과 변경 후의 가상 DOM을 비교한다. 그래서 바뀐 부분만 찾아내고 각각에 해당하는 실제 DOM 노드를 변경한다.

• 개발자가 직접 DOM 노드를 신경쓸 필요가 없어 단순하고 깔끔한 코드를 작성할 수 있다.
• 변경 사항들을 리액트가 적당히 모아 적당히 나눠서 브라우저에 전달한다. → 변경사항들을 효율적으로 관리할 수 있다.

가상 DOM을 활용해 효율적인 화면을 처리할 수 있다.

⚠️DOM vs Virtual DOM

✨디자인을 적용하는 방법

📘이미지 불러오기

이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용.

import diceImg from './assets/dice.png';

function Dice() {
  return <img src={diceImg} alt="주사위 이미지" />;
}

export default App;

📘인라인 스타일

리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용한다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 쓰는데, 이때 프로퍼티 이름은 아래의 boarderRadius 처럼 대시 기호 없이 카멜 케이스로 써야 한다.

import diceImg from './assets/dice.png';

const style = {
  borderRadius: '50%',
  width: '120px',
  height: '120px',
};

function Dice() {
  return <img style={style} src={diceImg} alt="주사위 이미지" />;
}

export default App;

📘CSS 파일 불러오기

import 구문으로 파일을 불러오고 from 키워드 없이 쓰기

import diceImg from './assets/dice.png';
import './Dice.css';

function Dice() {
  return <img src={diceImg} alt="주사위 이미지" />;
}

export default App;

📘클래스네임 사용하기

CSS 파일에 정의된 클래스명을 className prop에 문자열로 넣어주면 됩니다. 이때 재사용성을 위해 className prop을 부모 컴포넌트에서 받으면 더 좋다.

import diceImg from './assets/dice.png';
import './Dice.css';

function Dice({ className = '' }) {
  const classNames = `Dice ${className}`;
  return <img className={classNames} src={diceImg} alt="주사위 이미지" />;
}

export default App;

✨편리하게 클래스네임을 쓰는 방법

개수가 늘어날수록 아래처럼 알아보기 힘들어진다는 문제점이 있다.

템플릿 문자열을 사용한 예

function Button({ isPending, color, size, invert, children }) {
  const classNames = `Button ${isPending ? 'pending' : ''} ${color} ${size} ${invert ? 'invert' : ''}`;
  return <button className={classNames}>{children}</button>;
}

export default Button;

배열을 사용한 예

function Button({ isPending, color, size, invert, children }) {
  const classNames = [
    'Button',
    isPending ? 'pending' : '',
    color,
    size,
    invert ? 'invert' : '',
  ].join(' ');
  return <button className={classNames}>{children}</button>;
}

export default Button;

지저분하게 느껴지고, 매번 반복되는 코드를 작성한다는 번거로움이 있다. 개발자들은 이럴 때 라이브러리라는 걸 쓰는데, 다른 개발자가 미리 만들어 놓은 코드를 이용해서 편하게 개발하는 것이다.

클래스네임의 경우에도 편리하게 사용할 수 있는 라이브러리가 많이 있다. → classnames라는 라이브러리

클래스네임에만 집중할 수 있어 훨씬 읽기 편해진다.

classnames 라이브러리를 사용한 예

import classNames from 'classnames';

function Button({ isPending, color, size, invert, children }) {
  return (
    <button
      className={classNames(
        'Button',
        isPending && 'pending',
        color,
        size,
        invert && 'invert',
      )}>
     { children }
   </button >
  );
}

export default Button;

classnames 은 NPM이라는 프로그램을 통해 설치할 수 있다. 터미널에서 npm install classnames 을 입력하고 설치한 다음에, 위 예시처럼 import 로 불러와서 사용하면 된다.

리액트 빌드하기

npm run build

npx serve build

✨명령어 정리

프로젝트 생성하기

npm init react-app .

터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성

개발 모드 실행하기

npm start (npm run start)

터미널에서 npm run start를 입력하면 개발 모드 서버가 실행

실행 중인 서버 종료하기

ctrl + c

서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료

개발된 프로젝트 빌드하기

npm run build

터미널에서 npm run build를 입력하면 빌드를 시작

빌드한 것 로컬에서 실행하기

npx serve build

터미널에서 npx serve build를 입력하면 serve 프로그램을 다운 받고 build 폴더에서 서버가 실행

• 브라우저는 jsx를 바로 이해하지 못한다
• 그래서 Babel 같은 트랜스파일러가 우리의 jsx 코드를 트랜스파일해 줘야 한다
• 리액트 프로젝트 배포 전 '빌드'라는 과정을 거쳐야 하는데, 빌드 과정 중에 트랜스파일링도 이루어진다

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

답: 3 먼저 num에 1이 저장된다. setTimeout함수는 비동기 함수라 이벤트 루프에 의해 태스크 큐에 대기한다. 다음 num에 3이 저장되고, 콘솔에 3이 출력된다.

비동기 로직은 이벤트 루프를 통해 처리된다.

힙

• 객체가 저장되는 메모리 공간

콜 스택

• 함수 호출 시 실행 컨텍스트가 생성된다.
• 함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행하지 않음.

이벤트 루프

• 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.(FIFO)

태스트 큐

• 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

예시)

console.log(1+1)
setTimeout(function() {console.log(2+2)}, 1000)
console.log(3+3)

• 실행결과는?

    2
    6
    4

• 동작순서

  1. console.log(1+1) 이 콜 스택에 올라감 → 2 출력
  2. setTimeout 함수가 실행되어 타이머가 설정되고 비동기 작업 시작. → setTimeout함수의 콜백함수는 태스크 큐에서 대기.
  3. console.log(3+3) 이 콜 스택에 올라감 → 6 출력
  4. setTimeout안의 console.log(2+2)가 태스크 큐로 이동
  5. 콜 스택이 비어있나 확인 후, console.log(2+2) 콜 스택에 올라감 → 4 출력

마이크로 태스트 & 매크로 태스크

태스크 큐는 마이크로 태스크큐와 매크로 태스크큐로 나뉜다.

• 마이크로태스트: Promise의 then, catch, finally와 같은 마이크로 태스크
• 매크로 태스크: setTimeout 및 비동기 작업의 콜백 함수

마이크로태스크 큐는 태스크 큐보다 우선순위가 높다. → 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. → 마이크로태스크 큐가 비면 매크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.

❓리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

📘DOM

Document Object Model의 약자. -> 문서 객체 모델 DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.

[브라우저 렌더링 과정]

1. HTML 파싱: HTML 문서를 파싱하여 DOM 트리를 생성
2. CSS 파싱: CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성
3. 렌더 트리 구성: DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성
4. 레이아웃: 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하여 레이아웃을 수행
5. 페인팅: 레이아웃이 완료되면 화면에 픽셀을 그리는 과정인 페인팅이 수행

⚠️DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 렌더링을 함.

📘Virtual DOM

리액트는 가상 DOM을 사용한다. 엘리먼트를 새로 렌더링할 때 리액트는 그 모습을 실제 DOM트리에 바로 반영하는 것이 아니라 가상 DOM에 적용한다.

리액트는 state 변경 전의 가상 DOM과 변경 후의 가상 DOM을 비교한다. 그래서 바뀐 부분만 찾아내고 각각에 해당하는 실제 DOM 노드를 변경한다.

• 개발자가 직접 DOM 노드를 신경쓸 필요가 없어 단순하고 깔끔한 코드를 작성할 수 있다.

• 변경 사항들을 리액트가 적당히 모아 적당히 나눠서 브라우저에 전달한다. →** 변경사항들을 효율적으로 관리할 수 있다.**

⚠️DOM vs Virtual DOM

이벤트 버블링

이벤트가 시작된 시점에서 위로 전파가 되는 현상

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked');
  event.stopPropagation(); // 이벤트 버블링 중지
});
</script>

이벤트 캡쳐링

이벤트가 시작된 시점에서 아래로 전파가 되는 현상

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked during capturing');
}, true); // capturing 설정

document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked');
});
</script>

이벤트 위임

버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있다. 예를 들어 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다.

-> 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임(Event Delegation)이라고 부른다.

<ul id="parent-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById('parent-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on', event.target.textContent);
  }
});
</script>

❓HTTP 메소드에 대해 설명해 주세요.

GET: 기존 데이터를 조회하는 리퀘스트 POST: 새 데이터를 추가하는 리퀘스트 PUT: 기존 데이터를 수정하는 리퀘스트 DELETE: 기존 데이터를 삭제하는 리퀘스트

GET, POST, PUT, DELETE 이외의 메소드들

(1) PATCH

PATCH 메소드는 기존의 데이터를 수정할 때 사용하는 메소드다.

PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드다.

그러니까 예를 들어 서버에

{
  "id": 3,
  "name": "Michael",
  "age": 25
}

이런 식으로 표현되는 데이터가 있을 때, 리퀘스트에 PATCH 메소드를 설정하고

{
  "age": 30
}

이라는 데이터를 바디에 담아서 보내면,

{
  "id": 3,
  "name": "Michael",
  "age": 30
}

서버의 기존 데이터는 이렇게 age 속성만 갱신되지만, 같은 리퀘스트더라도 PUT 메소드를 설정해서 보내면

{
  "age": 30
}

이렇게 서버의 데이터에는 age 속성만 남게 된다.

⇒ 데이터를 수정하는 메소드 중에서 PUT은 덮어쓰기, PATCH는 일부 수정를 의미한다.

(2) HEAD

메소드에는 HEAD 메소드라는 것도 있다. HEAD 메소드는 GET 메소드와 동일하다. 대신 GET 리퀘스트를 보냈을 때 받았을 리스폰스에서 바디 부분은 제외하고, 딱 헤드 부분만 받는다는 점이 다르다.

❓왜 이런 메소드가 필요할까? 예를 들어, 웹 브라우저가 서버로부터 용량이 엄청나게 큰 영상 파일을 받고자 하는 상황. 만약 파일의 용량이 너무 큰 경우에는 파일을 받지 않으려고 한다. 이때 파일의 용량만 조사하기 위해서 HEAD 메소드가 담긴 리퀘스트를 보내볼 수 있다.

이때 Content-length와 같이 컨텐츠 용량을 나타내는 헤더가 있어서 파일의 용량 정보는 알게 될 수도 있다. 그럼 이 용량을 사용자에게 보여주고 그래도 영화 파일을 시청할 건지 물어보는 코드를 작성할 수 있다. 바로 이렇게 실제 데이터가 아니라 데이터에 관한 정보만 얻으려고 하는 상황 등에 HEAD 메소드가 활용된다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

1. 콜백

• 가장 기본적인 비동기 처리방식
• 콜백 함수를 사용해 비동기 작업의 결과를 처리함
• 여러 개의 중첩된 콜백을 사용하면 가독성이 떨어짐
• setTimeout(), 이벤트 처리 함수 등…

function fetchData(callback) {
  setTimeout(function() {
    callback('Data received');
  }, 1000);
}

fetchData(function(data) {
  console.log(data);
});

2. Promise

• 콜백 지옥과 같은 문제를 해결하기 위한 목적으로 등장

• 비동기 작업이 성공 또는 실패했을 때의 상태를 나타냄

  • Pending: 아직 결과 값이 반환되지 않은 진행 중인 상태

  • fulfilled: 성공

  • rejected: 실패

  • settled: 결과 값이 성공 혹은 실패로 반환된 상태

    ⇒ settled된 값은 재실행 될 수 없다.

• 성공 시 resolve 콜백을 호출하고, 실패 시 reject 콜백을 호출함

• .then()과 .catch()를 사용해 비동기 작업의 결과를 처리함

  • then 메소드는 Promise 객체 반환 → then, catch 메소드 사용가능 → 연속적인 then 메소드 사용 → Promise chaining
  • catch 이후에도 chaining 가능

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

2-1. Promise.all()

• 배열로 된 여러 개의 프로미스들을 인자로 받아 단 하나의 프로미스를 반환함
• 모든 프로미스가 성공적으로 이행되면 결과 배열이 반환되며, 하나라도 실패하면 첫 번째 실패한 프로미스의 결과가 반환

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 2'), 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 3'), 3000);
});

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // ['Promise 1', 'Promise 2', 'Promise 3']
  })
  .catch(error => {
    console.error(error); // 첫 번째 실패한 프로미스의 에러
  });

3. async/await

• 프로미스를 기반으로 동작하며, 비동기 코드를 동기식처럼 작성할 수 있도록 함
• async 함수 내부에서 await 키워드를 사용하여 프로미스가 처리될 때까지 대기하고, 그 결과를 반환함

async function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End');

지금 이 코드에는 다음과 같은 2개의 콜백이 있다.

(1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); }

fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행된다.

[전체 코드의 실행 순서]

1. console.log('Start');
2. fetch 함수(리퀘스트 보내기 및 콜백 등록)
3. console.log('End');
4. 리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

특정 작업을 시작(리퀘스트 보내기)하고 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고, 나중에 콜백이 실행되는 것을 '비동기 실행'이라고 한다. 이에 반해 한번 시작한 작업은 다 처리하고 나서야, 다음 코드로 넘어가는, 우리에게 익숙한 방식의 실행은 '동기 실행'이라고 한다.

👇🏻만약 이 코드에서 fetch 함수가 비동기 실행되지 않고, 동기 실행되는 함수였다고 가정한다면?👇🏻

1. console.log('Start');
2. fetch 함수(리퀘스트 보내기)
3. 리스폰스가 올 때까지 코드 실행이 잠시 '정지'되고, 리스폰스가 오면 필요한 처리 수행
4. console.log('End');

동기 실행은 한번 시작한 작업을 완료하기 전까지 코드의 실행 흐름이 절대 그 다음 코드로 넘어가지 않는다. 일단 시작한 작업을 완벽하게 처리하고 난 다음에야 그 다음 코드로 실행 흐름이 넘어간다. 따라서 동기 실행의 경우 코드가 보이는 순서대로, 실행된다.

이와 다르게 비동기 실행은 한번 작업을 시작해두고, 그 작업이 완료되기 전이더라도 콜백만 등록해두고, 코드의 실행 흐름이 바로 그 다음 코드로 넘어간다. 그리고 추후에 특정 조건이 만족되면 콜백이 실행됨으로써 해당 작업을 완료하는 방식이다. 따라서 비동기 실행에서는 코드가 꼭 등장하는 순서대로 실행되는 것이 아니다.

❓'비동기 실행'이라는 건 왜 존재하는 걸까

그건 바로 보통 '비동기 실행'이 '동기 실행'에 비해, 동일한 작업을 더 빠른 시간 내에 처리할 수 있기 때문이다.

fetch 함수가 '동기 실행'된다고 가정했을 때

fetch 함수가 실행되고 리스폰스가 올 때까지 기다린다는 것 → 바로 리스폰스가 올 때까지는 아무런 작업도 할 수 없다는 뜻이다. 그만큼 시간을 낭비하게 되는 셈.

하지만 만약 비동기 실행이라면 일단 리퀘스트 보내기, 콜백 등록까지만 해두고, 바로 다음 작업(console.log('End');)을 시작함으로써 시간을 절약할 수 있다.

이미지 상단은 fetch 함수가 동기 실행된다고 가정했을 때 이미지 하단은 fetch 함수가 비동기 실행되는 실제 모습

지금 동기 실행에서는 모든 작업이 순차적으로 수행되고 있다. 이에 비해, 비동기 실행에서는 리스폰스를 기다리는 시간 동안 그 이후의 작업을 미리 처리하고 있다. 그래서 비동기 실행이 최종 작업 종료 시간이 더 짧다.

📘setTimeout 함수

특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

setTimeout 함수는 첫 번째 파라미터에 있는

() ⇒ { console.log('b'); },

이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룬다. 그래서 이 코드를 실행하면

이렇게 a와 c가 먼저 출력되고, 약 2초가 지난 후에 b가 출력된다.

fetch 함수에서는 콜백이 실행되는 조건이, '리스폰스가 도착했을 때'였다면, setTimeout에서 콜백이 실행되는 조건은, '설정한 밀리세컨즈만큼의 시간이 경과했을 때'이다. 어쨌든 둘 다 콜백의 실행을 나중으로 미룬다는 점에서는 비슷하다.

📘setInterval 함수

특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

이렇게 쓰면 이제 b를 출력하는 콜백이 2초 간격으로 계속 실행된다. 실제로 확인해보면

a와 c가 출력되고, 약 2초 뒤에 b가 출력된 후 그 뒤로 계속 2초 간격으로 b가 반복 출력된다.

📘addEventListener 메소드

만약 사용자가 웹 페이지에서 어떤 버튼 등을 클릭했을 때, 실행하고 싶은 함수가 있다면

(1) 해당 DOM 객체의 onclick 속성에 그 함수를 설정하거나, (2) 해당 DOM 객체의 addEventListener 메소드의 파라미터로 전달하면 된다.

(1) onclick 속성

...

btn.onclick = function (e) { 
// 해당 이벤트 객체가 파라미터 e로 넘어온다.
  console.log('Hello Codeit!');
};

// 또는 arrow function 형식으로 이렇게 나타낼 수도 있다.
btn.onclick = (e) => {
  console.log('Hello Codeit!');
};

...

(2) addEventListener 메소드

...

btn.addEventListener('click', function (e) { 
// 해당 이벤트 객체가 파라미터 e로 넘어온다.
  console.log('Hello Codeit!');
});

// 또는 arrow function 형식으로 이렇게 나타낼 수도 있다.
btn.addEventListener('click', (e) => {
  console.log('Hello Codeit!');
});

...

이렇게 클릭과 같은 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 addEventListener 메소드도 비동기 실행과 관련이 있다. 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건(클릭 이벤트 발생)이 만족될 때(마다) 실행되기 때문이다.

setTimeout(콜백, 시간)
setInterval(콜백, 시간)
addEventListener(이벤트 이름, 콜백)

→ 함수의 아규먼트로 바로 콜백을 넣는다.

그런데 fetch 함수는 이 함수들과는 전혀 다르게 생겼다.

fetch('https://www.google.com')
  // fetch 함수가 리턴하는 객체의 then 메소드를 사용해서 콜백을 등록
  .then((response) => response.text()) 
  .then((result) => { console.log(result); });

fetch 함수는 콜백을 파라미터로 바로 전달받는 게 아니라, fetch 함수가 리턴하는 어떤 객체의 then 메소드를 사용해서 콜백을 등록한다.

위에서 본 함수들처럼, fetch 함수도 이런 식으로 코드를 써야할 것만 같은데.

fetch('https://www.google.com', (response) => response.text())

❓왜 fetch 함수만 사용하는 형식이 다른 걸까?

그건 바로 fetch 함수는, 좀 더 새로운 방식으로 비동기 실행을 지원하는 자바스크립트 문법과 연관이 있기 때문. 사실 fetch 함수는 Promise 객체라는 것을 리턴하고, 이 Promise 객체는 비동기 실행을 지원하는 또 다른 종류의 문법에 해당하기 때문.

✨Promise

어떤 작업에 관한 “상태 정보”를 가지고 있는 것.

• pending: 진행 중
• fulfilled: 성공 → 작업 성공 결과(response)
• rejected: 실패 → 작업 실패 정보

then 메소드란 프로미스 객체가 fulfilled 상태가 되었을 때 실행할 콜백을 등록하는 메소드

📘Promise Chaining

then 메소드를 연속적으로 붙이는 것

• promise객체의 then 메소드는 또 다른 promise 객체를 리턴한다.
• 이 새로운 promise 객체는 처음에는 pending 상태지만 then 메소드 안의 콜백이 실행되고 어떤 값을 리턴하는지에 따라 그 상태가 달라진다.
• 만약 콜백에서 promise 객체를 리턴하면 앞으로 promise 객체가 갖게 될 상태와 결과를 그대로 따라서 갖게 된다.
• 프로미스 객체 이외의 값(ex. 숫자, 문자열, 일반 객체)이라면 fulfilled 상태가 되고 해당 리턴값을 작업 성공 결과로 갖게 된다.

📘text, json 메소드도 Promise 객체를 리턴한다.

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
    // ...
  });

console.log('End');

response 객체의 text 메소드로 리스폰스의 내용을 추출(response.text();)하고 이것을 Deserialize하거나(JSON.parse(result);)

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((users) => {
    // ...
  });

console.log('End');

response 객체의 json 메소드로 리스폰스의 내용 추출과 Deserialize를 한 번에 수행(response.json())할 수 있다.

중요한 사실!! → text 메소드와 json 메소드가 사실은 Promise 객체를 리턴하는 메소드라는 사실!

1. text 메소드

fetch 함수로 리스폰스를 잘 받으면, response 객체의 text 메소드는, fulfilled 상태이면서 리스폰스의 바디에 있는 내용을 string 타입으로 변환한 값을 '작업 성공 결과'로 가진 Promise 객체를 리턴한다.

이때 그 작업 성공 결과는 string 타입. 이때 그 값이 만약 JSON 데이터라면 이전에 배운 것처럼 JSON 객체의 parse 메소드로 Deserialize를 해줘야한다.(JSON.parse(result);)

2. json 메소드

fetch 함수로 리스폰스를 잘 받으면, response 객체의 json 메소드는, fulfilled 상태이면서, 리스폰스의 바디에 있는 JSON 데이터를 자바스크립트 객체로 Deserialize해서 생겨난 객체를 '작업 성공 결과'로 가진 Promise 객체를 리턴한다.

만약 리스폰스의 바디에 있는 내용이 JSON 타입이 아니라면 에러가 발생하고 Promise 객체는 rejected 상태가 되면서 그 '작업 실패 정보'를 갖게 된다.

👇🏻👇🏻❓'then 메소드가 리턴했던 Promise 객체(A)는 그 콜백에서 리턴한 Promise 객체(B)와 동일한 상태와 결과를 갖게 된다'는 규칙과 연관지어서 생각해보면

→ 콜백에서 리턴한 Promise 객체로부터 새로운 Chain이 시작된다는 말과도 같다.

response 객체의 text 메소드 또는 json 메소드 이후에 등장하는 then 메소드부터는 string 타입의 값이나 자바스크립트 객체를 갖고 바로 원하는 작업을 할 수 있다.

📘then 메소드

const successCallback = function () { };
const errorCallback = function () { };

fetch('https://jsonplaceholder.typicode.com/users') // Promise-A
  .then(successCallback, errorCallback); // Promise-B

(1) fetch 메소드가 리턴하는 Promise 객체를 Promise-A 객체라고 하고, (2) then 메소드가 리턴하는 Promise 객체를 Promise-B 객체라고 해보자.

1. fetch 함수의 작업이 성공해서 Promise-A 객체가 fulfilled 상태가 된 경우 : then 메소드 안의 "첫 번째" 콜백인 successCallback이 실행된다.
2. fetch 함수의 작업이 실패해서 Promise-A 객체가 rejected 상태가 된 경우 : then 메소드 안의 "두 번째" 콜백인 errorCallback이 실행된다.

여기서 중요한 점)

Promise-B는, 실행된 successCallback 또는 errorCallback에서 무엇을 리턴하느냐에 따라

• 그 상태(fulfilled or rejected)와
• 결과(작업 성공 결과 or 작업 실패 정보)가 결정된다.

1. 실행된 콜백이 어떤 값을 리턴하는 경우

successCallback이 실행되든, errorCallback이 실행되든, 실행된 콜백에서 어떤 값을 리턴하는 경우다. 이때 그 값의 종류에 따라

• Promise 객체인 경우와
• Promise 객체 이외의 경우,

이 2가지 경우로 다시 나눌 수 있다.

(1) Promise 객체를 리턴하는 경우

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((result) => { console.log(result) });

• (response) ⇒ response.json() 이 콜백은 Promise 객체를 리턴하는 코드다.
• 콜백에서 Promise 객체를 리턴하는 경우에는 그 콜백을 등록한 then 메소드가 리턴했던 Promise 객체가 콜백이 리턴한 Promise 객체의 상태와 결과를 똑같이 따라 갖게 된다.
• 즉, 코드의 첫 번째 then 메소드가 리턴했던 Promise 객체는, response 객체의 json 메소드가 리턴한 Promise 객체가 추후에 갖게 되는 상태와 결과를 그대로 따라서 갖게 된다는 뜻다.
• 콜백에서 리턴하는 Promise 객체를 then 메소드가 그대로 리턴한다고 생각해도 됨. 그 다음부터는 콜백에서 리턴한 Promise 객체로부터 다시 Promise Chain이 쭉 이어져 나간다고 보면 된다.

(2) Promise 객체 이외의 값을 리턴하는 경우

콜백이 꼭 Promise 객체만을 리턴하는 것은 아니다. 그냥 단순한 숫자, 문자열, 일반 객체 등을 리턴할 수도 있다. 이런 경우에 then 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고 작업 성공 결과로 그 값을 갖게 된다.

// Internet Disconnected

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json(), (error) => 'Try again!')
  .then((result) => { console.log(result) });

예시)

지금 인터넷이 안 되는 상황에서 이 코드를 실행했다고 해보자.

• fetch 함수의 작업이 실패해서 두 번째 콜백인 (error) ⇒ 'Try again! 이 실행된다.
• 두 번째 콜백은 'Try again!'이라는 문자열을 리턴하고 있다. 이렇게 하면 해당 콜백을 등록한 then 메소드가 리턴했던 Promise가 fulfilled 상태가 되고, 그 작업 성공 결과로 'Try again' 문자열을 갖게 된다.

2. 실행된 콜백이 아무 값도 리턴하지 않는 경우

// Internet Disconnected

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json(), (error) => { alert('Try again!'); })
  .then((result) => { console.log(result) });

콜백이 무언가를 리턴하는 게 아니라 이 코드에서처럼 단순히 alert 함수만 실행하고 끝난다고 해보자.

• 결과적으로 이 콜백은 아무런 값도 리턴하지 않은 것과 같다. 자바스크립트에서는 함수가 아무것도 리턴하지 않으면 undefined를 리턴한 것으로 간주된다.
• 방금 전 1. (2) 규칙에 따라 then 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 그 작업 성공 결과로 undefined를 갖게 된다.

3. 실행된 콜백 내부에서 에러가 발생했을 때

콜백이 실행되다가 에러가 발생하는 경우가 있다.

예시)

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
        ...
        add(1, 2); // ReferenceError 발생
        ...
  });

이렇게 정의하지도 않은 함수를 콜백에서 사용해서 에러가 발생하거나

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
        ...
        throw new Error('failed');
        ...
  });

특정 경우에 인위적으로 throw 문을 써서 에러를 발생시키는 경우도 있다.

이렇게 콜백이 실행되다가 에러가 발생한다면, then 메소드가 리턴했던 Promise 객체는 어떻게 될까?

이 경우에는 Promise 객체가 rejected 상태가 되고, 작업 실패 정보로 해당 에러 객체를 갖게 된다.

const promise = fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => { throw new Error('test'); });

promise 를 입력해 then 메소드가 리턴한 Promise 객체의 내부를 살펴보면👇🏻

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=4374&directory=Untitled.png&name=Untitled.png

지금 [[PromiseState]]는 Promise 객체의 상태를, [[PromiseResult]]는 Promise 객체의 결과(작업 성공 결과 또는 작업 실패 정보)를 나타내는 내부 슬롯이다.

현재 Promise 객체가 rejected 상태이고, 발생한 Error 객체를 그 작업 실패 정보로 갖고 있다는 것을 알 수 있다. 이렇게 콜백 실행 중에 에러가 발생하면, then 메소드가 리턴한 Promise 객체는 rejected 상태가 되고, 그 작업 실패 정보로 해당 Error 객체를 갖게 된다.

4. 아무런 콜백도 실행되지 않을 때

// Internet Disconnected

fetch('https://www.google.com') // Promise-1
  .then((response) => response.text()) // Promise-2
  .then((result) => { console.log(result) }, (error) => { alert(error) });

then 메소드의 아무런 콜백도 실행되지 않는 경우가 있다.

인터넷을 끊고 나서 위 코드를 실행했다고 해보자.

• fetch 함수가 리턴한 Promise-1 객체는 rejected 상태가 되기 때문에, 첫 번째 then 메소드의 두 번재 콜백이 실행되어야 다. 그런데 지금 두 번째 콜백이 없다. 이 경우에는 아무런 콜백도 실행되지 않는다. 이런 경우에 then 메소드가 리턴한 Promise-2 객체는 어떻게 될까? 이런 경우에 then 메소드가 리턴했던 Promise-2 객체는, 이전 Promise 객체와 동일한 상태와 결과를 갖게 된다. → 지금 Promise-2 객체는 Promise-1 객체처럼 rejected 상태가 되고, 똑같은 작업 실패 정보를 갖게 된다.
• 그럼 rejected 상태가 된 Promise-2의 then 메소드에는 이제 두 번째 콜백이 존재하기 때문에 그 두 번째 콜백이 실행된다.
• 아무런 콜백도 실행되지 않는 경우에는 그 이전 Promise 객체의 상태와 결과가 그대로 이어진다는 사실!

예시)

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    return response.json(); // <- Case(1)
    return 10; // <- Case(2)
    // <- Case(3)
    throw new Error('failed'); // <- Case(4)
})
  .then((result) => {
    console.log(result);
  });

// 존재하지 않는 URL
fetch('https://jsonplaceholder.typicode.commmmmm/users')
  .then((response) => response.json()) // <- Case(5)
  .then((result) => { }, (error) => { console.log(error) });

then 메소드가 리턴한 Promise객체를 A라고 할 때

Case(1): 콜백에서 Promise 객체를 리턴

• 콜백이 리턴한 Promise 객체를 B라고 하면 A는 B와 동일한 상태와 결과를 갖게 된다.

Case(2): 콜백에서 Promise 객체가 아닌 일반적인 값을 리턴

• A는 fulfilled 상태가 되고, 해당 리턴값을 작업 성공 결과로 갖게 된다.

Case(3): 콜백에서 아무것도 리턴하지 않음

• undefined 리턴함 → A는 fulfilled 상태가 되고, undefined를 작업 성공 결과로 갖게 된다.

Case(4): 콜백 실행 중 에러 발생

• A는 rejected 상태가 되고, 해당 에러 객체를 작업 실패 정보로 갖게 된다.

Case(5): 콜백이 실행되지 않음

• A는 호출된 then 메소드의 주인에 해당하는, 이전 Promise 객체와 동일한 상태와 결과를 가진다.

✨catch

❓어떻게 fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달될 수 있는 걸까?

// catch문
fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .catch((error) => { console.log(error); })
  .then((result) => { console.log(result); });

// catch 말고 then을 쓸 때
fetch('https://jsonplaceholder.typicode.com/users') // Promise-A
  .then((response) => response.text()) // Promise-B
  .then(undefined, (error) => { console.log(error); }) // Promise-C
  .then((result) => { console.log(result); }); // Promise-D

• catch 메소드는 사실 then 메소드의 첫 번째 인자로 undefined을 넣은 것과 같다.
• fetch 함수의 작업이 실패해서 Promise-A 객체가 rejected 상태가 되면, 첫 번째 then 메소드의 두 번째 콜백이 실행되어야 한다. 하지만 지금 첫 번째 then 메소드에는 두 번째 콜백이 없기 때문에 아무 콜백도 실행되지 않는다.
• Promise-B 객체가 Promise-A와 똑같은 rejected 상태가 되고, 동일한 작업 실패 정보를 갖게 된다.
• rejected 상태가 된 Promise-B에 붙은 then 메소드에는 두 번째 콜백이 있기 때문에 이 두 번째 콜백이 실행된다. 즉, catch 메소드의 콜백이 실행된다.

📘catch 메소드를 여러 개 쓰는 경우

catch 메소드를 마지막뿐만 아니라 Promise Chain 중간중간에 쓰는 경우도 존재한다. 만약 중간에 에러가 발생해도 catch 메소드가 그 대안을 뒤로 넘겨줄 수 있으면 catch 메소드를 중간에 써도 된다.

fetch('https://friendbook.com/my/newsfeeds')
  .then((response) => response.json()) // -- A
  .then((result) => { // -- B
    const feeds = result;
    // 피드 데이터 가공...
    return processedFeeds;
  })
  .catch((error) => { // -- C
    // 미리 저장해둔 일반 뉴스를 보여주기
    const storedGeneralNews = getStoredGeneralNews();
    return storedGeneralNews;
  })
  .then((result) => { /* 화면에 표시 */ }) // -- D
  .catch((error) => { /* 에러 로깅 */ }); // -- E

• 만약 서버로부터 뉴스피드가 잘 조회되면 현재 코드에서 A, B, D 줄에 있는 콜백들이 잘 실행되고, 사용자에게 뉴스피드가 잘 표시될 것이다.
• 하지만 만약 사용자의 컴퓨터가 인터넷에 연결되어 있지 않은 상태라서 fetch 함수의 작업이 실패한다면?
  • 이 Promise Chain의 작업은 실패했다고 생각하고, 마지막에만 catch 메소드를 두고 끝내면 되는 걸까? 꼭 그렇지는 않다.
• fetch 함수의 작업이 실패하면 C 줄의 콜백이 실행된다. (SNS 서비스의 웹 페이지에서는 나중에 오프라인 상태가 될 때를 대비해서 모든 사람이 공통으로 볼 수 있는, 텍스트로만 이루어진 최근 일반 뉴스 데이터를 갱신해서 웹 브라우저에 저장한다고 해보자)
  • C줄의 콜백은 바로 이렇게 저장해둔 일반 뉴스 데이터를 그대로 가져오는 기능을 한다. 이렇게 되면 인터넷이 안 되는 상황에서도 나만을 위한 최적화된 뉴스피드는 못 보지만 일반적인 세상 뉴스는 사용자가 볼 수 있다.
• Promise Chain 중에서 비록 에러가 발생했다고 해도 만약 실패한 작업 대신 다른 방법을 통해서 작업을 정상적으로 끝마칠 수 있는 상황이라면 catch 메소드를 중간에 사용하기도 한다.
• Promise Chain 중에서 단 하나의 작업이라도 실패하면 전체 작업이 실패했다고 봐도 되는 경우에는 그냥 Promise Chain 마지막에만 catch 메소드를 써주면 되겠지만, 어떤 작업들은 에러가 발생하더라도 다른 방식으로 복구해서 살려낼 방법이 있다면 catch 메소드 안의 콜백에서 그런 복구 작업을 해주면 된다.

⇒ catch 메소드를 Promise Chain의 마지막에 늘 써줘야 하는 것은 맞지만, 작업을 살릴 방법이 있다면 Promise Chain 중간에 catch 메소드를 써도 된다는 사실!!

✨finally

어떤 작업이 성공하든 실패하든 상관없이(Promise 객체가 fulfilled상태가 되든 rejected 상태가 되든 상관없이) 항상 실행하고 싶을 콜백이 있을 때 씀.

❓Promise 객체는 왜 등장했을까?9

사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는 방법은 있었다. (setTimeout 함수나, addEventListener 메소드)

setTimeout(callback, milliseconds);
addEventListener(eventname, callback);

이것들은 모두 직접 파라미터에 콜백을 전달하는 형식으로 정의되어 있다. 만약 fetch 함수를 이런 식으로 만들었다면

fetch('https://first.com', callback)

그런데 왜 이런 방법이 선택되지 않고, 굳이 Promise 객체라는 문법이 도입된 것일까?

그 이유는 바로 함수에 콜백을 직접 넣는 형식은 콜백 헬(callback hell)이라고 하는 문제를 일으킬 수도 있기 때문이다.

만약 fetch 함수가 지금과 같이 Promise 객체를 리턴하는 게 아니라 setTimeout 함수처럼 콜백을 직접 집어넣는 형식의 함수였다면…

fetch('https://first.com', (response) => {
  // Do Something
  fetch('https://second.com', (response) => {
    // Do Something
    fetch('https;//third.com', (response) => {
      // Do Something
      fetch('https;//fourth.com', (response) => {
        // Do Something
      });
    });
  });
});

⇒ 가독성이 떨어진다.

이런 현상을 콜백 지옥 또는 콜백 헬(callback hell)이라고 한다. 또는 지옥의 피라미드(Pyramid of Doom)라고도 한다.

하지만 fetch 함수는 Promise 객체를 리턴하기 때문에

fetch('https://first.com')
  .then((response) => {
    // Do Something
    return fetch('https://second.com');
  })
  .then((response) => {
    // Do Something
    return fetch('https://third.com');
  })
  .then((response) => {
    // Do Something
    return fetch('https://third.com');
  });

Promise Chaining을 해서 좀 더 깔끔한 코드로 여러 비동기 작업을 순차적으로 처리할 수 있다. 이렇게 Promise 객체를 사용하면 callback hell 문제를 해결할 수 있다.

이 뿐만 아니라 기존에 콜백을 직접 넣는 방식에 비해 Promise 객체의 문법은 비동기 작업에 관한 좀 더 세밀한 개념들이 반영되어 있다. 이전의 방식에서는 콜백에 필요한 인자를 넣어주고 실행하면 되는 단순한 방식이었다면, Promise 객체 문법에는 pending, fulfilled, rejected 상태, 작업 성공 결과 및 작업 실패 정보(이유), then, catch, finally 메소드 등과 같은 비동기 작업에 관한 보다 정교한 설계가 문법 자체에 반영되어 있다는 것을 알 수 있다.

Promise 객체라는 개념은,

(1) callback hell 문제를 해결하고,
(2) 비동기 작업 처리에 관한 좀 더 세밀한 처리를 자바스크립트 문법 단에서 해결하기 위해 등장했고,

자바스크립트의 2015년도 표준인 ES6(=ES2015)에 추가되었다.

✨promisify

언제 Promise 객체를 직접 만들게 되는 걸까? 다양한 경우들이 있지만, 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만드는 경우가 많다.

1. setTimeout 함수 예시

function wait(text, milliseconds) {
  setTimeout(() => text, milliseconds);
}

wait 함수는 특정 밀리세컨즈만큼 시간이 지난 후에 text 파라미터로 전달받은 값을 리턴하는 함수다. 이 wait 함수를 Promise Chaining 코드에서 사용하면

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

바로 이 Promise Chaining 코드에 wait 함수를 추가하면

function wait(text, milliseconds) {
  setTimeout(() => text, milliseconds);
}

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  // 2초 후에 리스폰스의 내용 뒤에 'by Codeit' 추가하고 리턴
  .then((result) => wait(`${result} by Codeit`, 2000)) 
  .then((result) => { console.log(result); });

기존 코드에 두 번째 then 메소드를 추가하고, 그 안에서 wait 함수를 호출했다. 이렇게 쓰면 2초 후에 리스폰스의 내용 뒤에 by Codeit이라는 문구를 붙여서 출력될 것 같다.

리스폰스의 내용과 by Codeit이 출력되지 않았다. 그 대신 undefined가 출력되었다.

왜 그런 걸까? 그 이유는 바로 wait 함수에 있다.

function wait(text, milliseconds) {
  setTimeout(() => text, milliseconds);
}

이 wait 함수는 내부에서 setTimeout 함수를 호출한다.

그리고 setTimeout 함수의 첫 번째 파라미터로 들어간 콜백이 2초 후에 text를 리턴한다.

그런데 여기서 혼동하면 안 되는 것은 wait 함수가

...
  .then((result) => { return wait(`${result} by Codeit`, 2000); })
...

이 두 번째 then 메소드 안의 콜백에서 실행될 때,

wait 함수는 setTimeout 함수를 실행할 뿐 아무것도 리턴하지 않는다. setTimeout 함수 안의 콜백이 2초 후에 리턴하는 text는, wait 함수의 리턴값이 아니다.

• wait 함수는 단지 setTimeout 함수를 실행하고 아무것도 리턴하지 않는 함수일 뿐.
• 자바스크립트에서는 이전에 배운대로 함수에서 아무것도 리턴하지 않으면 undefined를 리턴하는 것으로 간주하기 때문에 wait 함수의 리턴값은 undefined.
• 따라서 세 번째 then 메소드의 콜백으로 undefined가 넘어가고, undefined가 출력된 것.

setTimeout은 비동기 실행되는 함수다. Promise Chaining 안에서 이렇게 비동기 실행되는 함수를 바로 사용하면, 나중에 실행되는 부분의 리턴값(여기서는 text)를 Promise Chain에서 사용할 수 없게 된다.

해결방법)

// function wait(text, milliseconds) {
//   setTimeout(() => text, milliseconds);
// }

function wait(text, milliseconds) {
  const p = new Promise((resolve, reject) => {
    setTimeout(() => { resolve(text); }, 2000);
  });
  return p;
}

• wait 함수 안에서 Promise 객체를 직접 생성했고, executor 함수 안에서 setTimeout 함수를 호출했다.
• setTimeout 함수 안의 콜백에서 resolve 함수를 호출하는데 이 때 그 아규먼트로 text를 넣었다.
• Promise 객체 p는 2초 후에 fulfilled 상태가 될 것이고, 그 작업 성공 결과는 파라미터 text의 값이 될 될 것이다. wait 함수는 이제 Promise 객체 p를 리턴한다.

자, 이 상태에서 코드를 다시 실행해보면

function wait(text, milliseconds) {
  const p = new Promise((resolve, reject) => {
    setTimeout(() => { resolve(text); }, 2000);
  });
  return p;
}

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => wait(`${result} by Codeit`, 2000)) // 2초 후에 리스폰스의 내용 뒤에 'by Codeit' 추가하고 리턴
  .then((result) => { console.log(result); });

이번에는 약 2초 후에 리스폰스의 내용이 잘 출력되고,

⇒ 기존의 비동기 실행 함수(여기서는 setTimeout)의 콜백이 리턴하는 값을 Promise Chain에서 사용하고 싶다면, 해당 함수를 감싸서 Promise 객체를 직접 생성하는 코드를 작성해야 한다. 그리고 그 Promise 객체를 리턴해야 방금처럼 Promise Chain에서 해당 리턴값을 받아서 사용할 수 있다.

이렇게 전통적인 형식의 비동기 실행 함수를 Promise 객체로 감싸서 그 Promise 객체를 리턴하는 형식으로 만드는 작업을 Promisify(프로미스화하다)라고 한.

2. 콜백 헬(callback hell)과 Promise

Node.js는 오늘날 자바스크립트를 서버에서도 실행할 수 있게 해주는 또 다른 '자바스크립트 실행 환경'이다. 이 Node.js에서는 브라우저에서와는 또 다른 비동기 함수들이 제공된다.

Node.js에는 다음과 같이 특정 파일의 내용을 읽기 위해 사용되는 readFile이라는 비동기 실행 메소드가 있다.

fs.readFile('file1.txt', 'utf8', (error, data) => {
  if (err) {
    console.log(err);
  } else {
    console.log(data);
  }
});

• fs는 readFile 메소드를 가진 객체로, 파일에 관한 기능들을 갖고 있다.
• readFile 메소드는 첫 번째 파라미터로 파일의 이름, 두 번째 파라미터로 파일 해석 기준(인코딩 기준), 세 번째 파라미터로 콜백을 받는다.
• readFile 함수는 파일을 읽다가 에러가 발생하면 콜백의 첫 번째 파라미터(error)에, 해당 에러 객체를 전달하고 콜백을 실행한다. 만약 파일을 정상적으로 다 읽었으면 콜백의 두 번째 파라미터(data)에, 읽어들인 파일 내용을 전달하고 콜백을 실행한다.
• readFile 메소드도, 콜백을 파라미터에 바로 넣는 비동기 실행 함수라는 점에서 setTimeout 함수, addEventListener 메소드와 비슷하다.
  • 콜백 헬(callback hell) 문제) 위 코드에서 이제 file1.txt 파일의 내용을 출력하고 나서 그 다음에 file2.txt라는 파일의 내용을 또 출력해야한다고 해보자.

fs.readFile('file1.txt', 'utf8', (error1, data1) => {
  if (error1) {
    console.log(error1);
  } else {
    console.log(data1);
    fs.readFile('file2.txt', 'utf8', (error2, data2) => {
      if (error2) {
        console.log(error2);
      } else {
        console.log(data2);
      }
    });
  }
});

이렇게 코드를 쓰면 file1.txt의 내용이 출력되고, 그 다음에 file2.txt의 내용이 출력될 것이다. 코드가 그런데 이제 그 다음으로 file3.txt의 내용도 출력해야 한다고 해보자.

fs.readFile('file1.txt', 'utf8', (error1, data1) => {
  if (error1) {
    console.log(error1);
  } else {
    console.log(data1);
    fs.readFile('file2.txt', 'utf8', (error2, data2) => {
      if (error2) {
        console.log(error2);
      } else {
        console.log(data2);
        fs.readFile('file3.txt', 'utf8', (error3, data3) => {
          if (error3) {
            console.log(error3);
          } else {
            console.log(data3);
          }
        });
      }
    });
  }
});

⇒ 코드 읽기 어려워짐

콜백을 바로 파라미터에 집어넣는 전통적인 형식의 비동기 실행 함수들은 이런 문제가 있다. 바로 순차적으로 비동기 실행 함수들을 실행하려고 하면 콜백 안에 또 콜백이 있고, 그 안에 또 콜백이 있는 콜백 헬(콜백 지옥, callback hell) 현상을 초래하게 된다는 것이다.

해결책) Promisify

function readFile_promisified(filename) {
  const p = new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (error, data) => {
      if (error) {
        reject(error); // 에러 발생 시 -> rejected
      } else {
        resolve(data); // 파일 내용 읽기 완료 -> fulfilled
      }
    });
  });
  return p;
}

• readFile_promisified라는 이름의 함수를 정의하고, 함수 안에서는 Promise 객체를 직접 생성하고 있다.
• Promise 객체가 생성될 때 실행되는 executor 함수 안에서는 fs 객체의 readFile 메소드를 호출했다.
• 여기서 중요한 것은 작업을 수행하다가 에러가 나면 readFile 함수의 콜백에서 reject 함수를 호출하고, 파일의 내용을 정상적으로 다 읽었을 때는 resolve 함수를 호출한다는 사실.

...                         (error, data) => {
  if (error) {
    reject(error); // 에러 발생 시 -> rejected
  } else {
    resolve(data); // 파일 내용 읽기 완료 -> fulfilled
  }
}

• reject 함수의 파라미터에는 error 객체를, resolve 함수의 파라미터에는 파일의 내용인 data를 전달했다.

readFile_promisified('file1.txt')
  .then((data) => { console.log(data); return readFile_promisified('file2.txt'); })
  .then((data) => { console.log(data); return readFile_promisified('file3.txt'); })
  .then((data) => { console.log(data); })
  .catch((error) => { console.log(error); });

readFile_promisified 함수는 Promise 객체를 리턴하기 때문에 이렇게 자유롭게 Promise Chain 안에서 사용할 수 있다.

3. Promisify를 하면 안 되는 함수들도 있다.

기존의 전통적인 형식의 비동기 실행 함수도 원하는 경우에는 Promisify해서 콜백 헬을 방지할 수 있다. 하지만 전통적인 형식의 비동기 실행 함수라고 해서 모두 Promisify해서 사용해도 되는 것은 아니다.

기존의 비동기 실행 함수들 중에서도 그 콜백을 한번만 실행하는 것들(setTimeout, readFile 등)만 Promisify해서 사용해도 된다.

이것들과 달리 만약 콜백을 여러 번 실행하는 함수들(setInterval, addEventListener 등)인 경우에는 이렇게 Promisify하면 안 된다.

→ Promise 객체는 한번 pending 상태에서 fulfilled 또는 rejected 상태가 되고나면 그 뒤로는 그 상태와 결과가 바뀌지 않기 때문

const box = document.getElementById('test');
let count = 0;

function addEventListener_promisified(obj, eventName) { // 이런 Promisify는 하지 마세요
  const p = new Promise((resolve, reject) => {
    obj.addEventListener(eventName, () => { // addEventListener 메소드
      count += 1;
      resolve(count);
    });
  });
  return p;
}

addEventListener_promisified(box, 'click')
.then((eventCount) => { console.log(eventCount); });

addEventListener_promisified 함수는 DOM 객체의 addEventListener 메소드를 Promisify한 함수다.

지금 Promise 객체가 생성될 때 실행되는 executor 함수 안에서는, DOM 객체에 어떤 이벤트가 발생할 때, 실행할 콜백을 등록하고 있다. 특정 이벤트가 발생할 때마다 count라고 하는 변수의 값을 1씩 늘려서 resolve 함수의 파라미터로 전달해서 실행하도록 하는 내용이 들어있다.

마지막 코드를 보면,

addEventListener_promisified 함수의 아규먼트로 DOM 객체 box와 문자열 'click'을 넣어서 box 객체가 클릭 이벤트에 반응하도록 했다.

하지만 이 코드를 실행하고 box를 클릭해보면 처음에 1이 딱 출력되고 나서 그 다음 count 값들은 출력되지 않는다.

왜냐하면 pending 상태에 있던 Promise 객체(여기서는 p 객체)가 한번 fulfilled 상태 또는 rejected 상태가 되고 나면 Promise 객체의 상태 및 결과가 고정되어 그 뒤로는 바뀌지 않기 때문.

따라서 지금 위 코드에 보이는 resolve(count)라고 하는 코드가 box 버튼을 클릭할 때마다 여러 번 실행된다고 해도 p 객체가 갖고 있는 상태와 결과는 변하지 않는다. 그래서 then 메소드 안의 콜백도 처음 클릭했을 때 딱 한번 실행되고 끝이다.

이렇게 콜백이 여러 번 실행되어야하는 비동기 실행 함수인 경우에는 Promisify를 하면 안 된다.

처음부터 바로 fulfilled 상태이거나 rejected 상태인 Promise 객체를 만드는 것도 가능하다.👇🏻👇🏻

✨이미 상태가 결정된 Promise 객체 만들기

(1) fulfilled 상태의 Promise 객체 만들기

const p = Promise.resolve('success');

Promise의 resolve라는 메소드를 사용하면 바로 fulfilled 상태의 Promise 객체를 만들 수 있다. 위와 같이 쓰면 fulfilled 상태이면서, 작업 성공 결과로 문자열 'success'를 가진 Promise 객체를 만들 수 있다.

(2) rejected 상태의 Promise 객체 만들기

const p = Promise.reject(new Error('fail'));

Promise의 reject라는 메소드를 사용하면 바로 rejected 상태의 Promise 객체를 만들 수 있다. 위와 같이 쓰면 rejected 상태이면서, 작업 실패 정보로, fail이라는 메시지를 가진 Error 객체를 가진 Promise 객체를 만들 수 있다.

Promise 객체를 직접 생성하는 방법)

const p = new Promise((resolve, reject) => {

});

new 생성자와 executor 함수를 사용하는 것 말고도 resolve 메소드나, reject 메소드를 사용하는 방법도 있다는 사실!! resolve 메소드나 reject 메소드로 생성한 Promise 객체도 이때까지 우리가 배운 것과 동일하게 작동한다.

const p = Promise.resolve('success');
p.then((result) => { console.log(result); }, (error) => { console.log(error); });

이 코드에서는 첫 번째 콜백이 실행되어서 작업 성공 결과인 문자열 success가 출력되고

const p = Promise.reject(new Error('fail'));
p.then((result) => { console.log(result); }, (error) => { console.log(error); });

이 코드에서는 두 번째 콜백이 실행되어서 작업 실패 정보인 Error 객체의 내용이 출력된다.

어떤 비동기 작업을 처리할 필요가 있다면, new 생성자와 executor 함수를 사용해서 Promise 객체를 만들어야 하지만, 그렇지 않고 바로 상태가 이미 결정된 Promise 객체를 만들고 싶을 때는 이 resolve 또는 reject 메소드를 사용한다.

구체적으로 예를 들자면, 함수 안에서 리턴하는 값이 여러 개인 경우 모든 리턴값을 Promise 객체로 통일하고 싶을 때, 종종 resolve 또는 reject 메소드를 쓴다.

function doSomething(a, b) {
    //~~
  if (problem) {
    throw new Error('Failed due to..'));
  } else {
    return fetch('https://~');
  }
}

문제(problem이 falsy인 경우)가 없는 경우에만 fetch 함수를 호출해서 Promise 객체를 리턴하는 함수가 있다고 해보자.

만약 문제가 발생하는 경우에는 바로 Error 객체를 throw하고 있다. 만약 문제가 존재하는 경우에도 Promise 객체를 리턴하고 싶다면 reject 메소드를 써서 작성할 수 있다.

function doSomething(a, b) {
  // ~~
  if (problem) {
    return Promise.reject(new Error('Failed due to..'));
  } else {
    return fetch('https://~');
  }
}

지금 문제가 있는 경우에도 에러를 바로 throw하는 게 아니라, 생성한 에러를 Promise 객체의 작업 실패 정보로 설정해서, 그 Promise 객체를 리턴하는 것으로 바꿨다. 만약 어떤 함수가 어떤 상황이든 항상 Promise 객체를 리턴하는 것으로 통일하고 싶은 경우에는 resolve나 reject 메소드를 유용하게 사용할 수 있다.

2. Promise 객체의 작업 성공 결과 또는 작업 실패 정보

fulfilled 또는 rejected 상태가 결정된 Promise 객체라도 then 메소드를 붙이면, 콜백에서 해당 작업 성공 결과 또는 작업 실패 정보를 받아올 수 있다.

Promise 객체의 상태가 fulfilled 또는 rejected 상태이기만 하면, 어느 시점이든, 몇 번이든 then 메소드를 붙여서 해당 결과를 가져올 수 있다.

const p = new Promise((resolve, reject) => {
    // 2초 후에 fulfilled 상태가 됨
  setTimeout(() => { resolve('success'); }, 2000); 
});

// Promise 객체가 pending 상태일 때 콜백 등록
p.then((result) => { console.log(result); }); 

// Promise 객체가 fulfilled 상태가 되고 나서 콜백 등록
setTimeout(() => { p.then((result) => { console.log(result); }); }, 5000); 

Promise가 pending 상태일 때 등록한 콜백이든, fulfilled 상태가 된 후에 등록한 콜백이든 잘 실행되는 것을 알 수 있다. 이렇게 어느 시점이든, 몇 번의 then 메소드를 붙이든 상관없이, pending 상태만 아니라면 항상 then 메소드로 Promise 객체의 결과를 추출할 수 있다.

Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고 그것의 then 메소드는 그 결과를 소비하는 콜백인 소비자(Consumer)를 설정하는 메소드라는 사실!!

✨여러 Promise 객체 다루기

1. all 메소드

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learn.codeit.kr/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  });

• 서로 다른 3개의 URL로 리퀘스트를 보내는 fetch 함수들이다. 1번, 2번, 3번 직원의 정보를 각각 요청하고 있다.
• Promise의 all이라는 메소드를 호출하고 있고, all 메소드의 아규먼트로는 배열 하나가 들어있다. 그 배열의 요소들은, 각 직원 정보를 요청하고 받아서 Deserialize까지 수행한 작업 성공 결과를 담고 있는 Promise 객체들인 p1, p2, p3 객체다.
• all 메소드도 then 메소드처럼 새로운 Promise 객체를 리턴한다.
• all 메소드는 이렇게 아규먼트로 들어온 배열 안에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다린다.
• 모든 Promise 객체들이 fulfilled 상태가 되면, all 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 각 Promise 객체의 작업 성공 결과들로 이루어진 배열을, 그 작업 성공 결과로 갖게 된다.

이렇게 all 메소드가 리턴한 Promise 객체는,

(1) 각 개별 Promise 객체의 작업 성공 결과로 이루어진 배열을 (2) 자신의 작업 성공 결과로 갖는다는 것을 알 수 있다.

⇒ all 메소드는 여러 Promise 객체의 작업 성공 결과를 기다렸다가 모두 한 번에 취합하기 위해서 사용한다.

그런데 만약 p1~3 객체들 중 하나라도, rejected 상태가 되면?

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learnnnnnn.codeit.kr/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  });

• fetch 함수에서 문제가 발생해서 p3가 rejected 상태가 되면, all 메소드가 리턴한 Promise 객체는 p3 객체처럼 rejected 상태가 되고 동일한 작업 실패 정보를 갖게 된다.
• all 메소드는 하나의 Promise 객체라도 rejected 상태가 되면, 전체 작업이 실패한 것으로 간주해야 할 때 사용한다.

그리고 이렇게 Promise 객체가 하나라도 rejected 상태가 되는 경우에 대비하려면

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learnnnnnn.codeit.kr/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  })
  .catch((error) => {
    console.log(error);
  });

그냥 이렇게 catch 메소드를 붙여주면 된다.

2. race 메소드

• race 메소드도 all 메소드와 마찬가지로 여러 Promise 객체들이 있는 배열을 아규먼트로 받는다. race 메소드도 all 메소드처럼 Promise 객체를 리턴한다.
• 작동방식의 차이점이 있음) race 메소드가 리턴한 Promise 객체는 아규먼트로 들어온 배열의 여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태 또는 rejected 상태가 된 Promise 객체와 동일한 상태와 결과를 갖게 된다.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success'), 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('fail')), 2000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('fail2')), 4000);
});

Promise
  .race([p1, p2, p3])
  .then((result) => {
    console.log(result); // hello 출력
  })
  .catch((value) => {
    console.log(value);
  });

지금 race 메소드 안의 배열에 들어있는 Promise 객체들 중에서 무엇이 가장 빨리 fulfileld 또는 rejected 상태가 될까? → 1초 후에 fulfilled 상태가 되는 p1 객체

p1 객체는 1초 후에 fulfilled 상태가 되고, 그 작업 성공 결과로 문자열 Success를 가지게 된다. p2는 2초 후에, p3는 4초 후에 rejected 상태가 된다.

⇒ race 메소드가 리턴한 Promise 객체는 이 중에서 가장 빨리 상태 정보가 결정된 p1 객체와 동일한 상태와 결과를 가진다. ⇒ 말그대로 race 메소드는 여러 Promise 객체들을 레이스(race, 경쟁)시켜서 가장 빨리 상태가 결정된 Promise 객체를 선택하는 메소드

그 외 메소드

각 메소드가 리턴한 Promise 객체가 A라고 할 때,

allSettled 메소드 : 배열 내의 모든 Promise 객체가 fulfilled 또는 rejected 상태가 되기까지 기다리고, pending 상태의 Promise 객체가 하나도 없게 되면, A의 상태값은 fulfilled 상태가 되고 그 작업 성공 결과로, 하나의 배열을 갖게 된다.

이 배열에는 아규먼트로 받았던 배열 내의 각 promise 객체의

(1) 최종 상태를 status 프로퍼티, (2) 그 작업 성공 결과는 value 프로퍼티, (3) 그 작업 실패 정보는 reason 프로퍼티

에 담은 객체들이 요소로 존재한다.

[
   {status: "fulfilled", value: 1},
   {status: "fulfilled", value: 2},
   {status: "fulfilled", value: 3},
   {status: "rejected",  reason: Error: an error}
]

참고로 fulfilled 상태와 rejected 상태를 묶어서 settled 상태라고 한다.

allSettled 메소드는 말 그대로 배열 속 Promise 객체들이 settled 상태가 되기만 하면 되는 것. 이에 반해 위에서 배운 all 메소드는 모든 Promise 객체들이 fulfilled 상태가 되기를 기다리는 것.

any 메소드 : 여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태가 된 Promise 객체의 상태와 결과가 A에도 똑같이 반영된다. 만약 모든 Promise 객체가 rejected 상태가 되어버리면 AggregateError라고 하는 에러를 작업 실패 정보로 갖고 rejected 상태가 된다. any라는 단어의 뜻처럼 배열 속의 Promise 객체 중 단 하나라도 fulfilled 상태가 되면 되는 것.

✨axios

fetch 함수가 Ajax 통신을 하는 함수다. 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재한다. ⇒ axios 라고 하는 외부 패키지를 사용하는 것.

axios
  .get('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

• axios 패키지에서 제공하는 axios 객체를 사용해서 GET 리퀘스트를 보내고 그 리스폰스를 받는 코드다.
• 자세히 보면 지금 코드에서 axios.get이라고 쓰여 있는 부분만 fetch로 바꾸면 fetch 함수와 사용법이 비슷하다
• 사실 axios 객체에서 리퀘스트를 보내는 많은 메소드들이 fetch 함수처럼 Promise 객체를 리턴한다.
• axios 객체에는 fetch 함수에는 없는 다음과 같은 몇 가지 기능 및 장점이 있다.)
  • 모든 리퀘스트, 리스폰스에 대한 공통 설정 및 공통된 전처리 함수 삽입 가능
  • serialization, deserialization을 자동으로 수행
  • 특정 리퀘스트에 대해 얼마나 오랫동안 리스폰스가 오지 않으면 리퀘스트를 취소할지 설정 가능(request timeout)
  • 업로드 시 진행 상태 정보를 얻을 수 있음
  • 리퀘스트 취소 기능 지원

https://github.com/axios/axios

[P1_S3] 자바스크립트 웹 개발 기본기

(4) async/await을 활용한 세련된 비동기 코드

(4) async/await을 활용한 세련된 비동기 코드

/* fetch('https://www.google.com')
    .then((response) => response.text())
    .then((result) => { console.log(result); }); */

async function fetchAndPrint() {
  console.log(2);
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  console.log(7);
  const result = await response.text();
  console.log(result);
}

console.log(1);
fetchAndPrint();
console.log(3);
console.log(4);
console.log(5);
console.log(6);

• async/await 구문은 기존의 Promise 객체를 사용하는 코드(Promise Chaining)를

(1) 개발자가 더 편하게 작성할 수 있도록 하고 (2) 코드의 가독성을 높이기 위해서

도입된 일종의 Syntactic sugar(기존 문법을 더 편하게 사용할 수 있도록 하는 문법적 장치)에 해당한다.

원래는)

• 전통적인 형식의 비동기 실행 함수에 콜백을 바로 전달하거나,
• Promise 객체 뒤에 .then 메소드를 붙이는 것보다는

그냥 코드를 차례대로 써나가는 것이 더 익숙한 방식이다. → async/await 구문이 Promise 객체를 우리에게 이미 익숙한 동기 실행 코드 방식으로 다룰 수 있게 해주는 문법이다.

// 위 코드 출력 결과
1
2
3
4
5
6
7
[리스폰스의 내용]

원래코드)

/* fetch('https://www.google.com')
    .then((response) => response.text())
    .then((result) => { console.log(result); }); */

function fetchAndPrint() {
  console.log(2);
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => {
      console.log(7);
      return response.text();
    })
    .then((result) => { console.log(result); });
}

console.log(1);
fetchAndPrint();
console.log(3);
console.log(4);
console.log(5);
console.log(6);

async/await 구문을 사용하면,

(1) Promise 객체를 사용할 때, then 메소드 등을 사용하지 않고도 (2) 마치 동기 실행 코드처럼 코드를 훨씬 더 간단하고 편하게 작성할 수 있다.

• async 함수 안의 코드가 실행되다가 await을 만나면, 일단 await 뒤의 코드가 실행되고, 코드의 실행 흐름이 async 함수 바깥으로 나가서 나머지 코드를 다 실행한다.
• 그 이후로는, await 뒤에 있던 Promise 객체가 fulfilled 상태가 되기를 기다린다. 그리고 기다리던 Promise 객체가 fulfilled 상태가 되면 await이 Promise 객체의 작업 성공 결과를 리턴한다.

✨async 함수 안에서 리턴하는 값의 종류에 따라 어떤 Promise 객체를 리턴하게 될까.

1. 어떤 값을 리턴하는 경우

(1) Promise 객체를 리턴하는 경우

async 함수 안에서 Promise 객체를 리턴하는 경우에는 해당 Promise 객체와 동일한 상태와 작업 성공 결과(또는 작업 실패 정보)를 가진 Promise 객체를 리턴한다.

async function fetchAndPrint() {
  return new Promise((resolve, reject)=> {
    setTimeout(() => { resolve('abc'); }, 4000);
  });
}

fetchAndPrint();

이렇게 pending 상태의 Promise 객체를 리턴하기도 하고

async function fetchAndPrint() {
  return Promise.resolve('Success');
}

fetchAndPrint();

이미 fulfilled 상태인 Promise 객체나

async function fetchAndPrint() {
  return Promise.reject(new Error('Fail'));
}

fetchAndPrint();

이미 rejected 상태인 Promise 객체를 리턴하는 경우 전부 다 해당한다.

(2) Promise 객체 이외의 값을 리턴하는 경우

async 함수 내부에서 Promise 객체 이외에 숫자나 문자열, 일반 객체 등을 리턴하는 경우에는, fulfilled 상태이면서, 리턴된 값을 작업 성공 결과로 가진 Promise 객체를 리턴한다.

async function fetchAndPrint() {
  return 3;
}

fetchAndPrint();

async function fetchAndPrint() {
  return 'Hello';
}

fetchAndPrint();

async function fetchAndPrint() {
  const member = {
    name: 'Jerry',
    email: 'jerry@codeitmall.kr',
    department: 'sales',
  };

  return member;
}

fetchAndPrint();

2. 아무 값도 리턴하지 않는 경우

async function fetchAndPrint() {
  console.log('Hello Programming!');
}

fetchAndPrint();

함수에서 아무런 값도 리턴하지 않으면 자바스크립트에서 undefined를 리턴한 것으로 간주한다

이 경우에는 fulfilled 상태이면서, undefined를 작업 성공 결과로 가진 Promise 객체가 리턴

3. async 함수 내부에서 에러가 발생했을 때

async function fetchAndPrint() {
  throw new Error('Fail');
}

fetchAndPrint();

async 함수 안에서 에러가 발생하면, rejected 상태이면서, 해당 에러 객체를 작업 실패 정보로 가진 Promise 객체가 리턴된다.

✨async를 붙이는 위치

자바스크립트에서 함수를 표현하는 방법에는

1. Function Declaration(함수 선언식)
2. Function Expression(함수 표현식)
   1. 함수에 이름이 붙어있는 Named Function Expression
   2. 함수에 이름이 없는 Anonymous Function Expression
3. Arrow Function(화살표 함수)

👇🏻async 붙이는 위치👇🏻

// 1) Function Declaration
async function example1(a, b) {
  return a + b;
}

// 2-a) Function Expression(Named)
const example2_1= async function add(a, b) {
  return a + b;
};

// 2-b) Function Expression(Anonymous)
const example2_2 = async function(a, b) {
  return a + b;
};

// 3) Arrow Function
const example3_1 = async (a, b) => {
  return a + b;
};

// 3) Arrow Function(shortened)
const example3_2 = async (a, b) => a + b;

👇🏻즉시실행함수(Immediately-invoked function expression, IIFE)👇🏻

(async function print(sentence) {
  console.log(sentence);
  return sentence;
}('I love JavaScript!'));

(async function (a, b) {
  return a + b;
}(1, 2));

(async (a, b) => {
  return a + b;
})(1, 2);

(async (a, b) => a + b)(1, 2);

✨async 함수를 작성할 때 주의해야할 성능 문제

async function getResponses(urls) {
  for(const url of urls){
    const response = await fetch(url);
    console.log(await response.text());
  }
}

• getResponses 함수는 urls라는 파라미터로, 여러 개의 URL들이 있는 배열을 받아서, 순서대로 각 URL에 리퀘스트를 보내고, 그 리스폰스의 내용을 출력하는 함수다.
• 문제점 ⇒ 이전 URL에 리퀘스트를 보내고 리스폰스를 받아서 출력하고 나서야, 다음 URL에 대한 리퀘스트를 보낼 수 있다는 점이다. 즉, 순차적인 작업 처리를 한다는 점이다. 왜냐하면 이전 URL에 대해서 await 문이 붙은 Promise 객체가 fulfilled 상태가 될 때까지는 그 다음 URL에 대한 작업들이 시작될 수 없기 때문이다.

만약 리스폰스의 내용의 순서가 중요하지 않은 경우라면?

async function fetchUrls(urls){
  for(const url of urls){
    (async () => { // 추가된 부분!
      const response = await fetch(url);
      console.log(await response.text());
    })(); // 추가된 부분
  }
}

• 각 url에 리퀘스트를 보내고 리스폰스를 받는 코드를, 별도의 즉시실행되는 async 함수로 감쌌다.
• 이렇게 코드를 고치면 일단 각 URL에 대해서 fetch 함수를 실행해서 리퀘스트를 보내는 것을 순서대로 바로 실행한다. 이렇게 코드를 수정하면, 일단 모든 URL에 대한 리퀘스트를 쭉 보내버리고, 먼저 리스폰스가 오는 순서대로 그 내용이 출력된다.

✨비동기 실행 정리

📘비동기 실행의 정의

• 특정 작업이 시작되고, 그 작업이 모두 완료되기 전에 바로 다음 코드가 실행되는 방식의 실행, 나머지 작업은 나중에 콜백을 통해 수행되는 방식의 실행
• 특정 처리를 나중으로 미루는 방식의 실행
• 콜백을 등록해두고, 추후에 특정 조건이 만족되면 그 콜백으로 나머지 작업을 수행하는 방식의 실행

⇒ 특정 처리를 담당하는 존재(콜백)의 실행을 나중으로 미룬다!

📘비동기 실행 관련 문법 3가지

(1) 파라미터로 바로 콜백을 전달하는 형태의 전통적인 비동기 실행 함수 (2) Promise (3) async/await

1. 파라미터로 바로 콜백을 전달하는 형태의 전통적인 비동기 실행 함수

setTimeout, setInterval 함수, DOM 객체의 addEventListener 메소드 등이 여기에 해당한다.

setTimeout(() => {
  console.log('asynchronously executed');
}, 2000);

button.addEventListener('click', (event) => { console.log('You Clicked'); });

함수의 파라미터로 콜백을 바로 전달하는 방식은 여전히 많은 경우에 쓰이고 있지만, 여러 비동기 작업의 순차적인(sequential) 처리가 필요한 경우에 이런 함수들로 코드를 작성하면,

fs.readFile('file1.txt', 'utf8', (error1, data1) => {
  if (error1) {
    console.log(error1);
  } else {
    console.log(data1);
    fs.readFile('file2.txt', 'utf8', (error2, data2) => {
      if (error2) {
        console.log(error2);
      } else {
        console.log(data2);
        fs.readFile('file3.txt', 'utf8', (error3, data3) => {
          if (error3) {
            console.log(error3);
          } else {
            console.log(data3);
          }
        });
      }
    });
  }
});

⇒ 코드의 가독성이 급격하게 떨어지는 콜백 헬(callback hell) 문제가 발생할 가능성이 높다.

2. Promise

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); })
  .catch((error) => { console.log(error); })
  .finally(() => { console.log('exit'); });

Promise 객체를 사용하면 콜백 헬 문제를 방지하면서, 여러 비동기 작업을 순차적으로 처리할 수 있다.

기존의 1.과 같은 전통적인 비동기 실행 함수들 중에서도 그 콜백이 단 한 번만 실행되는 함수들은

function readFile_promisified(filename) {
  const p = new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (error, data) => {
      if (error) {
        reject(error); // 에러 발생 시 -> rejected
      } else {
        resolve(data); // 파일 내용 읽기 완료 -> fulfilled
      }
    });
  });
  return p;
}

이런 식으로 Promisify해서 콜백 헬의 가능성을 없애고, Promise Chain 안에서 그 콜백의 리턴값을 사용할 수 있다.

rejected 상태의 Promise 객체에 대비하기 위한 catch 메소드, 어느 상황이든 항상 마지막에 실행해야 할 코드가 있을 때 사용하는 finally 메소드도 있다.

3. async / await 구문

async function fetchAndPrint() {
  try {
    const response = await fetch('https://www.google.www');
    const result = await response.text();
    console.log(result);
  } catch(error) {
    console.log(error);
  } finally {
    console.log('exit');
  }
}

fetchAndPrint();

async/await 구문은 Promise 객체를 다루는 코드(Promise Chaining 코드 등)를 사람들이 좀더 익숙하게 느끼는 동기 실행 스타일의 코드로 작성할 수 있게 해주는 Syntactic sugar라고 했다.

async 함수 안의 내용이 순차적으로 실행되다가도, await 문을 만나면 await 바로 뒤에 붙은 코드를 실행해두고, 일단은 함수 바깥으로 코드 흐름이 바뀐다!!

⇒ Promise 기반의 코드들은 가능한 경우에 모두 async/await 구문으로 전환해서 작성하는 게 더 좋다.

2021년 1월을 기준으로 아직 위의 3가지 비동기 실행 관련 문법들은 서로 상호보완적인 것들이라고 할 수 있다. 왜냐하면 아직 아래와 같이 하나가 다른 하나를 완벽히 대체하지 못하는 측면이 있기 때문이다.

1. 콜백을 함수의 파라미터로 바로 전달하는 전통적인 방식의 비동기 실행 함수들 중에서도 setInterval, addEventListener처럼 그 콜백이 단 한번이 아니라 여러 번 실행되어야 하는 것들은 Promisify해서 사용하면 안 된다. Promise 객체는 한번 fulfilled 또는 rejected 상태가 되고나면 그 상태와 결과가 다시는 바뀌지 않기 때문이다.
2. async/await 구문의 경우, await은 async 함수 안에서만 사용할 수 있고, 코드의 top-level(어떤 함수 블록 안에 포함된 것이 아닌 코드의 최상위 영역)에서는 사용될 수는 없다. 그래서 코드의 top-level에서 async 함수가 리턴한 Promise 객체의 작업 성공 결과를 가져오려면 await을 사용할 수는 없고, 여전히 then 메소드를 사용해야한다.

콜백 헬 문제를 해결하기 위해 Promise 객체가 등장했고, Promise를 좀 더 편하게 다루기 위해서 async/await 구문이 등장했다.

✨두 가지 종류의 콜백

자바스크립트에서 콜백은 어떤 함수의 파라미터로 전달되는 모든 함수를 의미하는 개념이다. 그러니까 어떤 함수의 파라미터로 전달되기만 한다면 해당 함수는 그 함수의 콜백이 되는 것.

이런 콜백은

1. 동기 실행되는 콜백과 2. 비동기 실행되는 콜백

으로 나뉜다.

그렇다면 1번에 해당하는 콜백에는 어떤 것들이 있을까?

예를 들어, 자바스크립트 배열의 메소드 중에서 filter라는 메소드

→ 이 메소드는 배열의 여러 요소들 중에서 특정 조건을 만족하는 요소들만을 추려서 그 요소들로만 이루어진 새로운 배열을 리턴하는 메소드다.

const arr = [1, 2, 3, 4, 5, 6];

const newArr = arr.filter(function isOdd(num) {
  return (num % 2 === 1);
});

console.log(newArr); // [1, 3, 5]

• arr라는 배열에서 홀수만을 추출해서 해당 홀수들만으로 이루어진 새로운 배열을 리턴한다.
• filter 함수의 파라미터 부분을 보면 isOdd(홀수인가요?)라는 함수가 들어있다.
• filter 함수는 arr 배열에서 각 요소를 하나씩 순회하면서 매 요소마다 isOdd 함수를 실행하고, 해당 함수가 true를 리턴하는 요소들만을 추출한다.

👇🏻Arrow Function 형식👇🏻

const arr = [1, 2, 3, 4, 5, 6];

const newArr = arr.filter((num) => num % 2);

console.log(newArr); // [1, 3, 5]

filter 메소드 안의 콜백은 '동기 실행되는 콜백'이다. 즉, 이 콜백은 우리가 이번 토픽에서 배웠던 '비동기 실행되는 콜백'과는 달리, 아주 정직하게 순서대로 실행된다.

자바스크립는 싱글 스레드로 동작한다.

싱글 스레드: 한 번에 하나의 태스크만 처리한다는 뜻

(실제 면접에 받은 질문: 이벤트 루프에 대해 설명하는 것.) ❓자바스크립트를 멀티 스레드처럼 사용하는 방법이 뭔가요? 이벤트 루프에 대해서 설명해주세요.

자바스크립트는 싱글 스레드 언어지만 비동기 작업을 통해 멀티 태스크를 수행할 수 있다.

비동기 로직은 이벤트 루프를 통해 처리된다.

힙

• 객체가 저장되는 메모리 공간

콜 스택

• 함수 호출 시 실행 컨텍스트가 생성된다.
• 함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행하지 않음.

이벤트 루프

• 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.(FIFO)

태스트 큐

• 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

예시)

console.log(1+1)
setTimeout(function() {console.log(2+2)}, 1000)
console.log(3+3)

• 실행결과는?

    2
    6
    4

• 동작순서

  1. console.log(1+1) 이 콜 스택에 올라감 → 2 출력
  2. setTimeout 함수가 실행되어 타이머가 설정되고 비동기 작업 시작. → setTimeout함수의 콜백함수는 태스크 큐에서 대기.
  3. console.log(3+3) 이 콜 스택에 올라감 → 6 출력
  4. setTimeout안의 console.log(2+2)가 태스크 큐로 이동
  5. 콜 스택이 비어있나 확인 후, console.log(2+2) 콜 스택에 올라감 → 4 출력

마이크로 태스트 & 매크로 태스크

태스크 큐는 마이크로 태스크큐와 매크로 태스크큐로 나뉜다.

• 마이크로태스트: Promise의 then, catch, finally와 같은 마이크로 태스크
• 매크로 태스크: setTimeout 및 비동기 작업의 콜백 함수

마이크로태스크 큐는 태스크 큐보다 우선순위가 높다. → 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. → 마이크로태스크 큐가 비면 매크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.

얕은 복사(Shallow Copy)

• 객체나 배열을 복사할 때, 복사된 객체는 원본 객체의 참조를 공유한다. 즉, 복사된 객체의 내부 객체는 실제로 복사되지 않고, 원본 객체와 같은 내부 객체를 참조한다.
• 주로 Object.assign()이나 스프레드 연산자(...)를 사용하여 이루어진다.

예시)

let originalArray = [1, 2, 3];

// 또는 let shallowCopy = [...originalArray];
let shallowCopy = originalArray.slice();

shallowCopy[0] = 5;

console.log(originalArray); // [1, 2, 3]
console.log(shallowCopy); // [5, 2, 3]

깊은 복사(Deep Copy)

• 객체나 배열을 복사할 때, 복사된 객체는 원본 객체와 완전히 분리되어 있다. 내부 객체까지 모두 복사된다.
• 이러한 방식으로 복사된 객체는 원본 객체의 변경에 영향을 받지 않는다.
• 자바스크립트에서는 기본적으로 깊은 복사를 지원하지 않기 때문에 직접 구현하거나 외부 라이브러리를 사용해야 한다.

예시)

let originalArray = [[1], [2], [3]];
let deepCopy = JSON.parse(JSON.stringify(originalArray));

deepCopy[0][0] = 5;

console.log(originalArray); // [[1], [2], [3]]
console.log(deepCopy); // [[5], [2], [3]]

JSON.stringify()를 통해 객체를 문자열로 변환하고, 다시 JSON.parse()를 사용하여 문자열을 객체로 변환함으로써 깊은 복사를 할 수 있다. 하지만 이 방법은 모든 데이터를 복사하기 때문에 성능에 영향을 줄 수 있다. 또한, 함수나 순환 참조된 객체 등을 복사할 수 없다.

❓var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

중복 선언 허용

• var: 중복 선언이 허용된다. 같은 변수를 여러 번 선언해도 오류가 발생하지 않는다. 다만, 이전 값은 무시되고 새로운 값으로 변수가 재할당된다.
• let, const: 중복 선언이 허용되지 않는다. 같은 이름의 변수를 두 번 선언하면 구문 오류가 발생한다.

스코프(Scope)

• var: 함수 스코프를 갖는다. 함수 내에서 선언된 변수는 해당 함수 전체에서 접근할 수 있다.
• let, const: 블록 스코프를 갖는다. {} 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있다.

호이스팅(Hoisting)

• var: 선언 단계가 호이스팅된다. -> 변수 선언은 해당 스코프의 최상단으로 끌어올려진다. 초기화는 그 자리에 남아 있다.
• let, const: 호이스팅은 발생하지만 TDZ(Temporal Dead Zone)라는 것이 존재한다. TDZ 내부에서 변수를 참조하려고 하면 ReferenceError가 발생한다. -> 선언 이전에 변수에 접근하는 것은 안전하지 않다.

// var
console.log(x); // undefined (호이스팅)
var x = 10;
console.log(x); // 10

// let
console.log(y); // ReferenceErrorinitialization
let y = 20;
console.log(y); // 20

// const
console.log(z); // ReferenceErrorinitialization
const z = 30;
console.log(z); // 30

⚠️TDZ

Temporal Dead Zone의 약자(일시적 사각지대)

let과 const 변수가 선언되기 전에 접근하려고 할 때 발생하는 현상 -> 변수가 선언되었지만 초기화되기 이전의 시점을 나타낸다.

TDZ 특성

• 접근 시 오류 발생: TDZ 내에서 변수에 접근하면 ReferenceError가 발생한다. -> 변수가 아직 초기화되지 않았기 때문에 해당 변수에 접근할 수 없음.

• 호이스팅: let이나 const로 선언된 변수는 호이스팅된다. -> 해당 변수의 선언은 스코프의 최상단으로 끌어올려진다. 하지만 초기화는 호이스팅되지 않으며, TDZ 내에서 변수에 접근하면 ReferenceError가 발생한다.

• 블록 스코프 내에서 적용: TDZ는 블록 스코프에서만 적용된다. -> let이나 const로 선언된 변수는 해당 블록 내에서만 TDZ에 영향을 받는다.

🙏🏻TDZ는 코드의 안전성을 높이고 실수를 줄이기 위해 도입된 개념으로, 변수의 사용을 명시적으로 초기화한 후에만 안전하게 접근할 수 있도록 한다.