Dev of road

나는 SPA에서 어떻게 페이지 전환을 할까 궁굼했다. 

근데 라우터라는 것으로 가능하다고 한다.

알아보자.

https://reactrouter.com/

요기서 스타트를 해준다.

그다음 index.js에서

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이렇게 BrowserRouter을 설정해주면 된다. 

문법은 다음과 같다. 

  <Routes> 
   <Route path='/(페이지명)' element={html소스}/>
  </Routes>

엘리먼트에는 컴포넌트를 만들어서 쓰면 좋다 .

예를 들면 About이라는 컴포넌트를 만들었다고 생각하자

function About(){
  return(
  <div>
    회사 정보임
    <Outlet></Outlet>
  </div>
  )

,

<Route path='/about' element={<About/>}>

엘리먼트 태그를 넣게되면 이렇게 나온다.

중첩도 가능하다

about/member 이런식으로 중첩

       <Route path='/about' element={<About/>}> 
          <Route path='member' element={<div>맴버임</div>}/>
          <Route path='location' element={<About/>}/>
        </Route>

이렇게 맴버임이 나온다.

애플코딩이라는 렉쳐를 통해 공부를 하고있는데

리엑트에 대해서 알아가는게 점점 성장하는것이 보인다. 

useState, props 등등 배운것을 항상 정리하자.

1) State 만드는법 

JS같은 경우는 let 변수명 = '저장 내용'같은 경우로 저장했엇는데 

리엑트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다. 

const [fruit, setFruit] = useState({ color : "red", name : "apple" })

우선  import {useState} from 'react' 를 하고 

useFruit(저장할 내용)을 쓰면 된다. 

word자리에 state 이름은 자유롭게 작명 하면된다. 

1. 새로운 객체를 만들어서 setFruit 하는 방법

setFruit({ color:"red", name:"strawberry" })

2. fruit state를 이용하여 name만 변경하는 방법

setFruit({ ...fruit, name:"strawberry" })

3. prevState를 이용하여 이전 state 값을 사용하여 setState를 하는 방법

setFruit(prev => ({ ...prev, name:"strawberry" }))

2. Map 쓰는법 

모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다.

자바스크립트 기본함수 같은건데 용도를 알아봅시다. 

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.

저러면 진짜로 console.log(1) 3번 실행됨 

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
});

기능 2. 콜백함수에 파라미터 아무렇게나 작명하면

그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.

(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)

저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray)

기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다.

그리고 map() 쓴 자리에 남겨줍니다.

그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 하는군요 

newArray는 [20, 30, 40] 이 출력됩니다. 

JSX안에서 반복문을 생성하고 싶으면

리엑트 중괄호안에서 html 반복생성하고 싶다면 map을 써도 된다. 

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

map은 파라미터가 2개 까지 가능하다 

첫째 파라미터는 array안에 있던 자료

둘째 파라미터 i는 0부터 1씩 증가하는 정수를 나타냄

props 쓰는법

예를들어 모달을 띄우고 싶다면 

요론식으로 app안에 모달이 있다고 생각하자 컴포넌트를 먼저 만들어준다. 

자바의 상속같은 개념인데

 app -> modal쪽으로 스테이터스를 넘겨줄 수 있다. 

그방법은 다음과 같다. 

function app(){

	let [data, setData] = useState(0);
	
	<div>
    	<MODAL data={data }/>
    </div>
}

fucntion Modal(props){
	return(
    	<div>
        props.data
        </div>
    )
}

요론식으로 쓰면 data가 나온다.

부모 APP 

자식 Modal이다. 

자식 -> 부모 (x)

자식 -> 자식 (x)

안됨

https://moonseokhyun.github.io/

다만 들었당 읭..

 오늘은 블로그 컴포넌트를 만들어보겠다. 

컴포넌트 만드는 방법은 다음과 같다. 

1. function을 만들고

2. return()에 html을 써준다.

3. <함수명> </함수명> 을 써주면 끝난다. 

function Modal(){
    return(
      <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    )
}

