[리액트]react-router-dom, array&map

✅ Router 란?

리액트에서 라우터는 웹사이트에서 페이지를 이동하게 해주는 "길 안내표" 같은 역할을 한다.

마치 마을에서 이집 저집을 방문하듯이 웹사이트의 여러페이지를 클릭하는 링크나 버튼들을 통해 쉽게 이동 할 수 있다.

 

- 우선 라이터는 터미널에서  해당 주소로 설치해 준다. >npm install react-router-dom 

 

✔️ tutorial-route 진행

[Home.js]

import React from "react";

function Home() {
  return (
    <>
    <h1>홈페이지 메인입니다.</h1>
    
    </>
  )
}
export default Home;

[About.js]

import React from "react";

function About() {
   return (
    <>
       <h1>소개 페이지입니다.</h1>
       
    </>
   )
}

export default About;

[Contect.js]

import React from "react";

function Contect() {
  return (
    <>
    <h1>회사 연락처</h1>
    <p>문의 사항이 있으면 아래 연락처로 연락 해주세요.</p>
    </>
  )
}
export default Contect;

[Navbar.js]

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
       <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/Contect">Contect</Link></li>
       </ul>
    </nav>
  )
}
export default Navbar;

▶Navbar에서 "react-router-dom"을 import해준다.

    HTML에서는 <a href='/'>Home</a>를 작성하지만 React에서는 <Link to='/'>Home</Link>작성한다

    즉 a 가 Link와 같고  href가 to 와 같다!!!

 

위와 같이 작성 했으면 App.js에 아래와 같이 작성해준다.

import { Route,Route } from "react-router-dom";
import Home from "./component/Home";
import About from "./component/About";
import Navbar from "./component/Navbar";
import Contect from "./component/Contect";

function App() {
   return  (
     <div>
       <Navbar  />
       <Routes>
       
     <Route path="/" element={<Home/>}></Route>
        <Route path="about" element={<About />} />
        <Route path="contect" element={<Contect />} />
        </Routes>
    </div>
  );
}

export default App;

 

▶ Routes, Route import 해서 링크 설정한다.

Java에서 @GetMapping('/')으로 주소를 설정해 주는 것이 React에서 path='/' 이다.

