React 기록

npx create-react-app "repo name" > 리액트 설치 후 필요한 기본 요소를 알아서 만들어줌

App.js 기준

JSX 는 하나의 tag 만 return 할 수 있어 div 나 <></> 로 묶어야함

js 의 파일명은 대문자 시작으로

react-router-dom v6 기준

• <BrowserRouter>
    <Routes>
      <Route path = "" element {</>}> </Route> ``` 

HTML 에서는 class = "" 를 사용하지만 여기선 className = "" 이라 사용

<tr key = {word.id}> > 이런식으로 key 값을 정해줄 수 있음

useParams() >

• ex) ...URL/user/1 → user는 pathname, 1은 parameter
• 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다

a href 와 다른<Link to = {}></Link> 사용

• 리액트 라우터에서 페이지 이동할 때는 Link 컴포넌트를 사용하면 내가 이동하고자 하는 경로(URL)로 이동할 수 있다

Route path 에 "/day/:day" 를 지정하여 param 넘겨줄 수 있음
path = "*" 의 경우는, 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리하는 경우다

npm install -g json-server

• json-server --watch ./src/db/data.json --port 3001

REST API

• Create :POST
• Read : GET
• Update : PUT
• Delete : DELETE

 useEffect(() =>{
     console.log()
  }, [count]) //count 일때만 실행 ((의존성))```
  - [count] 자리에 [] 넣으면 초기 한번만 실행

UseEffect 사용 -> API 호출

{word: w} > props 로 넘겨받은 변수를 w 로 변경함

useRef > current 속성을 가지고 있는 객체를 반환

• 인자로 넘어온 초기값을 current 속성에 할당
• 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않음, React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않음

useNavigate > 이동