react-router 활용

besensible·2021년 5월 27일
0

react

목록 보기
1/1

다른 주소에 다른 화면을 렌더링 하고 싶을 때 사용

이런 url을 가진 메인 페이지에 도달했을 때 우리는 '/'를 활용해 각기 다른 페이지로 이동을 원할 때가 있습니다.. 보다는 한 웹사이트에서 다양한 기능 정보를 제공하기 때문에 라우팅은 필수가 아닐까 싶은데요.

쿠팡 url을 봐도 메인 페이지는 coupang.com으로 되어 있으나 기획전 탭을 클릭했더니 기본 url 뒤에 라우팅된 페이지로 이동을 위한 다른 '/np/exhibition'이 붙게 된 것을 볼 수 있어요.

리액트 라우터 실전 활용

간단하게 활용은 아래와 같은 모습으로 하게 됩니다.
Switch Router 를 써준 후에 path에 렌더링하고 싶은 컴포넌트의 url명칭(?)을 입력해 주면 된다. 첫화면, 메인화면, 홈화면을 렌더링할 때 기본적으로 '/'를 써주고, 컴포넌트 부분에 렌더링 하고자하는 컴포넌트를 써주면 됩니다.

그리고 저와 같은 경우는 코딩테스트 연습을 위해 컴포넌트 하나를 만들어서 썼는데요,
이렇게 기본 도메인 뒤에 '/test'라는 path를 써줘서 해당 url로 접근할 때는 코딩테스트를 위한 화면만 렌더링 할 수 있게 했습니다 :-)

import { Switch, Route } from 'react-router-dom';
import Home from 'Home';
import CodingTest from 'CodingTest';

function App() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/test" component={CodingTest} />
    </Switch>
  );
}
export default App;

홈화면 렌더링

홈화면을 렌더링 했을 때,


import { useEffect, useState } from "react";
import 'AppTest.scss';
import { Checkbox } from "antd";

const initialDatas = [
  {
    active: true,
    content: '코딩 테스트 공부하기',
  },
  {
    active: false,
    content: '리액트 공부하기',
  },
  {
    active: true,
    content: '노래 부르기',
  },
]

function Home() {

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


  useEffect(() => {
    const getInitialState = async () => {
    };
    getInitialState();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const onChange = () => {
  }

  return (
      <div className="Information">
        <div className="Tabs">
          <p className="new">NEW</p>
          <p className="dome">DONE</p>
        </div>

        {state.length > 0 && state.map((item, index) => {
          return (
            <div key={index}>
              <Checkbox onChange={onChange} checked={item.active}>
              <p className="content">{item.content}</p>
              </Checkbox>
            </div>
          )
        })}
      </div>
  );
}
export default Home;

코딩테스트화면 렌더링

여기선 코딩테스트 실행하려고 했던 부분이라 콘솔창만 활용해서 테스트 화면이 부족합니다..

import { useEffect } from "react";

function CodingTest() {

  var s = "qwer";
  var answer = '';

    useEffect(() => {
      const getInitialState = async () => {

        var array = s.split('');
        
        if (s.length % 2 === 0) {
          var newArray = [];
          console.log(array);
          
          newArray.push(array[(s.length / 2) - 1], array[s.length / 2]);
          console.log(newArray.join(''));
          
          return answer = newArray.join('');
        }

        if (s.length % 2 === 1) {
          console.log(array[Math.floor(s.length / 2)]);
          
          return answer = array[Math.floor(s.length / 2)];
        }
      };
      getInitialState();
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div className="Information">
          <div className="Tabs">
            <p className="new">NEW</p>
            <p className="dome">DONE</p>
          </div>
        </div>
    );
  }
  export default CodingTest;
  

profile
많고 많은 사람 중에 그대 한 사람

0개의 댓글