Java에서 return "html파일명"으로 보여줄 화면 설정해주는 것이 React에서 element={<Home/> 이다.

 

▶ 위와 같이 작성 되었으며 이제 터미널에서 실행해준다

실행해야 하는데 아래와 같이 react-workspace일 경우에는

 

- cd t 작성후 tap키를 누른다 그럼 경로 내 포함되고 이제 npm start 를 진행한다!

앗 그런데 아래와 같이 실행이 안된다!!

 

생각해보니 수업시간에 무건운 녀석 node_modules를 삭제 해줘서 위와 같이 실행할 수 없었다.

이럴경우 명령어 npm i 를 입력한다. npm은 노드 패키지 메니저인데 요것이 다시 복원시켜 주는 것이다!

 

npm i 로 복원시켜 준 후 npm start를 하니 아래와 같이 짜잔 실행 되었다

[터미널 코드]

 

[실행된 화면]

 

✅ array 와 map 

react를 공부하며 자바에서 배웠던 array와 map은 계속 된다!!! 간만에 정리를 해본다~

✔️Array

배열은 1개의 변수에 여러개의 값을 순차적으로 저장할 때 사용한다. 즉 여러개의 값을 하나로 묶어서 저장하는 방법

배열을 사용하는 이유는 여러 개의 데이터를 하나의 배열에 넣어 정리하기 쉽기 때문에 사용하며 배열에 들어 있는 

데이터는 순서대로 저장되기 때문에, 몇 번째에 있는지 쉽게 찾을 수 있다.

배열에 넣는 데이터는 순서가 있는데 inde(0)   마지막 숫자(마지막 숫자 -1); 이런 식으로 차례대로 번호가 매겨진다.

또한 배열에 넣는 데이터는 같은 종류로 숫자배열이면 모두 숫자, 문자배열이면 모두 글자이다

✓배열의 특징

 - 배열은 같은 타입의 데이터만 저장할 수 있다

- 한번 생성된 배열은 길이를 늘리거나 줄일 수 없다.

[ 배열의 선언과 생성방법]

int[] numbers = new int[5];
numbers 에는 숫자 5개를 넣을 수 있는 공간이 생성되어 0부터 4를 벗어난 자리에 숫자를 넣으면 오류가 남

 

[for 문을 활용한 배열 출력]

public void practice(){
            int number[] = new int[10];
            System.out.println("최대길이 : " +numbers.lenght);
            
            for(int i = 0; i<numbers.lingth; i++){
                    number[i] = i+1;
                    System.out.println("numbers["+i+"]="+numbers[i]);

 

✔️Map

- 맵(Map)은 키(key)와 값(value) 쌍으로 데이터를 저장하는 구조로 어떤 정보를 다른 정보와 짝지어서 저장하는 방식이다.

- Map은 키를 통해 값을 빠르게 찾을 수 있다. 어떤 키가 있는지 알면 그에 해당하는 값을 바로 찾는다.

- 키와 값을 짝지어 저장한다. 서로 관련된 데이터를 한쌍으로 묶어 저장하기 좋음

- Map의 특징은 키와 값은 항상 쌍으로 저장되며 키(key)는 중복저장 허용이 안되지만 (set방식) 값(value)은

  중복저장 가능하다.(list 방식)

- 키를 통해 값을 빠르게 찾을 수 있다.

- 숫자, 문자, 리스트 등 어떤 데이터도 값으로 저장할 수 있어 유연한 데이터 구조를 가지고 있다.

- 즉 맵은 키와 값 쌍으로 데이터를 저장하는 구조로 키를 통해 값을 빠르게 찾을 수 있고,

  데이터를 유연하게 관리할 수 있다.

public class MapEx {
       public static void main(String[] args) {
       //Map 생성
       Map<String, Integer> student = new HashMap<>();
       // put 을 활용해서 값 추가하기
       student.put("철수",90);
       student.put("영희",85);
       student.put("민수",88);
       //전체보기
       System.out.println(student)
       //remove 사용해서 삭제하기
       student.remove("영희");
       
       //키는 유일해야하며 키의 값은 중복이 될수 없음, 맨 마지막 값으로 덮어씌어짐

 

[Map 정리]

Map : 특정 키를 입력하면 해당되는 값을 얻을 수 있는 Collection 객체
키 = key (=열쇠)
값 = value(=값어치가 있는 것)

key:value 값으로 구성

메서드
put(key, value)   : 지정된 키와, 지정된 값의 쌍을 추가

get(key)   : 지정된 키에 저장된 값을 보여줌

containsKey(key)  : 지정된 키가 존재하는지 확인
containsValue(value) : 지정된 값이 존재하는지 확인
remove(key)  : 지정된 키와 키에 저장된 값을 제거
keySet()  : 키를 포함하는 집합을 반환
values()  : 모든 값들을 포함하는 컬렉션 반환
entrySet()  : 모든 키-쌍을 포함하는 집합을 반환

1.[put(key, value)   : 지정된 키와, 지정된 값의 쌍을 추가]
public void practice2() {
		//									<> 자료형 넣어도 되고 안 넣어도 됨
		Map<String,String> map = new HashMap<String,String>();
		// map.put 을 활용해서  
		map.put("학원", "서울시 강남구"); 
		map.put("등산", "서울시 관악구"); 
		map.put("롯데타워", "서울시-송파구");
		
		// 전체출력 
		System.out.println(map);
2.[특정 값이 존재하는지 확인]
Map<String, Integer> map = new HashMap<>();
		map.put("사과"  , 100);
		map.put("바나나", 200);
		map.put("체리"  , 300);
        // 200원짜리 과일이 존재하는가 ?
		System.out.println("200원 과일이 존재하는가? : " +  map.containsValue(200));
        //containsValue 와 containsKey 모두  true false 값으로 보여짐
        // 체리 과일이 존재하는가 ?
		System.out.println("체리가 있나요? : " + map.containsKey("체리") );
		
		//크기 조회
		System.out.println("현재 map의 크기 : " + map.size());
3.[put을 이용해서 추가]
 Map<Integer,String> map = new HashMap<>();
 map.put(1,"에그마요");
		map.put(2,"로티세리바베큐");
		map.put(3,"스테이크앤치즈");
		map.put(4,"스파이시쉬림프");
 [get을 이용해서 3번에 뭐가 들어있는지 확인]
 System.out.println(map.get(3));
 - remove 활용해서 4번을 지워줌
 map.remove(4);
 System.out.println(map);
 -isEmpty() map이 비어있는지 확인
 System.out.println(map.isEmpty()); //비어있지 않기 때문에 false
 [keySet()을 이용해서 for-each 모두 보기]
 for(int num : map.keySet()) {
     String 메뉴이름 = map.get(num);
     System.out.println(메뉴이름);
     }
  [Map.Entry 키-값을 동시에 가져오는 방법 뒤에는 변수명.entrySet()
  for(Map.Entry<Integer,String> e : map.entrySet()) {
       System.out.printle(e.getKey() + "-" + e.getValue());
      }
  [최종삭제]
  map.clear();
  }