[리액트]navigate 와 Link 외

☑️navigate 란 ?

React Router에서 제공하는 기능으로, 사용자를 특정 경로로 이동시키는 데 사용

[예시1]
import {useNavigate} from 'react-router-dom';

const navigate = useNavigate();
<button className='detail-button' onClick={() => navigate(`/chicken-detail/${chicken.id}`)}>
  상세보기</button>
  [예시2]
  import {useNavigate} from 'react-router-dom';
  
  const navigate = useNavigate();
  
  axios.post("/")
  .then(response => {
   alert("답변이 등록되었습니다.")
   navigate("/AdminObo");
   
  [예시3]
  import {useNavigate} from 'react-router-dom';
  const navigate = useNavigate();
  
  if(isAdmin) {
  navigate('/AdminObo);
  }
  [예시4]
  import {useNavigate,useParams} fomr "react-router-dom";
  
  const navigate = useNavigate('');
  
  const navihandle = () => {
     navigate("/CustomerBoard");
  }
  <button className="bbt" onClick={navihandle}>돌아가기</button>
  [예시5]
  import {useNavigate} from 'react-router-dom';
  
  const navigate = useNavigate();
  
  axios.post("/")
  .then(response => {
    alert("글쓰기가 정상적으로 등록되었습니다");
    navigate('/customerBoard');
  }

 

☑️Link

리액트라우터에서 제공하는 페이지간 이동을 처리하는 기능

<Link>를 사용하면 페이지를 새로고침하지 않아도 애플리케이션 내에서 경로를 변경할 수 있다

import {Link} from 'react-router-dom';

<button className='detail-button'><Link to={`/chicken-detail/${chicken.id}`}>
 상세보기</Link></button>

 

☑️ CSS- transform

.chickenform-container button {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  /* hover에 적힌 배경색으로 몇초동안 변화할지 설정*/
  transition: background-color 0.1s , font-size 0.5s,font-weight 1s;
}
/*font-weight hover bold 1s 초 이후에 글자 굵기 변경*/
.chickenform-container button:hover {
  background-color: violet;
  font-size: 30px;
  font-weight: bold;
}

☑️ findById(id)  where id = "id" 

특정 값을 찾을 때 쓰는 기능

findById(Integer id); -> where 대신 find

만약에 where 이메일 = ' ' 비밀번호 = ' ' 로그인을 한다 => 레포지토리에 findByEmailPassword where절

[service]
//치킨메뉴 상세보기
public Chicken findById(Integer id) {
  return chickenRipository.findById(id)
          .orElseThrow(() -> new RuntimeException
                             ("일치하는 정보를 찾을수 없습니다"));
}
[컨트롤러]
@GetMapping("{id}")
public Chicken getChickenByid(@PathVariable("id) Integer id) {
   return chickenService.findById(id)
}