티스토리 뷰
1. Link, Navigate, useNavigate를 언제 사용하면 좋을지 구분지어 설명해주세요.
1) Link
주로 애플리케이션 내에서 다른 경로로 이동할 때 사용한다.
ex.
- 네비게이션 메뉴 항목 클릭
- 특정 버튼을 눌러 다른 페이지로 이동할 때
import { Link } from 'react-router-dom';
function NavigationMenu() {
return (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);
}
2) Navigate
특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. (리다이렉트)
ex.
- 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
- 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우
import { Navigate } from 'react-router-dom';
function PrivateRoute() {
const isAuthenticated = // logic to check if user is authenticated
if (isAuthenticated) {
return <Navigate to="/dashboard" />;
} else {
return <Navigate to="/login" />;
}
}
3) useNavigate
웹 페이지 이동 시 추가적인 로직이 필요한 경우에 사용한다.
즉, 특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용하면 된다.
ex.
- 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
- 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
- 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
function handleSubmit() {
// login logic
navigate('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
{/* login form fields */}
</form>
);
}
2. CSR과 SPA 개념에 대해 설명해주세요.
1) CSR (Client-Side Rendering)
클라이언트 측에서 동적으로 HTML을 생성하여 페이지를 렌더링하는 방식이다. 초기 페이지 로드 시에는 빈 페이지가 렌더링되고, JavaScript 파일을 통해 동적으로 컨텐츠를 가져와서 화면에 표시한다.
CSR는 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다는 점, 검색 엔진 최적화(SEO)에는 취약하다는 것이 단점이다.
2) SPA (Single Page Application)
하나의 HTML 페이지로 애플리케이션을 구성하고, 필요한 데이터와 리소스는 페이지 로드 후 JavaScript를 사용하여 동적으로 로드하는 방식이다.
따라서 SPA는 페이지 간의 전환 시 화면이 새로고침되지 않고 부드럽게 이동할 수 있는 장점이 있고 주로 React, Angular, Vue.js 등의 프론트엔드 프레임워크나 라이브러리를 사용하여 구현된다.
3. React 프로젝트에서 `import App.css;`와 같이 CSS 파일을 임포트해서 사용하는 경우의 문제점을 설명해주세요.
1) 전역 스코프 오염
CSS 파일을 import하면 전역 스코프에 스타일이 적용되기 때문에 컴포넌트 간의 스타일 충돌이 발생할 수 있다.
2) 스타일 관리 어려움
큰 규모의 프로젝트에서는 스타일 파일이 많아지기 때문에 관리하기 어려워질 수 있다.
3) CSS 클래스명 충돌
다양한 CSS 파일에서 클래스명이 중복될 수 있으며, 이는 의도하지 않은 스타일 변화를 유발할 수 있다.
4. Styled Component에서 Props 사용하는 방법을 설명해주세요.
Styled Components는 React 컴포넌트에 넘어온 props에 따라 다른 스타일을 적용하는 기능을 제공하는데, Tagged Template Literals을 사용하기 때문에 함수도 문자열 안에 포함시킬 수 있다는 점을 이용한다.
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: ${props => props.primary ? 'white' : 'black'};
padding: 10px 20px;
border: 2px solid ${props => props.primary ? 'blue' : 'gray'};
border-radius: 5px;
`;
// 사용 예
<Button primary>Primary Button</Button> // primary props를 전달하여 프라이머리 버튼 생성
<Button>Secondary Button</Button>
이 예제에서 ${props => props.primary ? 'blue' : 'gray'}와 같은 부분은 Tagged Template Literals를 사용하여 함수를 문자열 리터럴 안에 포함시킨 것인데, 이 함수는 props.primary 값에 따라 다른 스타일을 적용한다.
Tagged Template Literals 이란?
우리는 동적인 문자열을 처리할 때 다음과 같은 형태를 많이 사용한다.
const userName = 'Mygumi';
const age = 20;
const output = `Hi, ${userName} and I am ${age}.`;
ES6 에서 새롭게 도입된 기능으로 템플릿 리터럴(Template Literals) 이라고 불린다.
백틱(`) 을 사용하여 문자열과 변수를 함께 사용할 수 있어 문자열 처리에 유용한 기능이다.
그렇다면 Tagged가 붙은 Tagged Template Literals은 무엇일까?
템플릿 리터럴의 발전된 형태로써, 함수 형태로 사용할 수 있다. 이 문법은 문자열에서 userName, age 와 같은 변수들과 "Hi," "and I am" 과 같은 정적인 문자열을 구분지을 수 있다.
여기서는 정적 데이터, 동적 데이터라고 구분 짓겠다.
예제를 통해 확인해보자.
function transform(staticData, ...dynamicData) {
console.log(staticData); // ["Hi, ", " and I am ", "."]
console.log(dynamicData); // ["Mygumi", 20]
}
transform`Hi, ${userName} and I am ${age}.`;
transform 함수를 일반적인 함수 호출 방식인 transform() 이 아닌 transform`` 형태인 것을 볼 수 있다.
첫번째 파라미터에는 정적 데이터가 저장되어 있고, 나머지 파라미터에는 동적 데이터가 저장되어 있는 모습을 볼 수 있다.
동적 데이터를 자세히 보면 age 값의 타입은 String 이 아닌 Number 형태로 타입이 유지된다.
만약 function 으로 호출했다면, 전달되는 파라미터는 단순 하나의 문자열이다.
function transform(staticData) {
console.log(staticData); // Hi, Mygumi and I am 20.
}
transform(`Hi, ${userName} and I am ${age}.`);
즉, Tagged Template Literals 문법을 사용하면 타입에 상관없이 Function, Number, Array, Object 등을 전달하고 이를 실행할 수 있게 된다.
참고
https://seo0yoon.tistory.com/69
https://mygumi.tistory.com/395
'코드잇 스프린트 > Daily Quiz' 카테고리의 다른 글
[데일리 퀴즈] 0522 데일리 퀴즈 (0) | 2024.05.22 |
---|---|
[코드잇 스프린트] 0424 데일리 퀴즈 (0) | 2024.04.24 |
[코드잇 스프린트] 0419 데일리 퀴즈 (0) | 2024.04.19 |
[코드잇 스프린트] 0417 데일리 퀴즈 (0) | 2024.04.17 |
[코드잇 스프린트] 0416 데일리 퀴즈 (0) | 2024.04.16 |
- Total
- Today
- Yesterday
- js
- react
- Git
- 취업까지달린다
- arguments
- map
- hydrationboundary
- rest parameter
- javascript
- 프론트엔드
- currentTarget
- 동기
- html
- CSS
- 비제어 컴포넌트
- 중급 프로젝트
- 객체
- tanstackquery
- 배열
- GitHub
- 스프린트프론트엔드6기
- 비동기
- Next.js
- 코드잇스프린트
- 제어 컴포넌트
- 코드잇 스프린트
- Target
- 유사배열객체
- innerhtml
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |