IT_susu

플러그인 : https://www.npmjs.com/package/eslint-plugin-react-hooks eslint-plugin-react-hooks ESLint rules for React Hooks www.npmjs.com 1. 무조건 최상위 레벨에서만 훅을 호출한다. 2. react 함수 내에서만 훅을 호출한다. https://ko.reactjs.org/docs/hooks-rules.html

블로그 이전 https://velog.io/@susu1991/%EC%9D%B4%EC%A0%84%EC%9E%90%EB%A3%8C%EB%B0%B1%EC%97%85-useEffect

리덕스 미들웨어의 하나인 리덕스 사가. 리덕스 미들웨어는 dispatch()메소드를 통해 store로 가고 있는 액션을 가로채는 코드. action에 대한 listener이다.

redux를 사용하기 위해 설치할 것들 redux: 리덕스 모듈 react-redux: 리액트 컴포넌트에서 리덕스를 사용하기위한 유용한 도구들이 들어가있습니다. redux-actions: 이 라이브러리를 꼭 설치 할 필요는 없습니다. 단, 알아두면 굉장히 유용합니다. yarn add redux react-redux redux-actions 1. 모듈 만들기 모듈이란 액션, 액션생성함수, 미들웨어, 초깃값, 리듀서함수가 들어있는 파일 1.1 액션타입 정의 // modules/counter.js const INCREASE = 'counter/INCREASE'; 1.2 액션 생성 함수 만들기 // modules/todos.js export const changeInput = (input) => ({ type:..

1. 리덕스란? 리덕스는 상태(state) 관리 라이브러리입니다. 상태들을 전역적으로 만들어서 여기저기서 동일하게 사용가능하도록 해줍니다. 2. 전역 상태관리가 필요한 이유 1) 상태의 전역 관리 리액트는 무조건 부모에서 자식으로 흐르는 단방향으로 진행되며, 그러기 위해서 해당 컴포넌트에서 사용하지 않는 값이라도 자식에게 전달하기 위해 작성해야 하는 상황이 발생합니다. 이는 그 것의 이름이라도 하나 바꾸려면 그 값이 통과하는 모든 곳에서 바꾸어야 하는 매우 비생산적인 활동이 일어나고, 실수할 가능성도 매우 높아집니다. 2) 기능의 재사용성 화면에서 컴포넌트를 만들어서 ui를 재사용하는 것과 같이 state와 연관된 기능들을 재사용 가능하게 되어 활용도가 높아집니다. 3. 사전 개념 리덕스를 사용하기 위해..

useState는 함수형 컴포넌트에서 상태관리를 할 수 있도록 제공하는 훅입니다. class example class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( You clicked {this.state.count} times this.setState({ count: this.state.count + 1 })}> Click me ); } } hook example import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다...

리액트에서 이벤트를 사용하는 방법을 알아봅시다. 역시 이벤트 사용법도 DOM 엘리먼트에서 이벤트를 처리하는 방법과 많이 비슷하면서 조금 다릅니다. react의 이벤트는 소문자가 아니라 camelCase 사용 jsx를 사용하여 문자열로 함수명(); 아닌 함수 값 으로 이벤트 핸들러 전달 return false를 이벤트 리스너 안에 사용해도 기본 동작을 방지할 수 없어 꼭 preventDefault를 명시적으로 호출해야 함 이벤트 리스너에 있는 파라미터는 리액트에서 제공하는 합성이벤트입니다. (실제 이벤트 객체가 아님) 클래스 컴포넌트의 경우, 이벤트리스너를 등록할 때 this의 처리가 문제가 됩니다. javascript에서 클래스 메서드는 this바인딩이 되어 있지 않으므로 명시적으로 표현을 해줘야 합니다..

1. ref Dom노드나 react 엘리먼트에 접근하는 방법을 제공 원래 리엑트에서는 데이터의 흐름을 가지고 순간적인 dom의 모습을 그려내는 방식이지만, 직접적으로 해당 자식을 수정해야 하는 경우가 있습니다. 이 때, 수정할 자식이 react 컴포넌트의 인스턴스일 수도 있고, dom 엘리먼트일 수도 있습니다. 이는 리액트의 일반적인 흐름방식이 아니라서 남용은 좋지 않습니다. 최대한 자제하는 방식으로 사용하는 것에 유념하면서 ref를 사용하여 이들에게 접근하는 방법을 알아봅시다. 2. 사용 사례 - 포커스, 텍스트 선택영역, 미디어의 재생 - 애니메이션 직접적 실행 - 서드파티 돔 라이브러리를 react와 같이 사용할 때 3. Ref 생성 React.createRef(); class MyComponent..

1. useState useState는 state를 설정해 주는 함수입니다. const [count, setCount] = useState(0); setCount(count++); useState의 인자값에 state의 기본값을 넣어줄 수 있으며, 첫번째 변수는 state 변수, 두번째는 이 state를 제어하는 함수(세터함수)입니다. 기존의 state는 꼭 객체형식이어야 했고, this.setState는 기존의 state값들과 바뀐 값을 합쳤다면, useState는 객체가 아니어도 되며, 기존의 state들과 값을 병합하지 않고 대체합니다. 2. useEffect side effect 작업들을 도와주는 함수. componentDidMount, componentDidUpdate, componentWill..