React 실습 (38) 썸네일형 리스트형 useReducer에 대한 좋은 설명 useReducer 란? useReducer 함수는 간단히 말해 리액트에서 상태변화를 업데이트 해주는 함수이다. const [state, dispatch] = useReducer(reducer, 초기값, 초기 함수) useReducer 함수를 사용하려면 + state 와 + dispatch() 함수 + reducer() 함수가 필요하다. reducer() 함수를 사용하려면 + state 와 action 이 필요하다. ** dispatch({ 는 action 오브젝트 내용 }) 을 넣는다. 그러면 reducer 가 동작하여 action 을 받아 상태(state)를 변경해준다. ** reducer(는 현재 state와, action) 을 인자로 받아 => 새로운 상태(state) 를 반환 하는 함수이다. *.. Redux에 대한 좋은 설명 React(31) Redux 패턴 action-reducer-store-view 1. 모듈 설치 npm i redux react-redux npm i --save-dev redux-devtools-extension Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. Action action은 { type과 데이터 } 를 담고 있는 json object다. (type 을 뺀 나머지 원소는 state값 수정을 위해 사용되는 데이터들이다) >> loginSuc.. useContext에 관한 좋은 설명 출처: https://devbirdfeet.tistory.com/79 [새발개발자:티스토리] useContext 란? context 를 사용할 때, (즉 할머니 컴포넌트가 특정 손주 컴포넌트 한테만 다이렉트로 데이터(용돈)를 쏴주려고 할 때) 그 귀여운 손주는 useContext 라는 훅을 사용해서 할머니의 데이터(용돈)를 받아 사용할 수 있다. Grandmama.js - createContext( 안에 손주에게 보내줄 데이터의 초기값 ) 을 넣어둔다. - value 변수로 = useMemo( (에) => 데이터를 담아 캐싱) 해두어야 매번 새로고침시 리렌더링을 방지할 수 있다. - Provider 가 연결다리 역할이다. 그래야 손주한테 보낼 수 있다. Parent.js 아무것도 모르고 있음 Sonjoo.. useRef 관련 정리 헷갈리는 useRef 정리.. React에서 useRef를 사용하는 경우는 다음과 같다. useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. 1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우. - 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다. //InputTest.js import React, { useState, useRef } from 'react'; function InputTest() { const [text, setText] = useState(''); const nameInput = useRef(); const onChange = e => { setText(e.target.value) }; const onReset = () => { s.. react 복습 일지- 1 - npm start 오류 ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app 위의 오류가 발생 시 해결 방법. 다음과 같은 에러 메시지 발생 시 해결 방법 1. package.json 파일을 열고, Ctrl + S 로 저장 2. eslint-config-react-app 버전을 6으로 낮춰보기 // 현재 버전 삭제 yarn remove eslint-config-react-app // versin6 으로 다운그레이드 설치 yarn add eslint-config-react-app@6 React 공부 기록 일지 - 1 React의 기본적이 개념을 공부하고 프로젝트를 하나 완성하면서 기본기를 닦으려고 몇 번 시도했었다. 처음은 단어장 완성 프로젝트를 만드면서 시도해보려 했고, 이번에는 고객관리 시스템을 만드면서 시도하려 했다. 물론, 이미 많은 선배 프로그래머님들이 완성했던걸 보면서 이해하고 따라하고 실습하는 것이 목적이었기에 굳이 따지자면 따라하기만 하면 된다고 할 수 있다. 근데 코딩이 따라하기만 하면 되더냐.. 자기가 설정한 환경에 따라 무수한 오류의 변수들이 도사리고 있다. 때로는 실력이 부족해서 때로는 환경 때문에 이번에도 실패하고 말았다... 아직 실력이 부족하여 머가 문제인지도 정확히 알지 못하는 상태이다. 아래 코드는 package.json 클라이언트 쪽 파일인데 "proxy": "http://localh.. 이전 1 2 3 4 5 다음
