React input event, router-dom

가장 기본인 이벤트와 함께 돌아왔다.

[인풋, set인풋] = useState('');

<input type="text" onChange={(event) => {
        set인풋(event.target.value);
      }} />

input 태그에 onMouseOver, onClick, onChange 등 이벤트 핸들러에 들어가는 함수에
파라미터를 추가하면 이벤트 객체를 불러와서 값을 받아 미리 선언해둔 스테이트에 넣어 저장할 수 있다.

• event.target은 현재 이벤트가 발생한 곳을 알려주고,

• event.prevendDefault()는 이벤트 고유의 기본동작을 예방해주고,

• event.stopPropagation()은 자손에서 일어난 이벤트가 부모에게 퍼지는 이벤트 버블링을 막아준다.

*state 변경함수 특징 때문에 input 태그에 값을 입력했을때 느리거나 밀리게 처리되는 경우가 있다. 비동기로 우선순위가 밀려 쳐리가 되기 때문이라고 한다.

이는 추후에 useEffect()로 보완할 것 같다. 킄킄

• unshift(입력값) = array 맨 앞에 자료를 추가하는 메서드.
• splice(index, 삭제할 길이) = array 원하는 index 부터 삭제할 길이를 정해 삭제.

별안간 리액트 이미지 삽입방법

In CSS
background-image : url('./이미지명.확장자명');

In HTML
import 흠냐흠냐하고싶은이름 from './이미지명.확장자명'
<아무태그 style={{ backgroundImage : 'url(' + 흠냐흠냐하고싶은이름 + ')' }></아무태그>
	or
<아무태그 style={{ backgroundImage: `url(${흠냐흠냐하고싶은이름})` }}></아무태그> //백틱 `` 사용

In Public 폴더 언제? 배포시 public 폴더는 건드리지 않아 편하게 업로드 가능 (백틱조아)
<아무태크 src={`${process.env.PUBLIC_URL} /이미지명.확장자명`}" />

별안간 데이터 바인딩 객체, 배열 import export

대충
배열은 인덱스와 값,
객체는 키와 값 으로 이루어져있다.

배열속객체 = [
	{
    	키 : '값'
    },
    {
    	이름 : '숫자 등 다가능'
    },
];
배열속객체[인덱스].키 = 값;

• 내보낼 변수 한개 = export default 변수

• 보낼 변수 여러개 = export {변수1, 변수2}

• 받을 변수 한개 = import 변수 from 파일명

• 받을 변수 여러개 = import {변수1, 변수2} from 파일명

react-router-dom

npm install react-router-dom

import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
        <App />
</BrowserRouter>

인스톨 후 index.js 에서 App을 감싸주면 준비 끝.

import { Routes, Route } from 'react-router-dom'

<Routes>
      <Route path="/" element={ <Main /> } /> //기본화면
      <Route path="/about" element={ <About /> } /> //서브페이지
      <Route path="*" element={ <div>404 에러페이지</div> } />
</Routes>

App.js에서 사용자들이 볼 View 요소들을 컴포넌트화 한 후 Routes 태그 안에 Route 태그 들로 UI 페이지들을 나누어준다.

path에 각 페이지에 맞는 restful API를 준수한 이름들을 넣어주고 element에 해당 주소가 url에 보일때 노출시킬 요소를 넣어준다.

import { Link, useNavigate } from 'react-router-dom'

function Gnb(){
  let navigate = useNavigate()
  return (
    <Link to="/">홈</Link>
	<Link to="/about">우리덜얘기좀들어보소</Link>
    <button onClick={()=>{ navigate('/원하는주소') }}>이동 버튼</button>
  )
}

페이지 이동 방법은 Link와 navigate가 있다.

• naviagate(-1) 뒤로가기
• naviagate(1) 앞으로가기 도 가능하다.

route 속 route인 nested routes와 outlet도 있다...

useParams

데이터형식
let 일일일강 = [
	{
    	id : 0,
        title : '일일일강',
        date : '08/29'
    },
    {
    	id : 1,
        title : '일1일강',
        date : '08/28'
    },
]

<Route path="/contents/:id" element={ <React 일일일강={일일일강} /> }/>

import { useParams } from 'react-router-dom'

function React(props){

  let { id } = useParams();
  let 찾은컨텐츠 = props.일일일강.filter(
  	(data)=> data.id == id
  );

  return (
    <div>
		<h4>찾은컨텐츠[0].title</h4>
  	</div>  
  )
};

export default React

자 데이터 형식은 다음과 같고,
루트에 적어준 경로 /:id(파라미터) 이 부분에 입력된 값과 컨텐츠 고유 아이디를 일치시켜주는 작업이다.

링크로 페이지 이동시 각 컨텐츠에 맞는 고유아이디를 url 파라미터로 전송하고

React라고 적어논 컴포넌트 하나로 링크로 이동한 값을 useParams로 가져와 데이터에 있는
고유 아이디와 비교 후 그에 맞는 데이터를 출력해준다.

filter 메서드와 find 메서드 둘다 사용 가능한데. filter는 새로운 배열을 만들어 반환 해준다.