[03] React - 문법02

Data 관리

(1) Props를 사용한 데이터 공유

컴포넌트안에 정의한 state는 해당 컴포넌트에서만 사용이 가능하다.
자식 컴포넌트에서 부모 컴포넌트의 값이 필요할 때 props를 사용하여 값을 전달할 수 있다.

import { useState } from "react"


    }
    return (
        <div>
            <div>
                {Show()}
            </div>
            <div>
                <SubTitle list={list} clickSub={clickSub}></SubTitle>
            </div>
        </div>
    )
}


function SubTitle(props){
    return (
        <dvi>
            <h2>제목 : {props.list[props.clickSub]}</h2>
        </dvi>
    )
}
export default Title

(2) Input 활용

import { useState } from "react"

function InputText(){
    let [input, setInput] = useState()
    return (
        <>
        <div>
            입력값 : {input}
        </div>
        <input type="text" onChange={(e)=> {
            setInput(e.target.value)
        }} />
        </>

        
    )
}
export default InputText    

---

파일 관리

(1) import

(App.js)
import Header from './component/header';

function App() {
  return (
    <div className="App">
      <Header></Header>
    </div>
  );
}

export default App;

(2) export

(Header.js)
function Header(){
    return (
        <div>
            Header
        </div> 
    )
}
export default Header  

또는

(Header.js)
export default Header(){
  return (
    <div>
    	Header
    </div>
    )
}

• export default와 export name의 차이는 이름이 있고 없고의 차이다.

---

Router

Routing이란 사용자가 요청한 URL에 맞는 페이지를 보여주는 것

(1) 설치

npm install react-router-dom
yarn add react-router-dom

(2) 종류

• BrowserRouter

1. HTML5를 지원하는 브라우저의 주소를 감지 한다.
2. 주소에 #이 붙지 않는다.
3. 동적인 페이지에 적합하다. (서버에 있는 데이터들을 스크립트에 의해 가공 처리 한 후 생성되어 전달되는 웹페이지)
4. 새로고침을 하면 경로를 찾지 못하는 경우가 있다.

• HashRouter

1. 해시 주소(http://mypage.com/#test)를 감지 한다.
2. 주소에 #이 붙는다.
3. 정적인 페이지에 적합하다.
4. 검색엔진에 잡히지 않는다.

(3) URL

1. URL Parameter
   <Route> 태그에서 : 문자를 같이 사용하면 url에 입력한 값을 컴포넌트에서 useParams를 사용하여 얻어올 수 있다.

해당 URL 파라미터를 얻어와 컴포넌트 적용

  (App.js)
import {Routes, Route} from 'react-router-dom'
import Detail from './component/detail';
import New from './component/New';
import Home from './component/Home';

function App() {
  return (
    <div className="App">
      <Routes>
          <Route exact path='/' element={<Home/>}/>
          <Route path='/detail' element={<Detail/>}/>
          <Route path='/New/:id' element={<New/>}/>
      </Routes>
    </div>
  );
}
export default App;

/detail/주소 뒤에 입력한 값을 id라는 이름의 파라미터로 New컴포넌트에 전달한다.
/New/:id를 통해 id를 useParams로 id값을 불러올 수 있다.

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

function New(){
    
    let {id} = useParams()

    return(
      <div>
        <h2>현재 New페이지의 파라미터는 {id} 입니다</h2>
      </div>
    )
  }
export default New;

Routes는 Switch가 네이밍이 변경됐다.
exact는 v6 버전이후로 사용 안해도 된다.(중첩 라우팅 element={<Home/>}을 통해 쉽게 개선됨)

(4) Link

<a>태그와 유사하다. href 대신 a를 통해서 해당위치로 url을 이동하게 된다.

import { Link } from 'react-router-dom';

function Home(){
    return(
        <>
      <div>
          메인 홈 페이지  
      </div>
      <div>
          <Link to="/detail">디테일 페이지 가기</Link>  
      </div>
        </>
    )
  }
export default Home;

a 태그 : 외부 프로젝트로 이동하는 경우
Link : 프로젝트 내에서 페이지 전환하는 경우

(5) useNavigate

import { useNavigate } from "react-router-dom";

function Login(){
    const navigate = useNavigate();

    const goToMain = ()=> {
        navigate('/Home')
    }


    return(
        <>
        <button onClick={goToMain}>로그인</button>
        </>
    )
}

export default Login;

Link : 클릭 시 바로 이동하는 로직 구현 시에 사용
ex) 메인 화면에서 상품 페이지 이동 시

useNavigate : 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우
ex) 회원가입 되어 있는 사용자 => Main Page
회원가입이 되어있지 않은 사용자 => SignUp Page