[React] 페이지 이동, props 렌더링

페이지 이동

import meno from './memo';
// 이동할 페이지를 import 해줌

const Home = () => {
  return(
      <div>
      	<!-- a 태그도 Link 태그로 변경해야함 / 변경전 -->
        <a href="/memo" title="메모장">
          메모장
        </a>
        <!-- 변경후 -->
        <Link href="/memo">
          메모장
        </Link>
      </div>
  )
};

export default Home;

 

 

페이지 불러오기

import React from 'react';
import SubMain from './sub_main';

const Main = () => {
  return (
    <>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <!-- sub_main 페이지를 불러옴 -->
      <SubMain />;
    </>
  )
};

export default Main;


<!-- sub_main.tsx -->
<!-- 해당 페이지를 위에서 불러옴 -->
function subMain() {
  return <div>서브메인</div>;
}

 

 

예시 화면 

 

컴포넌트 속성

import React from "react";
import SubMain from "./sub_main";

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <!-- name -->
      <SubMain name="react" />
    </div>
  );
};

export default Main;

// sub_main.tsx
import React from "react";

const subMain = (props) => {
  return <div>서브메인, {props.name}</div>;
  <!-- 서브메인, react -->
};

 

 

 

props.children

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <SubMain name="react">리액트</SubMain>
    </div>
  );
};

const subMain = (props) => {
  return (
    <div>
      <div>서브메인, {props.name}</div>
      <div>props children의 값은 {props.children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};

 

 

내부 값을 바로 추출하기

const Main = () => {
  return (
    <div>
      <div>메인화면</div>
      <div>메모장만들기</div>
      <SubMain name="react">리액트</SubMain>
    </div>
  );
};

const subMain = (props) => {
  const { name, children } = props;
  return (
    <div>
      <div>react, {name}</div>
      <!-- react, react -->
      <div>props children의 값은 {children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};

subMain.defaultProps = {
  name: "dust",
  // Main 인라인에 name이 없으면 dust가 출력됨
};

 

 

더 간편하게

const subMain = ({ name, children }) => {
  return (
    <div>
      <div>react, {name}</div>
      <!-- Main에 인라인이 없을경우 dust, 있을경우 react -->
      <div>props children의 값은 {children}</div>
      <!-- props children의 값은 리액트 -->
    </div>
  );
};