이런 모달을 하나 만들었다.

      {
        // 조건식 ? 참일때 실행할 코드 : 거짓일 떄 실행할 코드 
        modal == true ? <Modal/> : null
      }

모달같은경우에는 평소에 안보여야 하니 

let [modal, setModal] = useState(false);

이런식으로 스테이터스를 만들어준다. 

리엑트를 공부할때 느꼇지만 신기했다. 

나는 제이쿼리로 HTML ID나 CLASS를 지목하고

display = none이나 

제이쿼리 hide() , show()

이런식으로 했는데 리엑트에서는 이런식으로 스위치 식으로 해야한다고 한다. 

파이선 독학 및 제목을 누르면

이렇게 나온다 !

지금 디비 연동 없는 리엑트 블로그 연습 중이다. 

오늘은 스테이트가 Array타입 일때 변경하는 법에 대해서 알아보자 

let [글제목, b] = useState(['남자 코트 추천','강남 맛집 추천' , '파이선독학']);

function s(){
  let copy = [...글제목]; //새로운 스테이트를 만들어 줘라.
  //기존 스테이트가 어레이나 오브젝트면 독립적 카피본을 만들어서 수정해야한다. 
  //왜 냐하면 copy과 글제목이 같기 때문에
  copy[0] = '여자코트 추천';
  console.log(copy == 글제목)
  b(copy);
}

<div className='list'>
        {/* 온클릭 안에는 항상 함수를 넣어야한다. */}
        <h4>{글제목[0]} <span onClick={likeUp}>👍</span> {like}
        <span onClick={s}> 추천</span>
        </h4> 
        <p>2월 17일 발행</p>
      </div>

추천 버튼을 누르면 여자코트변경으로 바뀌는 코드 이다. 

리엑트는 onclick={함수명}으로 onclick이 된다. 

함수를 우선 하나 만들어준다. 

그 뒤 Array를 카피할 변수하나를 만들어 준다. 

그리고 새로운 스테이터스를 만들기 위해 

...을 붙혀준다 .

...을 안 붙혀주면 글제목에 있는 변수가 그대로 불러와져 변경이 안된다. 

그리고 copy[0] 0번째 인덱스에 스트링타입으로 '여자코트 추천을 써준다.'

그리고 set글제목을 해주면 

추천을 누르면 변경된다. 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

// return안에는 병렬로 태그 2개 이상 기입 금지



// 자료 잠깐 저장할 떈 변수
let post = '강남우동 맛집';

// 자료 잠깐 저장할땐 스테이트 문법


function App() {
let [글제목, b] = useState(['여자 코트 추천','강남 맛집 추천' , '파이선독학']);
// let [logo, setLogo] = useState('ReactBlog'); 무언가 변경이 되는것만 useState 쓰는법


  return ( 
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{글제목[0]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

우선 기본 코드는 다음과 같다. 

APP.js라는 곳이 메인 html을 쓰는데 

return ( html  코드);

병렬로 2가지 이상 태그를 금지한다. 바로 에러남 . 

그리고

1) Class는 ClassName 으로 제공한다.

2) JSX에서 JSTL처럼 변수명을 하기가 편하다

ex) var name = '홍길동' 이 있다면

<p> 이름 : {name}</p>

이라고 하면

이름 : 홍길동 이라고 이름 이 저장된다. 

3) useState가 있다. 무언가 변경이 되는 것만 useState를 쓴다.

ex) logo 등 몇년에 한번 변경 되는건 변수선언을 한다. 

나중에 스프링부트 + 리엑트 한번 해봐야겠다.

ㄹㅇ 신세계다. 

저번에 JPA 부터 신세계 느끼는중..

1. 작업용 폴더를 하나 만들어 준다. 

2.

PowerShell 창을 연다. 

3. npx create-react-app [프로젝트명]

엔터를 해주면 파일이 막 다운로드 되면서 

이제 VSCODE에서 프로젝트를 연다 .

터미널에서 

npm Start를 쳐주면 완성