혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
현재 URL에서 path parameter를 추출할 수 있는 메서드
react-router-dom
에서 제공하는 Hookimport { useParams } from 'react-router-dom';
let { userId } = useParams();
URL 경로를 변경해주는 hook
cf. 뒤로가기 기능도 구현할 수 있다. navigation(-1)
react-router-dom
에서 제공하는 Hookimport { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(이동할패스);
주의할 점
JOSN.stringify()
로 변환"Content-Type": "application/json"
추가Json으로 된 데이터 객체 파일로 REST API 서버를 대신하여 구축해주는 라이브러리
-> 요청 후 실제 해당 파일이 수정되어 데이터가 변경됨
테스트용
: 실제 서비스를 만들 때 서버를 구축하는 것 대신 사용하지는 말아야 한다.
id
key 자동생성
: key 속성을 추가하지 않아도 자동으로 생성되지만, 요청이 제대로 들어가지 않았을 경우에도 id속성만 추가될 수도 있으므로 주의한다.
npm으로 라이브러리 설치
npm i -g json-server
json 데이터 디렉토리에서 서버 실행
json-server --watch <파일명> --port <서버포트>
버튼의 type 속성의 기본값이 submit이므로, 버튼을 누르면 onSubmit 이벤트가 발생
<form onSubmit={handleSubmit}>
<label>내용</label>
<textarea
required
value={body}
onChange={(e) => setBody(e.target.value)}
placeholder="내용을 입력해주세요."
></textarea>
<button /* type="submit" 기본 */ >등록</button>
</form>
상태변경함수는 비동기적으로 처리
: 위에서 차례대로 처리되지 않고 이벤트 핸들러가 종료된 후에 갱신된다.
const [state, setState] = useState(false);
const handleLikeClick = () => {
console.log("1번", state);
setState(!state);
console.log("2번", state);
};
// 이벤트 처음 적용 될 때 : 1,2번 콘솔 동일하게 false
// 이벤트 두번째 적용 될 때 : 1,2번 콘솔 동일하게 true
// 이벤트 세번째 적용 될 때 : 1,2번 콘솔 동일하게 false
중복된 상태 갱신은 마지막 명령만 적용
const [count, setCount] = useState(1);
const handleCount = () => {
setCount(9);
setCount(3);
};
console.log(count); // 3
Chapter1. React 심화
Chapter1-1. Virtual DOM
Chapter1-2. React Diffing Algorithm
Chapter2. React Hooks
Chapter2-1. Compoenet와 Hook
Chapter2-1. useMemo
Chapter2-2. useCallback
Chpater2-3. Custom Hooks
Chapter3. React의 주목해야 할 기능
Chapter3-1. 코드 분할(Code Spliting)
Chapter3-2. React.lazy()와 Suspencse
과제 - React Hooks 적용하기
이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.
오늘 학습이 어려웠다면(0~15개)
오늘 학습이 수월했다면(15~20개)
추가적인 학습을 하고 싶다면(21~25개)
**