타코따코의 1인 개발 스튜디오

onClick={handlePrevious} :- 주소를 전달, 콜백에서 전달하는 파라미터가 있다면 이것 역시 해당 함수에 전달된다. 다만 여기서는 생략이 된다. onClick={()=>handlePrevious(파라미터)} :- 파라미터 전달을 보다 명시적으로 표현한다. onClick={handlePrevious()} :- 직접호출, 랜더링/클릭 시에도 호출- 클릭했을때 호출해야하는데, 랜더링시에도 함수를 발동시키므로 의도치 않은 결과를 초래- 위 3가지 중 ()를 바로 호출하는 방식은 금지

버튼 클릭 → Document의 ‘root’에 이벤트 객체 생성 (누른 버튼에 생성이 아닌 최상단에 생성)document root에서 실제 이벤트 벌어진 곳까지 이동(캡쳐링)실제 이벤트 발생 → document root까지 이동 (버블링)onClick A안에 onClick B이 있는 경우, B호출 후 A호출한다. 이를 막기 위해서 A 호출 시점에 e.stopPropagation();를 사용 → 버블링 중단.  document.addEventListener("click", handleClick, listenCapturing);3번째를 명시하지 않으면 기본적으로 버블링으로 유지한다.   각 태그마다 div.addEventListener 처럼 가능하다. 기본적으로 버블링이고, 캡쳐링은 잘 안쓴다. [버블링의 ..

if (movie === undefined) return; 를 useEffect 호출보다 먼저 사용하게 된다면,movie에 값에 따라 useEffect가 호출되고 안되고 버전이 두개로 나뉘므로, 리액트에서 인식 불가 에러  if (movie === undefined) return; // useEffect 호출 전 해당 함수 종료 useEffect(() => { setIsLoading(true); const fetchMovieDetail = async () => { const result = await movieRepository.fetchMovieDetail(movie.imdbID); setIsLoading(false); }; fetchMovieDetai..

비구조할당 arg로 파싱할때 사용function FoundMovieCount({ count }: { count: number }){return } 인자로 받는게 헷갈리므로 정리하기  {}로 받는 이유는 객체를 받을때. type으로 따로 지정했기 때문에 {}로 쓴다.{}를 통해 필요한 것만 가져오는 구조분해를 하는 것이다.  type으로 따로 props를 만드는 이유는들어오는 데이터가 하나가 아니라 여러개인 경우 깔끔해지기 때문임. type MovieListProps = { movies: Movie[]; // movies라는 속성이 Movie 배열 타입임을 지정};export default function MovieList({ movies }: MovieListProps) { return movies...

Render Props 패턴ui는 외부에서 받으므로 계속 달라질 수 있음.로직은 내부로직을 callback으로 반환해서 ui는 다르나 같은 로직을 쓰고 있음.재사용성을 높이기 위한 패턴임.import React, { useState } from 'react';// 로직만 포함하는 Counter 컴포넌트function Counter({ children }) { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); return children(count, increment); // 상태와 로직만 전달}// 재사용할 로직을 사용하는 App 컴포넌트function App() { return ( ..

react dev tools 설치 → components, profiler tab디버깅툴 : react dev tool : chrome, npm i redux-devtools-extension → composeWithdevTools → 크롬 개발자 도구 → redux (state action 디버깅을 쉽게 가능)profiler : 랜더링, 리랜더링 분석 가능setting → profiler → record → 클릭 → 녹화 멈춤회색요소 → 랜더링 되지 않은 요소노란색이 많을 수록 오래 걸린다.why did this render로 볼 수 있다. 번들 사이즈 줄이기 → lazy → 필요한것만 다운로드서버에서 한번의 큰 js 사이즈를 브라우져에 전달 → 다운로드 시간이 오래 걸림작은 사이즈로 여러개 쪼개서 하..

useEffectuseEffect가 필요한 이유top level에서 API 호출 → useState 업데이트 → 리랜더링 → 함수 자체 다시 호출 → API 호출 → useState → 반복 (useState에 의한 리랜더링은 값이 아닌, 메모리 비교로 리랜더링을 진행하기 때문) → 무한반복 -> useEffect를 사용하길 권장  useEffectuseState → render → commit → paint(화면에 나타나고) → useEffect 가 실행됨. (랜더 이후 시작되기 때문에 작동하는게 늦다는 단점이 있음)그래서 [useEffect A → useEffect B → useEffect C] 의 폭포수 코드를 쓰면→ 3번의 리랜더링 → 성능 저하 → useState으로 해결 할 수 있다면, use..

useRefinput과 잘 어울림. 포커스 사용 가능다른 hook과 달리 ‘랜더링’을 야기시키지 않음. 값만 저장 & 공유 가능.  DOM에 관여 하는 경우const inputRef = useRef(null);inputRef.current.valueinputRef.current.focus(); 위 연결을 하면,내가 원하는 inputText에 focus를 하거나, 값을 데이터로 가져올 수 있다.   컴포넌트에 arg로 ref를 전달하는 경우 : forwardRef를 사용해야 에러가 안난다.  (리팩토링 사용시 필요)const MyInput = forwardRef((props, ref) => { return ;}); UI 랜더링 완료 후 ref로 DOM 연결이 필요해야함.useEffect(() => { ..

useState 데이터 변경,비동기, if 분기 불가, 동기적 시행 가능 호출 → 즉시 UI 변경 X → 이벤트 핸들러에 스케쥴 등록 (함수가 끝나야 변경, 그 사이 변경 안됨)top level 에서만 사용 (if문, 분기 처리 등에서 useState() 사용 불가) → 리액트가 트리 이해 못 함. → 첫 로드에는 에러가 없지만 리랜더링시 에러 발생.비동기setState 여러번 호출해도 리랜더링 종료 후 한번만 바뀜 (중간에 콘솔 찍으면 변화가 없음)동기적으로 진행하고 싶다면 → setCount((like)=>like+1) (이전 값을 명시적으로 표현)useState의 초기화에 함수가 필요한 경우.lazy 초기화 (function 사용) const [watched, setWatched] = useSta..

성능 최적화(1) : memo, useMemo, useCallbackReact.memo : setState에 의해 랜더링 되는 경우, react.memo로 파싱되는게 원초적인 값이라면, 해당 하위 컴포넌트는 리랜더링 되지 않는다.setState에 의해 해당 ParentComponent가 새롭게 생성 → 해당 컴포넌트 랜더링ChildComponent도 리랜더링, → 하지만 setState에 의해 ChildComponent가 변경될 필요가 없다면memo를 사용해서 리랜더링 방지가 가능하다. (이전 값 계속 사용)장점 : 캐싱 사용 → 리랜더링 방지 → 속도 향상단점 : 값(string, boolean..)과 같은 원초적인 값만 적용, {}와 같은 객체 전달시 캐싱이 불가능이유 : 모두 새롭게 생성 → 새로운..