전체 글128 [React🩵] 리액트의 리렌더링과 불변성 어느날 스프레드 연산자를 사용한 코드를 보다가 문득 든 생각 스프레드 연산자를 사용하면 기존의 배열을 모두 가져오게 되는데, 왜 굳이 다 가져와야할까?배열에서 원하는 요소만 이벤트를 주려면 id를 비교해서 해당 값만 변경하는 것이 더 효율적인 방법 아닐까? 라는 의문이 들었다 그 이유는 리액트는 상태가 변했을 때 리렌더링하기 때문이다새 배열을 전달 받아야만 "이 배열이 이전과 다른 배열이구나" 하고 인식을 하게 된다 그럼 여기서 또 든 의문... 왜 굳이 모든 값을 가져와서 새로운 배열을 만들어줘야할까? 그 이유는 "불변성(immutability)" 때문인데 완전히 새로운 배열을 전달해야 리렌더링이 일어난다 변경이 없는 부분까지 불필요하게 새로 만드는 것이 더 비효율적인 방법이 아닐까??리액.. 2025. 3. 29. [React🩵] Map 배열 메서드 종합 .findIndex : 순서 찾기. 조건을 함수로 전달해야함. 못찾으면 -1를 반환 const arr = [ { id: 1, name: "피카츄" }, { id: 2, name: "파이리" }, { id: 3, name: "꼬부기" },];arr.findIndex(pokemon => pokemon.id === 2); // 👉 1arr.findIndex(pokemon => pokemon.name === "라이츄"); // 👉 -1 .indexof: 배열에서 값 찾기. 못찾으면 -1를 반환 const arr = [10, 20, 30, 40];arr.indexOf(30); // 👉 2arr.indexOf(50); // 👉 -1 (없으면 -1) 2025. 3. 28. [React🩵] a 태그와 Link 태그 a태그는 기본적으로 코드 실행 시 브라우저가 전체 페이지를 새로고침 하게 된다(전통적인 방식)이는 앱의 State가 초기화되는 문제가 발생할 수 있다이동하기 하지만 요즘은 SPA(Single Page Application) 방식 = JS를 이용해서 페이지를 동적으로 변경하는 방식이 일반적이다이때 Link 태그를 사용하면 브라우저의 새로고침 없이 페이지 전환이 가능하다import Link from 'next/link';function Home() { return ( About 페이지로 이동 );}export default Home; 구분a 태그Link 태그 기본동작페이지를 새로고침하여 이동새로고침없이 클라이언트 사이드에서 전환상태유지초기화됨유지됨속도전체 새로고침 되므로 상대적으.. 2025. 3. 20. [React🩵] 리액트 메모이제이션 총 정리! 01. 메모이제이션이란?메모이제이션은 이전에 계산된 결과를 저장해두고 동일한 입력값이 들어오면 다시 연산하지 않고 저장된 값을 반환한다리액터에서는 불필요한 렌더링을 방지하고, 성능을 향상시키기 위해 활용한다 불필요한 리랜더링을 방지하고 성능을 최적화한다비싼 연산의 재계산을 방지한다(데이터 필터링, 정렬 등)이벤트 핸들러나 콜백 함수의 재생성을 방지한다 02. React.memo컴포넌트가 변경되지 않으면 다시 렌더링 하지 않는다 컴포넌트가 동일한 props를 받을 때 불필요한 리렌더링을 방지한다내부적으로 얕은 비교(shallow comparison)를 수행하여 props가 변경되지 않으면 렌더링을 생략함 2-1. 기본 사용법const MemoizedComponent = React.memo(Compo.. 2025. 3. 18. [React🩵] Context ⬇️ 이전에 공부했던 props와 props drilling [React🩵] Props01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mothersolby.tistory.com 01. props drilling의 문제점props란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 것을 말한다(단방향 데이터 흐름)props drilling이란 부모 컴포넌트에서 몇단계를 건너뛴 자식 컴포넌트로 데이터를 전달할 때 중간 단계의 컴포넌트가 불필요하게 props를 전달해야하는 문제를 의미한다ex. 부모 → 자식 → 손자 컴포넌트가 존재할 때 부.. 2025. 3. 14. [React🩵] useRef 01. useRefuseState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 React hook리랜더링과 상관없이 값을 기억하기 위해 사용되며(렌더링과 상관없이 변수를 유지), 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소에 직접 접근할 때 사용된다 02. 사용 방법import "./App.css";import { useRef } from "react";function App() { const ref = useRef("초기값"); //👈🏻초기 값 console.log("ref 1", ref); ref.current = "바꾼 값"; //👈🏻변경 값 console.log("ref 1", ref); return ( useRef에 대한 이야기.. 2025. 3. 14. [React🩵] useEffect와 components lifecycle (컴포넌트의 생명주기) 01. 컴포넌트의 생명주기탄생 → 변화 → 소멸 의 과정을 거친다useEffect를 사용하면 생명주기 단계마다 특정 작업을 실행할 수 있다 마운트(Mount): 컴포넌트가 화면에 처음 나타날 때(탄생)업데이트(Update): 상태(state)나 props가 변경되어 다시 그려질 때(리랜더링 포함)언마운트(Unmount): 컴포넌트가 화면에서 사라질 때(제거) 02. 마운트(Mount)컴포넌트가 처음 화면에 랜더링 될 때 발생하는 과정HTML요소가 DOM에 추가된다 ☑️ 마운트 시 실행되는 것들useEffect의 첫번째 실행console.log()가 있으면 처음 한 번 출력됨API요청(데이터 불러오기) 같은 초기 작업 수행import { useEffect } from "react";function .. 2025. 3. 14. [React🩵] Styled-components Styled-components란?리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지컴포넌트에 공통으로 적용할 스타일을 만든다백틱(`)으로 감싸서 작성한다const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;`;const boxList = ["red", "green", "blue"];const getBoxName = (color) => { switch (color) { case "red": return "빨간박스"; case "green": return "초록박스"; case "b.. 2025. 3. 13. [React🩵] useState 01. useState란?React 컴포넌트에서 상태 관리하는 Hook함수형 컴포넌트에서 상태를 사용할 수 있게 도와준다 02. 기본 문법const [state, setState] = useState(initialValue);state → 현재 상태 값setState → 상태를 업데이트하는 함수initialValue → 상태 초기 값 03. 사용법3-1. 기본 사용법import { useState } from "react";function Counter() { const [count, setCount] = useState(0); const handleButton = () => setCount(count + 1) return ( 현재 카운트: {count} +1.. 2025. 2. 28. [React🩵] Props 01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mother() { const lastName = "최"; const firstName = "르탄"; // ✅ 새로운 props 추가!// 자식 컴퍼넌트 child에 props를 전달 return ;}// 자식 컴퍼넌트인 child는 props를 전달받아 사용// props는 단순 파라미터명으로 변경 가능function Child(props) { return ( {`내 이름은 ${props.lastName}${props.firstName}입니다.`} );}쉽쥬? 👍🏻.. 2025. 2. 27. 이전 1 2 3 4 ··· 13 다음
