Gravatar 링크
랜덤으로 아이콘(프로필, 썸네일 등)을 만들어주는 라이브러리
NPM 링크
라이브러리 검색 > 타이틀 옆 TS, DT등에따라 추가설치가 필요한 패키지가 존재함
1. TS : Typescript를 포함하고 있기때문에 @types를 따로 설치하지 않아도 됨
2. DT : Typescript를 포함하지 않기때문에 @types를 설치 해야함
StopPropagation 링크
Event의 버블링, 캡쳐링 단계에서 이벤트의 추가 전파를 방지함. 그러나 preventDefault와는 다르게 기본동작은 발생함 기본동작을 막으려면 preventDefault를 사용
리액트에서의 CSS작성 요령
큰 단위의 컴포넌트는 CSS in JS형태로 만들어두고 작은 단위의 CSS는 공통 파일로 관리
리액트에서 컴포넌트 내부에 인풋태그가 존재할때
컴포넌트 내부에 인풋태그가 존재하면 change이벤트가 매번 발생하기때문에 불필요한 리랜더링이 발생하여 컴포넌트를 분리하는것이 좋음.
리액트 타입스크립트 FC, VFC 차이점
FC: children이 있을때 사용
FC는 더이상 사용하지 않음 링크
1. children을 암시적으로 가지고있음 (안티패턴)
2. 제네릭을 지원하지 않음
3. 네임 스페이스 패턴을 이용할 때 더 불편함
4. FC를 이용하여 코드가 더 길어짐
VFC: children이 없을때 사용
에러가 발생했을 때 대처
개발자라면 개발자 도구를 사용하여 에러를 확인할 수 있지만 개발자도구를 사용하지 않는 사용자의 경우에는 확인할 수 없기때문에 UI적으로 표시를 해주는것이 좋음
- react-toastify 등 라이브러리 사용
계층구조의 라우터는 파라미터 형태로 제공
- 파라미터를 데이터용도로 사용할 수 있다
ex) <Route path="/주소1/:동적주소1/주소2/:동적주소2" />
잘하는것보다 꾸준히하는게 더 중요하다