Dust

function App() {
  let state = useSelector((state) => {return state.headerMenu});
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      {state && <Modal/>}
      <Header/>
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/react-portfolio/*" element={<Index />} />
      </Routes>
      <Footer/>
    </BrowserRouter>
  );
}
export default App;

 basename={process.env.PUBLIC_URL}

라고 써도 자꾸 기본이름이 안맞다고 해서 도대체 뭐가 문제야~~~ 하고 시간 좀 날렸는데..

로컬에서만 계속 보고 뒤에 주소를 안붙이고 확인해서 그랬다.. 머쓱..

쉬운거였네..

밑에 글들을 참고 했었음!

https://uiyoji-journal.tistory.com/88

https://bum-developer.tistory.com/entry/React-gh-pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%9C-%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-router%EB%A5%BC-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B8%EC%8B%9D-%EB%AA%BB%ED%95%B4%EC%9A%94

https://medium.com/@_diana_lee/react-react-router-%EC%A0%81%EC%9A%A9%ED%95%9C-react-%EC%95%B1%EC%9D%84-github-pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B2%95-5f6119c6a5d9

포트폴리오 헤더 만들면서 생긴 문제,,

Link 안에 span태그로 다크모드를 만들었더니 다크모드 클릭 할 때마다 홈으로 가는 현상 발생

이벤트 버블링 막는 메소드가 e.stopPropagation() 만 있는 줄 알고 왜 안되지 ? 고민만 하다가 검색해보니

form submit 버튼 클릭시 막아주는 메소드(e.preventDefault)를 써도 이벤트 버블링을 막을 수 있다는 걸 발견 

e.stopPropagation 안되면 e.preventDefault 써보기

차이가 뭔지 찾아봐야겠다

<header>
    <div>
        <Link to={'/'}><h1 className="logo">Dust
            <span className="dark-mode" onClick={(e) => {
                // e.stopPropagation();
                e.preventDefault();
                const click = e.currentTarget;
                if(click === e.currentTarget){
                    root.classList.toggle('dark');
                    setDark(!dark);
                }
            }}>{dark ? '🌜모드' : '🌞모드'}</span></h1>
        </Link>
        <ul>
            <li><Link to={'/todolist'}>TodoList</Link></li>
            <li><Link to={'/shop'}>shop</Link></li>
            <li><Link to={'/board'}>Board</Link></li>
            <li><a href="#">Github</a></li>
        </ul>
        <div id="mobile-menu" onClick={() => {
            dispatch(modalOpen(true));
        }}>Menu</div>   
    </div>
</header>

웹서버에서 리액트를 가져다 쓰고 싶을 때

웹 서버란 -> 유저가 웹 문서를 요청했을 때 웹 문서를 보내주는 것
서버 -> 유저가 데이터 요청했을 때 데이터 보내주는 것
등.. 데이터 주는 곳이라고 생각하면 됨

리액트란 html을 예쁘게 만들어주는 툴

리액트연동
예를 들어,
유저가 내가 만든 포트폴리오 주소를 주소창에 침

유저 : 서버야 주소 입력 했으니 주소 html 줘
서버 : 리액트로 만든 html 파일 보내줌

서버 만드는 법
- node.js 검색해서 설치
- 작업 폴더 만들고 에디터로 오픈
- server.js 만들어서 코드 붙여넣기

// server.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, function(){
	console.log('listening on 8080');
});

- 터미널 열어서 npm init -y (default 값으로 설정된 package.js 를 만듬, y..? —> Yes)
- npm install express

이러면 서버가 만들어짐
리액트 프로젝트 열어서 빌드 함 --> 빌드하는 법 (npm run build)
https://min-ji07.tistory.com/entry/Github-github%EC%97%90-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%98%AC%EB%A6%AC%EA%B8%B0

빌드 폴더 생성하면 서버에서 가져다 쓸 수 있음
리액트 프로젝트를 서버 프로젝트 안에 넣음(node_modules) 파일과 같이 있으면 됨
누가 메인 페이지를 접속 했을 때 내가 만든 index.html 파일을 보여주고 싶을 때 입력 코드

메인 페이지 접속했을 때 초록색으로 보이는 파일 보여주세요

// server.js 파일 밑에 입력해주면 됨
app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, '리액트로 만든 html 파일 경로(index.html)'));
    					// react-project/build/index.html 
});

저렇게 코드를 짜주고 해당 코드 위에 아래 코드를 추가해줌
해당 폴더 안에 있는 static 코드를 가져다 쓰겠다는 뜻임

app.use(express.static(path.join(__dirname, 'react-project/build')));

리액트 라우터 사용시 추가 해 줄 코드
최하단 작성

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

유저가 주소창에 없는 경로를 입력했을 때 index 페이지로 이동


디비에 있던 데이터를 리액트에서 보여주고 싶을 때
서버에서 디비 데이터를 뽑아 그대로 프론트엔드로 보냄

유저가 상품 페이지 접속했을 때 데이터 베이스에 있던 상품을 보여주려면

app.use(express.json());
// 유저가 보낸 array/object 데이터 출력할 때 필요
let cors = require('cors');
// cors 사용시 npm install cors 입력
app.use(cors());
// cors는 다른 도메인주소끼리 ajax 요청 주고 받을 때 필요함
// 해당 코드 추가해야 ajax 잘 된다고 함

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
    // 서버 /product 주소에 데이터 요청함
    // 리액트는 해당 주소에 GET 요청 하면 됨
});

완성 된 server.js 파일

// server.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, function(){
	console.log('listening on 8080');
});

app.use(express.json());
let cors = require('cors');
app.use(cors());

app.use(express.static(path.join(__dirname, 'react-project/build')));

app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html '));
});

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
});

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

작성 후 서버 실행 코드 입력

node server.js
localhost:8080에서 서버 확인

에러 검색하다 찾았는데 참고 할 것!

https://xiubindev.tistory.com/115

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState('');
  const onChange = (e) => { 
    setText(e.target.value);
    // 입력할 때 마다 setText의 값 변경
  };
  const onReset = () => {
    setText('');
    // 값 초기화
  };
  return(
    <div>
      <input placeholder="값을 입력하세요." onChange={onChange} value={text} />
      <!-- 값이 변경될 때 마다 text의 값을 불러옴 -->
      <button onClick={onReset}>초기화</button>
      <!-- 클릭시 값 초기화 -->
      <div> 값 : </div>
    </div>
  )
};

input 여러개일 때

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState({
    name: '',
    nickname: ''
  });
  
  const { name, nickname } = inputs; 
  // 비구조화 할당으로 값 추출
  
  const onChange = (e) => { 
    const { value, name } = e.target;
    // e.target 에서 name, value 값 추출 
    // 객체 수정 -->
    setInputs({
      ...inputs, // input 객체 복사 
      [name]: value // name 키를 가진 value로 설정 
    });
  };
  
  const onReset = () => {
    setText({
      name: '',
      nickname: '',
    });
  };
  return(
    <div>
      <input placeholder="이름" onChange={onChange} value={name} />
      <input placeholder="닉네임" onChange={onChange} value={nickname} />
      
      <button onClick={onReset}>초기화</button>
      
      <div> 값 : </div>
    </div>
  )
};

부모 컴포넌트에서 내려준 값을 자식 컴포넌트에서 사용하는 것을 의미

컴포넌트에서 다른 컴포넌트로 데이터 전달(props 전달)

전달기능(함수)는 부모 컴포넌트에서 구현 부모->자식에게 전달(형제 컴포넌트는 서로 props를 전달할 수 없다)

자식 컴포넌트에서 부모 컴포넌트로 콜백 함수를 사용하여 props를 전달할 수 있음

부모 -> 자식에게 전달

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child money={1000}/>
      <!-- money로 props의 속성을 지정 후 값 1000을 할당 -->
    </div>
  );
};

<!-- 자식 -->
import React from 'react';

const Child = (props) => {
          <!-- money -->
  return(
    <div>
      <p>{props.money}</p>
      <!-- props 속성에 접근하기 위해 props.money 사용 -->
    </div>
  );
};

자식 -> 부모에게 전달

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  function Click(money){
    alert(money);
  };
  // 부모에서 함수 구현 
  return(
    <div>
      <Child money={1000} Click={click} />
    </div>
  );
};

<!-- 자식 -->
impore React from 'react';

const Child = (props) => {
  return(
    <div>
      <button onClick={() => {
        props.Click(props.money);
        }};
      >
        값 전달
      </button>
    </div>
  );
};

부모 컴포넌트에서 전달하는 props 값이 없을 때

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child />
    </div>
  );
};

<!-- 자식 -->
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
      <!-- ? 값이 없을경우 -->
    </div>
  );
};

부모 컴포넌트에서 props를 전달하지 않을 경우 기본값을 설정

기본 값은 컴포넌트 밖에, 자식 컴포넌트 안에서 선언해준다

// 자식 컴포넌트
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
    </div>
  );
};
// 기본 값 설정 !
Child.defaultProps = {
  money: 10000
}


// 기본 값의 propTypes 설정
// 설정한 type과 다를 경우 콘솔창에 오류 발생
// import PropTypes from "prop-types"; 해줘야함
// isRequired - 필수 입력

Child.defaultProps = {
  name: PropTypes.string.isRequired,
  children: PropTypes.number
};

++

// 자식 컴포넌트
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
    </div>
  );
};

const Child = (props) => {}
// 요즘에는 이렇게 안하고
const Child = ({ name, color, subject = "먼지" }: Child) => {}
// 이런식으로 많이 사용한다고 함

사용 예시

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child name="dust" color="black" subject="먼지" />
      <Child name="berry" color="red" subject="빨강" />
      <Child />
    </div>
  );
};

// 
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p style={{ color: props.color }}>{props.name}는 {props.subject}(이)야</p>
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}

결과

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child name="dust" color="black" subject="먼지" />
      <Child name="berry" color="red" subject="빨강" />
      <Child />
    </div>
  );
};

// 
import React from 'react';

////////////// 변경된 부분 ////////////////////////
const Child = ({ name, color, subject }) => {
  return(
    <div>
      //////////// props. 를 제외하고 변수명만 적어줌
      <p style={{ color: color }}>{name}는 {subject}(이)야</p>
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}

또는 이런식으로 변경할 수 있다

props.children

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child>먼지</Child>
    </div>
  );
};

// 
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.name}는 {props.children}(이)야</p>
      <!-- dust는 먼지야 -->
      <!-- default 값은 밑에서 가져오고 children 값은 태그 내에 있는 값을 가져옴 -->
    </div>
  );
};

Child.defaultProps = {
  name: 'dust'
}

사용 예시

import React from 'react';
import Child from './Child';
import Hello from './Hello';

const Parent = () => {
  return(
    <div>
      <Child>
      	<p>먼지</p>
        <Hello color="pink" />
      </Child>
    </div>
  );
};

<!-- -->
import React from 'react';

const Child = ({ name="dust", children }) => {
  return(
    <div>
      <p>{name}는 {children}</p>
      <!-- 
        dust는 먼지 
        안녕하세요! 
        / 출력 
      -->
    </div>
  );
};

const Hello({ color }) => {
  return <div style={{ color }}> 안녕하세요!(분홍색) </div>
}

여러개의 props

const Parent = () => {
  const dust = { 
    name: 'dust',
    color: 'black',
    subject: '먼지'
  };
  <!-- const { name, color, subject } = dust; 생략가능 -->
  
  const dust2 = { 
    name: 'dust2',
    color: 'white',
    subject: '먼지2'
  };
  // 이렇게도 쓸 수 있는지? 
  <!-- const { name, color, subject } = dust2; 생략가능 -->
  
  return(
    <div>
      <Child {...dust} />
      // 속성값 전부 불러오기
      <Child {...dust2}/>
    </div>
  );
};

//////////////////////////////////////

const Child = ({ color, name, subject }) => {
  return( 
    <div>
      <p style={{ color }}>{name}는 {subject}(이)야</p>
      <!-- 
        변수명은 달라야하기 때문에 이렇게 사용은 불가능 함 
        한줄에 dust, dust2를 같이 불러오기x
        그렇게 하고 싶을경우 배열로 넘기거나 아니면 변수명이 달라야함
      -->
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}