리액트 시작하기3 - 리액트 기초

리액트 기초1

react bootstrap에서 react전용 bootstrap 사용가능하다. 그 외 다른 css프레임워크도 많으니 필요하면 찾아보는 걸 추천한다.

Import & export

export default 문법

(data.js)
var name = 'Kim';
var name2 = 'Park';
export default name;
//여러개의 변수를 내보내고 싶다면
//export {name, name2};

App.js와 별개로 data.js 파일을 생성한다. 이 파일에서 중요한 변수를 export하고 싶을 땐 export default 변수명 으로 사용 가능하다.

• 변수명, 함수명, 자료형 전부 배출 가능하다.
• 파일마다 export default 라는 키워드는 하나만 사용가능하다.
• export deafult + import
• export{} + import

import 문법

App.js에서 data.js에서 배출한 변수를 사용하고 싶을 때

(App.js)
import name from './data.js';
//여러 개의 변수를 import하고 싶을 때
//import {name, name2} from './data.js';

...
let [stae, setState] = useState(name);

React Router

여러가지 페이지를 만들고 싶다면 라우터(설치 필요)를 이용해야 한다. (react-router-dom 참고)

설치 후 index.js 파일 셋팅

...
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals(); 

React 및 React-router 버전별로 다를 수 있다.

라우팅(페이지 이동 처리)

// (App.js)

...
import { Link, Route, Switch } from 'react-router-dom';

function App(){
    return (
        <div>
            ...
            <Route path="/"> 
                <div>Main page</div>
            </Route>
            <Route path="/detail">
                <div>Detail page</div>
                <!-- Detail 컴포넌트가 정의 되어 있는 경우 아래와 같이 표현도 가능하다 -->
                <Detail />
            </Route>
        </div>
  )
}

/으로 접속하면 'Main page'가, /detail로 접속하면 'Detail page'가 나온다. '/detail' 로 접속 시, 메인 페이지도 보여지는데, 리액트 라우터에서는 '/'가 포함되어있는 모든 페이지를 전부 보여준다.

<Route exact path="/">
    <div>Main page</div>
</Route>

로 처리하면 정확한 주소('/')일 때만 메인페이지를 보여준다.

링크(Link)

(App.js 파일)

function App(){
    return (
        <div>
            <Navbar>
                <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
                <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
            </Navbar> 
            ...
        </div>
    )
}

<Link></Link>태그로 감싸고 to속성을 이용하면, 페이지 이동 버튼이 완성된다.

<Link>태그 말고 코드 실행 중간에 페이지 이동을 원할 때는 useHistory()를 사용할 수 있다.

history 변수를 설정하여 해당 함수를 저장하고, history.goBack()과 같은 함수를 사용할 수 있다.

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

function Detail(){
    let history = useHistory();
    return (
        <div className="container">
            <button onClick={()=>{ history.goBack() }} className="btn btn-danger">뒤로가기</button>
            <button onClick={()=>{ history.push('/') }} className="btn btn-danger">메인 페이지 이동</button>
        </div>
    )
};

export default Detail 

Switch

link도, switch도 사용하기 전 import는 필수

<Switch>는 매치되는 <Route>를 전부 보여주지 말고 한번에 하나만 보여주는 기능이다.

//(App.js 파일)

function App(){
    return (
        <div>
          ...
            <Switch>
                <Route exact path="/">
                    <Main />
                </Route>
                <Route path="/detail">
                      <Detail/>
                </Route>
                <Route path="/:id"> <!-- /:id는 /뒤에 모든 문자가 오면 해당 Route로 이동시킴을 의미한다. --> 
                      <div>New Page</div>
                </Route>
              </Switch>
        </div>
      )
}

위에서 사용한 /:id 문법을 할용하여 상세페이지별 구성 가능하다.

//(App.js 파일)
<Route path="/detail/:id">
    <Detail detail={detail}/>
</Route>

//(Detail.js 파일)
import { useHistory, useParams } from 'react-router-dom';

function Detail (props){
    let { id } =    useParams();
    return(
        <div className="container">
            ...
            <p>{props.detail[id].title}</p>
            ...
        </div>
    )
}