728x90 반응형 웹35 [React] Redux 사용하기 (feat. TypeScript) 1. redux 1.1. 리덕스란?단일 저장소(store): 리덕스는 하나의 중앙 저장소를 통해 애플리케이션의 상태를 관리 -> 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 변경하는 것을 금지하고, 상태가 갱신될 때는 새로운 객체를 반환 -> 직접 상태를 변경하는 것이 아니기 때문에 예측 가능성을 높이고 상태 관리의 안정성을 제공액션(Actions) & 리듀서(Reducers): 상태를 변경할 때는 액션 객체를 디스패치하고, 리듀서는 이 액션에 따라 새로운 상태를 반환 -> 이를 통해 상태 변경 로직이 예측 가능하고 테스트하기 쉬움 - 리액트에서는 이미 state 랑 props 로 상태 관리 잘하고 있는데 (feat. 리덕스를 쓰는 이유)? 리액트에서 데이.. 2024. 11. 7. [React.js] 5주차 - Counter 만들기, useEffect 1. Counter 만들어보기 Viewer 컴포넌트는 count 값을 보여주고 있고, Controller 컴포넌트는 count 값을 증가시킬 수 있는 버튼을 가지고 있다. 두 컴포넌트는 state 변수인 count 를 공유하고 있는데, Viewer 와 Controller 컴포넌트는 병렬적인 관계이기 때문에 props 공유가 불가능하다. 그래서 두 컴포넌트의 부모 컴포넌트인 App 컴포넌트에 state 변수를 두고 자식 컴포넌트인 Viewer, Controller 컴포넌트에 count 변수를 공유해준다. 이렇게 공유되는 state 를 계층 구조의 맨 위로 끌어올려 아래 컴포넌트들이 모두 공유할 수 있도록 만드는 것을 State Lifting 이라고 한다. 리액트에서 데이터는 위에서 아래로 단방향으로 흐르기.. 2024. 11. 4. [React.js] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. [React.js] 3주차 - React.js 입문(1) 1. React 컴포넌트리액트에서는 HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 보통 함수의 이름을 따서 부른다. 컴포넌트는 함수 선언식이나 화살표 함수를 사용해 만들 수 있다. 컴포넌트를 만들 때 컴포넌트 이름의 첫글자는 꼭 대문자로 적어줘야 하는데, 그렇지 않으면 리액트 내부적으로 컴포넌트로 인식하지 않기 때문이다. // 함수 선언식function Header() { return ( header );}// 화살표 함수const Header = () => { return ( header );} 2. JSX (JavaScript Extensions) 리액트는 jsx 즉, 확장된 자바스크립트의 문법을 사용하기 때문에 자바스크립트에서는 불가능.. 2024. 10. 14. 이전 1 2 3 4 5 ··· 9 다음 728x90 반응형
