타코따코의 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 처럼 가능하다. 기본적으로 버블링이고, 캡쳐링은 잘 안쓴다. [버블링의 ..

1. 단일 페이지 애플리케이션(SPA)과 클라이언트 측 렌더링의 등장과거 PHP나 WordPress 기반 웹사이트는 서버에서 HTML을 생성해 클라이언트로 전송.현대 웹은 더 동적이고 상호작용이 필요해 클라이언트 측 렌더링(CSR) 방식 등장.CSR에서는 JavaScript로 클라이언트에서 HTML을 생성하여 사용자 경험을 개선.대표적인 기술: React, Angular, Vue.js.2. 서버 측 렌더링(SSR)의 개념과 장단점SSR은 서버에서 HTML을 생성하고 클라이언트에 전송.장점:초기 페이지 로드가 빠르며, SEO(Search Engine Optimization)에 유리.필요한 데이터를 서버에서 미리 가져와 HTML에 포함.단점:페이지 이동 시 서버에서 매번 HTML 생성 → 브라우저에서 페이지..

테일윈드테일윈드 : https://tailwindcss.com/docs/guides/vite → 설치를 따른다 Main.tsx 최상위에 inde.css를 추가테일윈드 인텔리젼스 작동을 안한다면 코드 추가.vscode의 setting.json에 아래 코드를 추가{ "tailwindCSS.includeLanguages": { "javascript": "javascript", "html": "HTML" }, "editor.quickSuggestions": { "strings": true } } 테일윈드 전체 색상 관여하기디자인 컴포넌트 만들때 유용하다. @tailwind base;@tailwind components;@tailwind util..

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(() => { ..