리액트 공부 [voca 앱 만들기 실습]

출처 : 코딩앙마 리액트 강좌

 

 

HTML - table 태그

<table>

<th>내용</th> : 표의 제목

<tr>내용</tr> : table row 행 만들기

<td>내용</td> : table data 셀 만들기

map()

컴포넌트를 반복하고 싶을 때 사용하는 함수

map 함수를 사용하여 반복되는 컴포넌트르 렌더링한다.

파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 새로운 배열을 생성한다.

key 설정하기

 

https://lktprogrammer.tistory.com/121

[React] 리액트 - 배열 내장 함수 map을 통한 Component 반복

 

리액트 라우터 돔 설치

npm install react-router-dom

 

Switch -> Routes

<Routes>

<Route exact path="/" element={<DayList/>}/>

<Route path="/day/:day" element={<Day/>}/>

<Route path="/create_word" element={<CreateWord/>}/>

<Route path="/create_day" element={<CreateDay/>}/>

<Route element={<EmptyPage/>}/>

</Routes>

 

 

json을 이용한 Restful API 만들기

json 서버 -> 프론트엔드 실습할 때 간단하게 사용 가능

 

*설치방법

npm install -g json-server

-> 오류 나면 앞에 sudo 사용하기 

 

*설치 후

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

입력

 

 

REST API

Create : POST

Read : GET

Update : PUT

Delete : DELETE

 

*1일치에 해당하는 단어 목록만 가져오기 (뒤에 query문으로 ?day=1 이라고 작성)

http://localhost:3001/words?day=1

 

*업데이트 사용하기

체크하고 새로고침해도 유지되도록 만들기 : PUT 메소드 사용

 

API 통신

fetch(주소)를 통해 promise 반환

'Content-type' 은 보내는 resource의 타입을 의미한다. 

 

useEffect

렌더링 될 때 상태값을 변경하고 싶을 때 사용

useEffect(첫번째 매개변수 = 함수, 두번째 매개변수 = 배열<이 때만 함수가 사용되도록 만들기>)

상태값과 무관하게 렌더링 직후 함수를 한번만 실행하고 싶을 때는 빈 배열 전달

 

useRef

useRef는 dom에 접근할 수 있게 해준다.

Ex) 스크롤 위치 확인, focus 주기

 

 

커스텀 훅

반복적인 작업을 해야해서 코드의 반복이 발생할 경우 커스텀 훅을 만들어서 사용한다.

개발자가 직접 만들 수 있음

useFetch.js

 

 

useNavigate

* useHistory -> useNavigate 로 변경되었음

 

[사용방법]

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

const navigate = useNavigate();

navigate('/home')

 

 

* Loading... 코드 넣은 후 실행 안되는 이유

-> json-server를 다시 실행해야한다 !! 위의 코드 다시 실행하면 잘 돌아간다 !

 

 

---

• 페이지 이동 버튼

 

<div className="page_button">

<Link to={`/day/${day-1}`} className="page_link">이전 페이지</Link>

<Link to={`/day/${parseInt(day)+1}`} className="page_link">다음 페이지</Link>

</div>

 

이전 페이지로 이동하는 코드는 day에 바로 -1을 해주어도 숫자로 잘 인식이 되지만,

다음 페이지로 이동하는 코드는 +1을 해주면 문자열의 형태로 뒤에 1111.. 이런식으로 계속 붙게 되었다. 따라서 int형으로 변환시켜주는 parseInt함수를 사용하였다.