리액트 (8) 썸네일형 리스트형 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) - 이벤트 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 이번에는 리액트에서 이벤트를 사용하는 방법을 알아봅니다. 리액트에서 이벤트는 DOM요소에만 이벤트를 사용할 수 있습니다. 따라서 컴포넌트 안에 있는 요소에 이벤트를 추가해야 합니다. 코드와 같이 기존 HTML에서는 이벤트에서 함수를 호출하거나 간단한 코드를 적어 적용했습니다. 리액트에서 이벤트를 줄 때는 함수를 전달해주어야 합니다. class Test extends Component { render() { return ( {alert("클릭이에요!");} }> 클릭 ); } } export default Test; 화살표 함수나 따로 함수를 선언하여 함수를 전달하면 됩니다. 화살표 함수가 아닌 함수로 전달한다면.. 리액트(React) - 컴포넌트, props, state 간단 설명 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 컴포넌트(Compoent) 컴포넌트는 재사용이 가능한 React 엘리먼트를 반환하는 하나의 구성 요소이다.. 즉 리액트에서 뷰를 표현하는 하나의 구성요소입니다. 리액트 컴포넌트의 종류 리액트의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트가 존재합니다. 함수형 컴포넌트 - JavaScript에서 사용하는 함수를 이용해 만든 컴포넌트입니다. 클래스형 컴포넌트 - ES6에서부터 지원하는 class 문법을 이용해 만든 컴포넌트입니다. props props는 properties의 줄임말이며 컴포넌트 속성을 설정하는 요소입니다. 해당 props 값은 컴포넌트를 사용할 때 설정이 가능합니다. // Test.js - Com.. 이전 1 다음