React

리액트가 아닌 일반 타입스크립트에 대한 이벤트 처리는 아래를 참고하세요, 타입스크립트(TypeScript): HTML 요소에 이벤트 추가   리액트 + 타입스크립트 (React + TypeScript): HTML 요소, 폼의 이벤트 처리 아래와 같이 폼에 대한 이벤트 처리를 하는 JSX를 사용한 리액트 Hook이 있다고 가정합니다. import { useState } from ‘react’ function App() { const [text, 더보기…

body 태그의 css를 변경합니다. position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다. useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 더보기…

리액트(React): React Redux 요약 정리 redux-saga 깃허브 역할 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다.   특징 saga 패턴을 차용 (참고 블로그) 미들웨어로서 역할을 수행 (React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 더보기…

자습서: React 시작하기 리액트 공식 자습서로 처음 제시하는 과제는 ‘틱택토’ 게임입니다. 자습서라는 이름에 맞지 않게 이해하기 어렵고 구현 난이도가 높은 편입니다. 이 자습서의 구성은 먼저 자습서가 제시하는 범위의 예제를 완성한 후에, 추가 구현사항 6가지를 스스로 풀어보도록 하고 있습니다. 기존 코드는 다음과 같습니다. See the Pen Tic Tac Toe by Dan 더보기…

1. redux-action의 handleActions 대용으로 typesafe-actions의 createReducer 를 사용합니다. # NPM npm install typesafe-actions # YARN yarn add typesafe-actions 참고로 redux-action은 리덕스에서 액션 생성 함수, 리듀서를 작성하기 편하게 하기 위한 목적으로 사용됩니다. import { createAction } from “redux-actions” import { createReducer } from “typesafe-actions” // 액션 타입 const START_LOADING = “loading/START_LOADING” 더보기…

이 글은 위 동영상 강의들을 요약 정리한 것입니다.   Redux와 React Redux는 같은 의미인가요? 아닙니다. Redux는 상태 관리 라이브러리로, 상태관리 패턴인 Flux의 일부를 변형하여 간단하게 상태 관리가 가능하도록 만들었습니다. 이것은 제이쿼리, 일반 자바스크립트, 다른 SPA 프레임워크 등 다양한 환경에서 사용가능하도록 제작되었으며 리액트 전용으로 만들어진 것은 아닙니다. Redux의 상태관리 기법을 리액트 더보기…

리액트에서 function 기반 컴포넌트(hook)는 한 번 렌더링되고 끝나는 것이 아닙니다. 리액트의 컴포넌트는 실시간으로 끊임없이 렌더링되며 여기서 일반 변수 등을 사용하면 컴퓨터의 자원 낭비와 성능 저하를 불러올 수 있습니다. 리액트의 함수 컴포넌트 체제에서 변수 등의 상태들을 관리할 수 있는 방법이 여러 가지 있는데 useState는 상태 관리의 아주 기초적인 형태입니다. 통상적인 변수 더보기…