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

1. 라우트로 페이지를 나누는 법을 설명해주세요.

react에서 router를 구현할 때 react-router-dom의 BrowserRouter, Routes, Route, Link 컴포넌트를 사용한다.

 

먼저 BrowserRouter은 react-router-dom 컴포넌트를 감싸는 최상단에 위치한다. 이후  Routes 하위에 경로에 따라 Route의 element에 전달한 컴포넌트로 분기하는 식이다.

 

Route의 컴포넌트의 path props 으로 경로를 지정하고 element props 에 보여줄 컴포넌트를 지정하면 된다. 

 

 

2. useParam에 대해 설명해주세요.

useParams은 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶을 때 사용하는 훅이다.

 

사용방법은 다음과 같다.

1) useParams를 import 한다.

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

 

2) useParams 정보를 하나의 변수에 저장한다.

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

 

3) 파라미터 값을 사용할 수 있다.

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

 

ex) ~url~/test/1은 파라미터가 1이므로, 현재 페이지는 파라미터가 1입니다.라고 출력된다.

참고로 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다.

 

 

 

3. context에 대해 설명해주세요.

리액트 애플리케이션에서는 일반적으로 컴포넌트에게 데이터를 전달해주어야 할 때 Props를 통해 전달한다.

 

그런데 깊숙히 위치한 컴포넌트에 데이터를 전달해야 하는 경우에는 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 하기 때문에 불편하고, 실수할 가능성이 높아진다. 이를 Props drilling 이라고 한다.

 

context는 props를 사용하지 않고 여러 컴포넌트에 필요한 데이터를 넘겨줄 수 있기 때문에 Props drilling을 해결할 수 있다.

 

 

4. react-router-dom에서 Link와 NavLink의 차이점에 대해 설명해주세요.

Link와 NavLink 모두 앱 내에서 다른 경로로 이동하기 위해 사용한다. 

그러나 NavLink는 Link와 다르게 activeClassName, activeStyle 속성으로 특정 링크에 스타일을 넣어줄 수 있다.

 

자세한 내용은 공식문서를 확인해보자

https://reactrouter.com/en/main