react

🍔 핵심 개념을 비유로 먼저 이해하기카페에서 주문을 받는 직원이 있다고 상상해보세요.일반 손님 (동기, sync): 주문 → 커피 만들기 → 다음 손님 받기. 무조건 한 번에 한 명씩 순서대로 처리합니다.카페 직원 (비동기, async): 주문을 받은 뒤 커피 기계에 버튼 눌러두고 → 커피가 나오는 동안 기다리지 않고 → 다음 손님 주문을 먼저 받습니다. 커피는 나중에 완성되면 가져다줍니다.자바스크립트와 리액트가 딱 이 카페 직원처럼 동작합니다.📌 1단계 — 자바스크립트의 기본: 코드는 위에서 아래로 실행된다 (동기)보통 코드는 그냥 위에서 아래로 순서대로 실행됩니다. jsconsole.log(1 + 1) // 2 출력console.log(2 + 1) // 3 출력console.log(3 + 1..

"버튼 하나 눌렀을 뿐인데 왜 전체가 버벅이지?"리액트는 부모 컴포넌트가 재렌더링되면 자식 컴포넌트도 무조건 함께 재렌더링됩니다. 평소엔 별문제가 없지만, 자식 컴포넌트가 무거운 연산을 하거나 렌더링 시간이 오래 걸리는 경우엔 심각한 성능 저하로 이어집니다. 이걸 해결하는 도구가 바로 memo와 useMemo입니다.📌 먼저 알아야 할 것 — 리액트의 재렌더링 규칙리액트는 아래 상황에서 컴포넌트를 재렌더링합니다.해당 컴포넌트의 state가 변경될 때부모로부터 받은 props가 변경될 때부모 컴포넌트가 재렌더링될 때 (자식도 무조건 같이 재렌더링)세 번째 규칙이 문제입니다. 부모가 재렌더링되면 자식과 전혀 관계없는 이유라도 자식이 덩달아 재렌더링됩니다. jsxfunction Child() { conso..

"내 리액트 앱이 느린 것 같은데... 어디서부터 시작해야 하지?"리액트 앱을 만들다 보면 어느 순간 이런 고민이 생깁니다. 이 글에서는 리액트 성능 문제를 진단하는 도구와 첫 페이지 로딩을 빠르게 만드는 방법을 초보자도 이해할 수 있게 정리합니다.🔍 React Developer Tools — 컴포넌트를 직접 들여다보는 도구브라우저 기본 개발자도구(F12)의 Elements 탭을 열면 우리가 짠 JSX 코드가 실제 HTML로 변환된 모습을 볼 수 있습니다. 하지만 이건 리액트 컴포넌트 구조와는 다르게 보여서 디버깅이 불편합니다.이를 해결해주는 것이 React Developer Tools 크롬 확장프로그램입니다.설치 방법크롬 웹스토어에서 "React Developer Tools" 를 검색해 설치하면 됩니..

"서버에서 데이터를 가져올 때 로딩, 에러, 성공 상태를 매번 직접 짜야 한다고요? 이제 그럴 필요 없어요!"📌 Tanstack Query가 뭔가요?웹 애플리케이션을 만들다 보면 서버에서 데이터를 가져와야 할 일이 정말 많습니다. 예를 들어 쇼핑몰의 상품 목록, SNS의 게시글, 사용자 정보 같은 것들이죠.이런 데이터 요청(ajax)을 직접 처리하면 아래처럼 생각할 게 한두 가지가 아닙니다.지금 데이터 불러오는 중인가? (로딩 상태)에러가 났나? (에러 상태)성공적으로 가져왔나? (성공 상태)탭을 바꿨다 돌아오면 다시 불러와야 하나?같은 데이터 요청이 여러 컴포넌트에서 중복되면?이 모든 걸 자동으로 처리해주는 라이브러리가 바로 Tanstack Query입니다. 예전 이름은 React Query였고, 지..

1. 컴포넌트 안에서 쓰는 if/elseJSX의 return() 안에서는 일반 if문을 쓸 수 없어서, return 전체를 if/else로 감쌉니다. jsxfunction Component() { if (true) { return 참이면 보여줄 HTML } else { return null }}else는 생략 가능합니다 (return을 만나면 함수 실행이 멈추기 때문): jsxfunction Component() { if (true) { return 참이면 보여줄 HTML } return null}2. JSX 안에서 쓰는 삼항연산자 (Ternary Operator)JSX 내부에서 바로 조건부 렌더링이 가능합니다. jsxfunction Component() { return..

✅ some()배열 요소 중 하나라도 조건을 만족하면 trueconst arr = [1, 2, 3, 0]; const result = arr.some(num => num === 0); // true (0이 있음)해석: "이 배열에 0이 하나라도 있냐?" → 있다! → true✅ every()배열의 모든 요소가 조건을 만족해야 trueconst arr = [1, 2, 3, 4]; const result = arr.every(num => num > 0); // true (모두 0보다 큼)해석: "이 배열의 모든 요소가 0보다 크냐?" → 그렇다 → true비교 예시:const arr = [1, 2, 0]; arr.some(n => n === 0); // true (0이 있음) arr.every(n => n ..

https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B7%B8%EB%9E%98%ED%94%84%EC%B0%A8%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%AA%A8%EC%9D%8C [React] 리액트 그래프/차트 라이브러리 모음기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판velog.io 그대로 복사한 글입니다.  기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사..

12.2) 페이지 라우팅 1. 소개      서버가 사용자들에게 제공할 여러 개의 페이지를 미리 가지고 있는 이러한 방식을 여러 개의 페이지를 갖는 어플리케이션이다라는 뜻에서 멀티 페이지 애플리케이션(MPA)라고 부른다. MPA방식에서 브라우저가 새로운 페이지를 요청했을 때 서버에서 미리 완성해놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 서버 측에서 페이지를 미리 렌더링 해준다라고 해서 서버 사이드 렌더링이라고 부른다. 💡 MPA vs. 서버 사이드 렌더링오른쪽처럼 서버가 여러 개의 HTML페이지를 가지고 있는걸 MPA 방식이라고 부른다.이러한 MPA방식에서 브라우저가 페이지를 요청했을 때 가운데 있는 것처럼 미리 완성되어 있는 페이지를 응답해주는 방식을 서버 사이드 렌더링..

11.1) Context란 Props의 단점 1. Props Drilling데이터를 가져올 때 중단 다리를 거쳐서 Props를 가져와야함.. 만약 서비스의 규모가 커지게 되어서 지금처럼 List컴포넌트와 TodoItem 컴포넌트 사이에 굉장히 많은 컴포넌트들이 존재하게 된다면 이때에는 많은 컴포넌트를 거쳐서 데이터를 전달해야하기 때문에 타이핑해야하는 양이 많아진다.심지어 Props의 이름이 중간에 바뀌기라도 한다면 모든 컴포넌트를 찾아가서 일일이 이름을 바꿔줘야 한다. 해결방법 React Context컴포넌트 간의 데이터를 전달하는 또 다른 방법.기존의 Props가 가지고 있는 단점을 해결할 수 있음.💡Props의 어떤 단점을 가지고 있길래? => Props Drilling을 해결Context는 일종의..

10.2) useMemo와 연산 최적화"메모이제이션"기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅특정 연산의 결과 값을 기억해 둘 수 있다.자매품: useCallback메모이제이션(Memoization)? 기억해두기, 메모해두기   import "./List.css";import TodoItem from "./TodoItem";import { useMemo, useState } from "react";const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const..