👩🏻‍💻 프로그래밍 언어/React

이번 장에서는State와 Props의 개념과 차이점을 자세히 다뤄볼 예정입니다.여러분은 React의 state에 얼만큼 알고 계신가요 ? 둘의 차이는 뭘까요 ? 결론부터 보자면,state 컴포넌트의 상태를 나타내는 데이터컴포넌트 내부에서 관리되는 동적인 데이터로, 변경이 가능하며 주로 UI의 동작을 제어합니다.props 외부로부터 주어진 데이터부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터로, 주로 컴포넌트 간 데이터 전달에 사용됩니다. 우리가 데이터 변경이 있는 웹 페이지를 만들고 싶다고 가정했을 때 state가 없었다면.이를 위해서 페이지에 있는 데이터 부분이 변경되었을 때마다 DOM에 접근하여 직접 수정해 주었을 것입니다.데이터가 변경된 만큼 당연히 화면도 변경되어야 하니까요 여기서 잠..

기초 프로젝트에서 처음으로 Jotai를 사용해보았고, 그 경험을 바탕으로 Jotai의 장점과 단점을 Context와 Zutand를 비교해보려 합니다. Jotai 사용 후 Context와 Zustand와의 비교 💫 📌 Jotai 사용 예제import React from 'react';import { atom, useAtom } from 'jotai';// atom 정의const countAtom = atom(0);function Counter() { const [count, setCount] = useAtom(countAtom); return ( 카운트: {count} setCount(count + 1)}>증가 );}export default function ..

1. Styled ComponentsStyled Components는 CSS-in-JS 라이브러리 중 하나로, 스타일을 자바스크립트 파일 안에 작성하고, 컴포넌트 단위로 캡슐화할 수 있다.장점 😄자동 최적화: 불필요한 클래스 생성이나 중복된 스타일 제거 등 최적화가 자동으로 이루어진다.동적 스타일링: Prop에 따라 동적으로 스타일을 변경할 수 있다.CSS의 범위: CSS가 컴포넌트 단위로 캡슐화되어 전역 네임스페이스 충돌 문제가 없다.단점 😞런타임 성능 저하: Styled Components는 스타일을 자바스크립트로 처리하기 때문에 런타임 성능에 영향을 미칠 수 있다. 특히 많은 컴포넌트가 있을 경우 스타일을 계산하고 적용하는 시간이 증가할 수 있다.패키지 크기 증가: 추가적인 라이브러리를 포함해야..

🚪 먼저 알아야할 개념컴포넌트 언마운트란 ?컴포넌트 언마운트(Unmount)는 React 컴포넌트가 DOM에서 제거되는 상태를 의미합니다. 즉, 컴포넌트가 화면에서 사라지거나 더 이상 필요 없을 때 발생합니다.일반적으로 컴포넌트가 언마운트되는 경우 💭사용자가 페이지를 이동할 때조건부 렌더링을 통해 컴포넌트가 숨겨지거나 제거될 때부모 컴포넌트가 언마운트될 때 이벤트 리스너와 클린업이벤트 리스너는 브라우저에서 특정 이벤트(예: 클릭, 리사이즈, 입력 등)가 발생할 때 호출되는 함수입니다. 예를 들어, window.addEventListener('resize', handleResize)는 브라우저 창의 크기가 조정될 때마다 handleResize 함수를 호출합니다. 왜 클린업이 필요한가?컴포넌트가 언마운트..

첫 번째 코드React 18import React from 'react';import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(안녕 리액트 !); React 18 이상: React 18에서는 새로운 Root API인 ReactDOM.createRoot를 사용합니다.Concurrent Mode 지원: 이 새로운 API는 React의 Concurrent Mode와 더 나은 성능 최적화를 지원합니다.사용법createRoot를 사용하여 root를 생성합니다.생성된 root에서 render 메서드를 호출합니다. 두 번째 코드React 17import Reac..