[React.js] 사용해 보면서 정리한 Tip 1

03 May 2023 front

  • 리액트를 처음 사용하면서 이건 어떻게쓰지? 하고 검색했던 내용들을 정리한 글 입니다.

다중 className 사용하기

  • 리터럴 사용하기 ```jsx

<div className={${style.class1} ${style.class2}}> 리터럴을 사용하여 여러개 선언!</div>


- array 로 선언해서 사용하기
```jsx
<div className={[style.class1 , style.class2].join(' ')}>Array로 선언하기</div>

Router v6 에서 location state 사용하는 법

<Link to={`/home`} state= >
   Home Link
</Link>

import { useLocation } from "react-router-dom"

const Home = () => {
    const location = useLocation();
    return (
        <div className="detail">
            {location.state.header} //home 
        </div>
    )
}

(추가) location 관련

  • hash : # 뒤 데이터
  • pathname : 현재 경로
  • search : ?를 포함한 QueryString
  • state : 상태 값
  • key : location 의 고유 값

onClick parameter 전달하는 방법


const clickHandler = (param1, param2, e) => {
  console.log(param1, param2); 
  e.preventDefault();
}

return (
	<button onClick={(e)=>{clickHandler('1', '2', e)}}> Button Event!</button>
)

참고 페이지

  • https://sophiecial.tistory.com/32

Related Posts