오늘로써 React과정은 마무리가 되었다
React 스타일링과 전역상태관리 (= Context API, Redux, RTK)
최적화 함수(=useMemo, useCallback)
Lazy & Suspence
번들링 & 코드 스플리팅
Debounce & Throttle
을 배웠었다.
심화과정을 하면서 익혔던 것들을 상기하며
오늘 치른 시험 오답노트를 작성해 보자!
💡 오답 노트 💡
A. CSS-in-JS 방식으로 스타일링 가능
B. 컴포넌트 기반으로 스타일을 캡슐화
C. 스타일 시트의 전역 네임스페이스 오염 방지
D. 브라우저 호환성을 자동으로 보장 ➡️ CSS 작성 시 개발자가 직접 고려해야 할 사항 (정답)
✔️ 전역 네임스페이스 오염 : 전역 유효 범위를 오염시킨다는 말은 전역 변수와 전역 함수를 전역 객체에 선언하는 행위를 말한다. 전역 유효 범위가 오염되면 변수 이름과 함수 이름이 겹치는 상황이 발생한다.
- 라이브러리 파일을 여러 개 읽어 들여 사용할 때
- 규모가 큰 프로그램을 만들 때
- 여러 사람이 한 프로그램을 만들 때
➡️ 전역 유효 범위 안에서 이름이 같은 변수, 함수를 선언하면 자바스크립트 엔진은 호이스팅을 할 때 동일한 이름 중 하나만 생성한다. 따라서 해당 변수나 함수를 사용하는 다른 프로그램에서 오작동이 발생할 수 있다. 심지어 자바스크립트는 오류가 잘 발생하지 않기 때문에 디버깅이 쉽지 않다.
A. Reducer ➡️ 상태와 액션을 받아 새로운 상태를 리턴하는 함수, 전역상태 저장소 (정답)
B. Action ➡️ 상태를 어떻게 변화시킬 것인지에 대한 내용이 담겨있는 '객체'
C. Middleware ➡️ Redux에서 비동기 처리를 할 수 있게 해주는 미들웨어
D. Store ➡️ Redux의 전역 상태 저장소
(A) state / (B) value / (C) 1
➡️ Redux Toolkit에서의 리듀서는 직접적으로 상태를 변경할 수 있는 방법을 제공한다.
state.calue += 1 ; 로 상태를 직접 수정할 수 있다.
A. 상태 업데이트를 동기적으로 처리하기 위해 ➡️ 상태 업데이트는 비동기적으로 처리되므로, 불변성 관리와는 관련이 없습니다.
B. 상태 업데이트가 자동으로 전역에 반영되기 위해 ➡️ 불변성 관리와 상태의 전역 반영은 직접적인 연관이 없습니다.
C. 컴포넌트의 리렌더링이 발생하도록 하기 위해 (정답)
➡️ React에서는 상태가 불변성(immutability)을 유지해야 하는 이유는 상태가 변경되었을 때 컴포넌트가 리렌더링 되도록 하기 위함이다. 만약 기존 상태를 직접 변경하면 React는 상태가 변경된 것을 인식하지 못할 수 있다. 불변성을 유지하고 새로운 객체를 반환하는 방식으로 상태를 업데이트하면, React는 이를 인식하고 컴포넌트를 다시 렌더링 할 수 있다.
D. 상태 변경이 컴포넌트 간에 공유되기 위해 ➡️ 불변성 관리는 상태 변경 인식 및 렌더링과 관련이 있으며, 상태 공유와는 별개의 문제입니다.
A. /contact ➡️ Next.js에서는 pages 디렉터리 내의 파일 이름이 URL경로로 자동 변환됩니다. 따라서 contact.js 파일은 /contact 경로로 접근할 수 있습니다. pages 디렉터리 내의 파일은 URL 경로와 적접적으로 매핑됩니다. (정답)
✅ 헷갈렸던 문제들 & 개념 알기 ✅
A. Tailwind CSS는 클래스 유틸리티 기반이며, Styled Conponents는 CSS-in-JS 기반입니다. (정답)
B. Tailwind CSS는 주로 전역 스타일을 다루며, Styled Conponents는 컴포넌트별 스타일을 다룹니다.
C. Tailwind CSS는 CSS를 별도로 작성하지 않고도 스타일을 적용할 수 있습니다.
D. Styled Conponents는 자바스크립트 파일 내에서 CSS를 작성하지 못합니다.
➡️ Styled Conponents는 CSS-in-JS기반이므로 반대로 설명.
➡️ Tailwind CSS는 클래스 유틸리티를 사용해 빠르게 스타일을 적용할 수 있으며, CSS 파일을 별도로 작성하지 않고도 스타일을 적용할 수 있습니다. 반면 Styled Components는 자바스크립트 파일 내에서 CSS를 작성하는 CSS-in-JS 방식을 사용하여 컴포넌트별로 스타일을 캡슐화합니다. b)는 사실이 아니므로 정답이 아닙니다.
A. 상위 컴포넌트에서 모든 상태를 관리하고, 모든 하위 컴포넌트에서 직접 props로 전달한다.
➡️ props drilling 문제를 악화시킬 수 있다.
B. 상위 컴포넌트에서 상태를 관리하고, 상태를 변경할 때마다 하위 컴포넌트 새로 렌더링 한다.
➡️ props driling 문제를 해결하지 않고, 성능 문제를 야기할 수 있다.
C. Context API 또는 상태 관리 라이브러리(Redux, Mobx 등)를 사용하여 전역 상태를 관리한다. (정답)
D. 하위 컴포넌트에서 상태를 직접 관리하고 상위 컴포넌트와의 데이터 전달을 최소화한다.
➡️ props driling 문제를 해결하지 않고, 상태 관리를 비효율적으로 만들 수 있다.
A. thunk ➡️ 비동기 작업을 처리하기 위해 (정답)
B. saga ➡️ React/Redux 애플리케이션에서 비동기적으로 API를 호출하여 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리
C. logger ➡️ reducer 실행 전후를 로그로 확인할 수 있게 해주는 미들웨어
D. promise ➡️ JavaScript에서 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체
A. Action ➡️ 상태를 어떻게 변화시킬 것인지에 대한 내용이 담겨있는 '객체'
B. Reducer ➡️ 상태와 액션을 받아 새로운 상태를 리턴하는 함수, 전역상태 저장소
C. Selector ➡️ 상태에서 데이터를 추출하기 위해 사용
D. Store ➡️ Redux의 전역 상태 저장소
A. useState ➡️ 상태를 관리하는 Hook, 상태가 변경될 때마다 컴포넌트는 리렌더링 됨
B. useReducer ➡️ 복잡한 상태로직을 처리하는 Hook, 상태 변경 시 컴포넌트가 리렌더링 됩니다.
C. useMemo
➡️ 계산된 값을 메모이제이션하여 성능을 최적화하는 데 사용되지만, 상태가 변경되더라도 컴포넌트를 리렌더링 할 수 있다.
D. useRef
➡️ 리렌더링 시 영향을 주지 않는 값을 유지할 때 적합한 Hook, useRef로 저장된 값은 컴포넌트 리렌더링 될 때도 유지되며, 값이 변경되어도 컴포넌트가 다시 렌더링 되지 않는다. 따라서 useRef는 리렌더링과 관계없이 변수를 관리하는데 유용. (정답)
A. 클라이언트 측에서 JavaScript를 실행하지 않도록 합니다. ➡️ SSR과 SEO와는 관련 없음
B. 서버에서 페이지 콘텐츠를 미리 렌더링 하여 검색 엔진 크롤러가 페이지 내용을 쉽게 인식할 수 있도록 합니다. (정답)
C. 페이지 로드 속도를 향상합니다.
➡️ SSR의 주된 목적이 아니며, 렌더링 속도는 클라이언트와 서버의 성능에 따라 달라질 수 있다.
D. 사용자 상호작용을 관리하는 데 도움이 됩니다. ➡️ SSR과 SEO와는 관련 없음
참고자료
- https://tech.trenbe.com/2022/05/25/Redux-Saga.html(리덕스 사가(Redux Saga)란 무엇인가? - 정세영(웬디), 트렌비)
- https://velog.io/@cyranocoding/2019-08-02-1808-작성됨-5hjytwqpqj (JavaScript 비동기 처리를 위한 promise 이해하기 - 박한준, 벨로그)
- https://tangoo91.tistory.com/22 ([JavaScript] 자바스크립트 네임스페이스(Namespace, 이름공간) - 탱구, 티스토리)
- https://velog.io/@khy731/자바스크립트-네임스페이스namespace로-전역-변수-사용-억제하기 ([자바스크립트] 네임스페이스(namespace)로 전역 변수 사용 억제하기 - KangHyeYoon, 티스토리)
- https://ajdkfl6445.gitbook.io/study/html5-css/css (CSS의 문제점 - Cob, Gitbook)
'_TIL' 카테고리의 다른 글
| 20240828. TIL (0) | 2024.08.28 |
|---|---|
| 20240813. TIL (0) | 2024.08.14 |
| 20240812. TIL (0) | 2024.08.13 |
| 20240808. TIL (2) | 2024.08.09 |
| 20240807. TIL (3) | 2024.08.08 |
