React5 [React] Redux와 OpenWeather Redux Redux는 상태 관리를 위한 라이브러리로 주로 React와 함께 사용되며 React 뿐만 아니라 다른 프레임워크나 라이브러리와도 호환됩니다. Redux를 사용하는 주된 이유는 복잡한 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하기 위함이지만 작은 애플리케이션 또는 단순한 상태 구조의 애플리케이션에서는 Redux의 도입이 부담이 될 수 있습니다. 따라서 상태 관리 필요성, 애플리케이션의 크기 및 복잡성에 따라 적절하게 사용하는 것이 좋습니다. 설치 방법 npm install redux 장점 예측 가능한 상태 관리 : Redux는 일관적으로 동작하고 서로 다른 환경에서도 실행 되며 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 중앙화 : 앱의 상태와 로직을 중앙화하여 실행 취소, 다시 실행.. 2023. 9. 14. [React] react-router-dom을 알아보기 react-router-dom 웹 애플리케이션에서 라우팅을 관리하기 위한 React 라이브러리로 URL을 통해 특정 페이지나 뷰에 앳세스할 수 있게 해주는 기능입니다. 기본 설정 // test라는 이름의 react 프로젝트를 만듬 npx react-create-app test // react-router-dom 설치 npm install react-router-dom // index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; // react-router.. 2023. 9. 7. [React] useState, useEffect를 활용한 달력 만들기 React Hooks React Hooks는 React 16.8 버전에서 도입된 기능으로 함수형 컴포넌트에서도 상태 관리와 생명 주기 기능을 사용할 수 있게 해줍니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있으므로 함수형 컴포넌트를 사용하는데 있어 더욱 편리하고 유연하게 개발 할 수 있습니다. React에서 제공하는 내장 hook과 별도의 custom hooks이 만들어져 있기 때문에 로직을 재사용하고 코드를 더욱 간결하게 만들 수 있습니다. State Hook(useState) useState는 현재의 state 값과 그 값을 업데이트 하는 함수를 쌍으로 제공하여 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. 초기 상태를 .. 2023. 9. 7. [React] Babel과 webpack 알아보기 Babel 이란? JavaScript는 버전에 따라 문법이 조금씩 바뀌면서 다른 버전간의 문법적 호환성이 떨어지는데 이를 보완하기 위해 Babel이 등장했습니다. 쉽게 말해 JavaScript 변환기로 최신의 JavaScript 문법을 오래된 버전의 JavaScript로 변환하여 호환성을 유지하게 해줍니다. React에서 Babel React에서는 JSX라는 문법을 사용하게 되는데 JSX는 JavaScript 안에서 UI구조를 직관적으로 표현할 수 있게 해주지만 웹 브라우저에서 직접 실행될 수 없습니다. 따라서 Babel이 JSX를 일반 JavaScript로 변환해주는 역할을 수행합니다. JSX 문법 const element = Hello, world!; JavaScript 문법으로 변환 const el.. 2023. 9. 7. [React] React 시작하기 React 란 ? - 리액트란 페이스북에서 개발하고 관리하는 자바스크립트 라이브러리로 사용자 인터페이스를 구축하는데 근래에 주로 사용된다. 컴포넌트 라는 개념을 기반으로 프래그래밍 방식을 지향하며 대규모 애플리케이션을 프로그래밍하는데도 간결하고 효율적인 코드 작성이 가능하게 해준다. - 일반적인 HTML은 변경된 부분만 업데이트 하지 않고 전체 페이지를 다시 그려주는데 리액트는 가상 DOM을 사용하여 변경된 부분만 업데이트 해주기 때문에 효율적인 업데이트가 가능하다. React 주요 특징 컴포넌트 기반 : 컴포넌트란 UI의 기본 단위로 상태와 속성을 가지고 있어 이를 조합하여 사용자 인터페이스를 구축 가상 DOM : 리액트는 가상 DOM을 통해 데이터가 변경 될 때마다 실제 DOM을 직접 변경하는 대신 .. 2023. 6. 28. 이전 1 다음
