본문 바로가기

전체 글54

props와 state 차이 React에서 props와 state는 컴포넌트의 데이터를 관리하는 두 가지 중요한 개념이다 각각은 다른 목적과 사용 방법을 가지고 있으며, 컴포넌트의 동작과 렌더링 방식을 결정하는 데 핵심적인 역할을 한다 Props 정의: Props(속성)는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터다 Props는 컴포넌트를 구성하고 재사용하는 데 필요한 매개변수와 같다 불변성: Props는 읽기 전용 컴포넌트 내부에서 props의 값을 변경할 수 없다 자식 컴포넌트는 전달받은 props를 그대로 사용하거나, 필요에 따라 props를 기반으로 다른 데이터를 생성할 수는 있지만, 직접 수정할 수는 없다 목적: 다른 컴포넌트와의 상호작용을 통해 컴포넌트에게 값을 전달하고, 컴포넌트를 재사용할 수 있게 한다 Pro.. 2024. 3. 5.
클래스형 컴포넌트와 함수형 컴포넌트 차이 React에서 컴포넌트를 생성하는 데는 주로 두 가지 방식이 있다 클래스형 컴포넌트(Class Components)와 함수형 컴포넌트(Function Components) 각각의 방식은 컴포넌트를 정의하고 사용하는 방법에서 차이를 보인다 React의 초기 버전에서는 주로 클래스형 컴포넌트가 사용되었지만, React 16.8부터 도입된 Hooks의 등장으로 함수형 컴포넌트의 사용이 늘어나고 있다 클래스형 컴포넌트 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의된다 이 방식은 this 키워드를 사용하여 컴포넌트의 상태(state)와 생명주기 메소드(lifecycle methods)를 다룰 수 있다 장점: 생명주기 메소드를 사용할 수 있어, 컴포넌트가 생성되고 업데이트되고 제거되는 시점에 특정 작업을 실행.. 2024. 3. 5.
리액트 Virtual DOM React의 Virtual DOM은 현대 웹 애플리케이션의 성능을 최적화하는 데 중요한 역할을 한다 Virtual DOM은 실제 DOM의 가벼운 메모리 내 복사본이다 React에서 UI의 상태가 변경될 때마다 전체 UI를 Virtual DOM에 다시 렌더링하고, 이 변경사항을 실제 DOM과 비교한 후, 실제 필요한 최소한의 변경만을 실제 DOM에 적용한다 이 접근 방식은 React 앱의 성능을 크게 향상시킨다 Virtual DOM 작동 원리 초기 렌더링: React 컴포넌트가 렌더링될 때, React는 컴포넌트의 JSX를 사용하여 Virtual DOM을 생성하고 이 Virtual DOM을 사용하여 실제 DOM을 업데이트한다 상태 변경: 애플리케이션의 상태가 변경되면, React는 새로운 Virtual D.. 2024. 3. 5.
CSR vs SSR 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)과 서버 사이드 렌더링(Server-Side Rendering, SSR)은 웹 애플리케이션의 콘텐츠를 어디에서 렌더링할지 결정하는 두 가지 주요 접근 방식이다 각각의 방식은 사용자 경험과 검색 엔진 최적화(SEO)에 다른 영향을 미친다 클라이언트 사이드 렌더링 (CSR) CSR에서는 브라우저가 서버로부터 HTML을 다운로드 받은 후, JavaScript를 이용하여 애플리케이션의 나머지 부분을 빌드한다 이 접근 방식에서는 초기 로딩 시간이 더 길 수 있지만, 일단 애플리케이션이 로딩되면 페이지 간의 전환은 매우 빠르다 장점: 사용자 경험: 페이지 간 전환 시 새로운 페이지를 서버로부터 다시 로드할 필요가 없어 사용자 경험이 개선된다 .. 2024. 3. 5.
리액트 사용하는 이유 React를 선택하는 주된 이유는 그것이 제공하는 유연성, 성능, 그리고 대규모 커뮤니티와 생태계 덕분이다 React는 Facebook에 의해 개발되었고, 단일 페이지 애플리케이션(SPA)을 비롯한 복잡한 사용자 인터페이스를 구축하는 데 널리 사용되고 있다 여기에는 몇 가지 주요 이유가 있다 1. 선언적 접근 방식 React는 선언적 프로그래밍 패러다임을 채택하여, 동적 사용자 인터페이스를 더 쉽게 만들 수 있다 개발자는 애플리케이션의 현재 상태를 설명하고, React가 UI를 자동으로 업데이트하여 일치시킨다 이는 코드의 가독성을 높이고, 디버깅을 용이하게 한다 2. 컴포넌트 기반 아키텍처 React는 컴포넌트 기반의 아키텍처를 사용한다 각 컴포넌트는 독립적이고 재사용 가능하며, 이를 통해 대규모 애플리.. 2024. 3. 5.
왜 리액트 타입스크립트 사용 React와 TypeScript를 함께 사용하는 것은 현대 웹 개발에서 점점 더 인기를 얻고 있다 이 조합이 제공하는 주요 이점은 다음과 같다 1. 정적 타이핑 (Static Typing) TypeScript는 정적 타입 언어다 이는 변수, 매개변수, 객체 속성 등의 타입을 컴파일 타임에 체크하므로, 런타임 에러를 줄이고 코드 품질을 향상시키는 데 도움이 된다 React 프로젝트에서 TypeScript를 사용하면 컴포넌트의 props, state 등의 타입을 명시적으로 선언할 수 있어, 예상치 못한 타입의 값이 사용되는 것을 방지할 수 있다 2. 개발자 경험과 생산성 향상 TypeScript는 자동완성, 타입 체크, 리팩토링 등의 기능을 통해 개발자 경험을 크게 향상시킨다 이러한 기능은 코드를 더 빠르고.. 2024. 3. 5.
자바스크립트 key props 사용 이유 React에서 key prop은 컴포넌트 목록을 렌더링할 때 각 요소를 고유하게 식별하기 위해 사용된다 이 고유 식별자는 React가 DOM 변경을 효율적으로 관리하고 최적화하는 데 중요한 역할을 한다 key props의 주요 사용 이유: 성능 최적화 React는 컴포넌트의 상태를 관리하고 UI를 업데이트할 때 가상 DOM을 사용한다 리스트의 요소에 key를 제공하면, React는 이전과 새로운 요소들을 효율적으로 비교하여 필요한 최소한의 DOM 변경만을 수행할 수 있다 이는 특히 대량의 데이터를 다룰 때 렌더링 성능을 크게 향상시킨다 요소 재사용 key가 없을 경우, React는 리스트의 요소를 순서대로 비교하며 업데이트를 진행한다 하지만 key를 통해 각 요소가 고유함을 알고 있으면, React는 요.. 2024. 3. 5.
제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Components)와 비제어 컴포넌트(Uncontrolled Components)는 주로 React에서 폼(form) 요소를 다룰 때 사용되는 두 가지 방식이다 이 두 개념은 폼 데이터를 어떻게 관리하고 상호작용할 것인가에 대한 접근 방식의 차이를 나타낸다 제어 컴포넌트 (함수형 컴포넌트 기준) 함수형 컴포넌트에서 제어 컴포넌트를 사용할 때, 폼 입력(input, textarea, select 등)의 상태는 React의 useState 훅을 통해 관리된다 상태 변경은 이벤트 핸들러 함수 내에서 useState의 업데이트 함수를 호출함으로써 처리된다 이 방식을 사용하면, 폼의 입력 값은 항상 컴포넌트의 상태와 동기화되어 있으므로, 상태를 기반으로 어떤 작업을 쉽게 실행할.. 2024. 3. 5.
requestAnimationFrame requestAnimationFrame 웹 브라우저에게 애니메이션을 수행하고자 할 때 다음 리페인트가 진행되기 전에 특정 함수를 호출하도록 요청하는 메서드 이 방법은 주로 웹 애니메이션, 게임 개발, 그리고 다른 시각적 변화를 필요로 하는 인터랙션을 구현할 때 사용된다 기본 사용법 requestAnimationFrame 함수는 콜백 함수를 인자로 받는다 이 콜백 함수는 브라우저가 다음 프레임을 그리기 전에 호출된다 콜백 함수에는 하나의 인자가 제공되며, 이는 호출 시점의 타임스탬프(고정 시간 기준의 시간 값)다 function step(timestamp) { // 애니메이션 코드 requestAnimationFrame(step); } requestAnimationFrame(step); 특징 및 장점 프레.. 2024. 3. 5.

티스토리툴바