프로그래밍/React (11) 썸네일형 리스트형 React(리액트) - redux 미들웨어 알아보기(redux-thunk, redux-saga) 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다.! 리덕스에는 미들웨어라는 기능을 지원합니다. 리덕스에서 미들웨어는 액션과 리듀서 사이에 있는 중간 처리기입니다. 이 미들웨어는 액션 작업을 처리하기 전 액션과 리듀서 사이에서 필요한 작업 로그 기록이나 액션을 취소시킨다던가 액션을 받고 다른 액션도 호출할 수 있습니다. 많이 알려진 미들웨어로는 로그를 기록하는 redux-logger, 비동기 처리를 해주는 redux-thunk, redux-saga가 있습니다. 미들웨어 동작 원리 미들웨어의 기본적인 구조와 작동 순서를 알아봅니다. 기본적인 리덕스 미들웨어는 함수의 함수를 리턴하는 구조로 되어있습니다. function exampleMiddleware(storeAPI) { r.. React(리액트) - React Redux 알아보기 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다.! 리액트 리덕스는 기존에 상태 관리 로직을 다른 곳으로 분리시켜 관리할 수 있게 해주는 라이브러리입니다. 간단한 프로젝트는 그대로 사용해도 되지만 프로젝트가 크다면 복잡한 상태 관리를 리덕스를 이용해서 상태(state) 관리를 분리하여 유지 보수성을 높이고 효율적으로 프로젝트를 개발할 수 있습니다. 리덕스는 React뿐만 아니라 anguler, Vue, 순수 자바스크립트에서도 사용이 가능합니다. 이번에는 React에서 편하게 사용할 수 있도록 만들어진 reudx ,react-redux를 알아봅니다. Presentational 컴포넌트와 Conatiner 컴포넌트 리덕스를 사용할 때 많이 사용하는 패턴인 Presentati.. 리액트(React) - Context 알아보기 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다! 이번에는 리액트 Context를 알아봅니다. Context는 리액트 프로젝트에서 전역으로 사용되는 데이터를 이용할 때 사용되는 기능입니다. 애플리케이션 설정, 테마 같은 전역으로 공유되는 데이터를 이용할 때 유용합니다. 리액트를 하면서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. 하지만 Context를 사용하면 번거롭지 않게 부모에서 자식에게 데이터를 전달하지 않아도 됩니다. Context를 사용하면 쉽게 데이터를 사용할 수 있지만 컴포넌트가 많고 복잡한 상황에서 Context를 사용하는 것이 좋습니다. Context 생성하기 처음 Context 객체를 생성하려면 createContext() .. 리액트(React)/라우터(Router) - Router 기초 리액트에서 라우터는 SPA를 사용할 때 사용됩니다. 리액트를 이용해서 만든 라이브러리 React Router를 알아봅니다. SPA란? SPA는 Single Page Application의 약자입니다. 웹페이지가 여러 개로 이루어진 것이 아닌 하나의 페이지에서 모든 정보를 나타냅니다. 기본적인 웹은 여러 개의 페이지를 따로 만들어 서버에 해당하는 페이지를 요청하여 페이지를 나타냅니다. 하지만 SPA는 하나의 페이지에서 필요한 정보들만 서버에 요청하여 페이지를 나타냅니다. 기존의 여러 개의 페이지로 이루어져 있을 경우 새로운 페이지를 요청할 때 바뀌지 않아도 되는 부분도 모두 새로 로드하기 때문에 효율적이지 않습니다. 반면 SPA로 만든다면 필요한 부분만 다시 자바스크립트로 변경하기 때문에 새로 로드하지 않.. 리액트(React) - 리액트와 불변성 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다! 리액트에서는 컴포넌트에서 업데이트 되는 상태는 불변성이 중요합니다. 상태 관리되는 데이터를 이용해서 값이 변경이 되었는지 확인하여 리액트가 다시 렌더링 할지 안할지 정하기 때문입니다. 따라서 값이 변경이 되었는지 확인하려면 기존의 데이터는 그대로이고 같은 데이터 타입의 변경된 값이 있는 데이터가 있어야합니다. 불변성은 이렇게 기존 데이터를 변경되지 않는것을 말합니다. 먼저 자바스크립트의 원시값을 알아보겠습니다. 자바스크립트에서 원시값은 string, number, boolean, undefined, symbol, null이 있습니다. 원시값은 변경되지 않아 불변성을 가지고 있습니다. let a = "bear"; .. 리액트(React) - Hooks 알아보기 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 있다면 알려주시면 감사하겠습니다! Hooks 리액트의 Hooks는 클래스형 컴포넌트에서 사용하는 상태 관리와 생명주기 메서드를 이용하는 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 함수입니다. hooks에는 여러 가지 hook이 존재합니다. 이번 글에서 어떤 것이 있는지 알아봅니다. Hooks - useState() useState는 함수형 컴포넌트에서 상태 관리를 할 수 있는 hook입니다. useState를 이용하면 상태를 관리하는 변수와 함수를 반환합니다. import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0.. 리액트(React) - 컴포넌트의 라이프사이클 및 메서드 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요! 리액트에는 컴포넌트의 생명주기가 있습니다. 이 생명주기(라이프사이클)에 맞춰 호출되는 메서드를 재정의하여 컴포넌트가 생성될 때나 사라질 때 필요한 작업을 할 수 있게 됩니다. 리액트에서 생명주기는 마운트 - 업데이트 - 언마운트로 진행됩니다. 3가지로 구성되어있는 생명주기에 어떤 메서드가 있는지 알아봅니다. 마운트(생성) 마운트는 컴포넌트가 생성되어 DOM에 추가되어 나타날 때 발생합니다. 마운트가 될 때 호출되는 메서드는 아래와 같습니다. constructor() static getDerivedStateFromProps() render() componentDidMount() 마운트 - constructor() 마운트가.. 리액트(React) - 컴포넌트 반복 및 리스트, Key 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요! 기본 자바스크립트에서 배열을 이용해 원하는 규칙을 통해 새로운 배열을 만들고 싶은 경우 map() 메서드를 사용합니다. 이 map() 메서드를 이용하면 배열이 가지고 있는 요소를 규칙이 있는 함수에 전달하여 가공하여 새로운 배열을 만들 수 있습니다. 엘리먼트 반복 및 컴포넌트 반복 리액트에서 map() 메서드를 이용해 엘리먼트 코드 또는 컴포넌트를 반복하여 새로운 엘리먼트 배열을 만들 수 있습니다. 이 배열을 통해 배열에 있는 여러 개의 엘리먼트를 렌더링 할 수 있습니다. //app.js function App() { const colors = ["red","blue","green","yellow","skyblue"];.. 이전 1 2 다음
