[코드잇 스프린트] 0423 데일리 퀴즈

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