728x90 Frontend28 리액트 - useReducer useReducer 액션이라는 객체를 이용해서 업데이트하는 상태 관리 hook 컴포넌트 밖으로 상태 업데이트 로직을 분리할 수 있음 보다 복잡한 로직처리가 가능! 리액트 문서에 따르면 이전 값이 다음 값에 종속되는 경우가 있으면 선호된다고 나온다 기존의 값이 있고 그 값이 업데이트 되는 경우라면 선호될 것으로 예상된다. const [state, dispatch] = useReducer(reducer, initialArg, init); const [현재상태, 액션을 발생시키는 함수] = userReducer(reducer, 초기값(기본값) ) reducer : 상태를 업데이트 하는 함수 import React, { useState, useReducer } from 'react'; function reduc.. 2022. 10. 22. 리액트 - useMemo, useCallback, React.memo 알아보기 useMemo useMemo(function(), deps):특정 값이 바뀔때만 특정 함수를 실행해서 연산을 실행 deps : dependecies로 해당 내용이 변경되면 값을 연산해주고 그렇지 않으면 캐싱된 값을 사용한다. 하단 코드는 액티브 유저를 카운트 하는 경우에만 해당 컴포넌트를 리렌더링 해야하는데 유저를 추가한다거나 다른 컴포넌트에서 동작을 하는 경우에도 해당 컴포넌트가 리렌더링이된다. 이 경우에는 해당 함수의 값이 바뀔 때만 함수를 실행시키고 싶으므로 useMemo를 사용하면 된다. import React, {useRef, useState, useEffect, useMemo, useCallback} from 'react' function countActiveUsers(users){ conso.. 2022. 10. 20. 리액트 배열 추가, 삭제, 수정 배열 값을 업데이트를 해야하는 경우에도 객체와 동일하게 불변성을 지키야한다. push, splice, sort 와 같이 배열을 직접적으로 제어 할 수 있는 함수를 쓰면 안된다! 상태관리를 위해 동일하게 useState 를 사용하면 된다. const [users, setUsers] = useState([ 생략 ]) Vue로 작업을 진행할때는 deep clone을 하지 않는다면 서로 값을 계속 공유하는 현상이 일어나는 반면 리액트는 이를 제어 할 수 있는 점이 상당히 편리한 점이 될 것 같다. ( 뭐 좀 더 써봐야 알겟지만…! ) 배열 추가 새로운 배열 원소를 생성 useState로 기존 배열을 복사한 후 생성한 배열 원소를 추가한다. spread concat const onCreate = () =>{ //.. 2022. 10. 5. 리액트 입문 강의 정리 프론트엔드 이직시에 리액트 과제가 정말 압도적으로 많다. 그냥 여지것 본 모든 것들은 다 리액트였던 것 같다.. 그러므로 나도 뛰어든다 리액트! 아주 예전에 리액트 강의를 사둔 것이 있기에 해당 강의를 보고 정리하려고한다. 최종으로는 지금 vue.js로 구현한 것과 동일하게 구현할 예정이다. 과연 얼마나 걸릴지.. 리액트는 vue.js와 다르게 library이기 때문에 script 상단에 import React from 'react';를 꼭 해주어야한다 컴포넌트간 데이터 전달vue.js와 동일한 props을 사용하지만 사용법이 약간 다르다. 이때 props은 객체로 넘어 온다. react는 함수형으로 컴포넌트를 구성하므로 전달할 props을 매개변수로 받을 수 있다. props를 사용하여 전달 //---.. 2022. 9. 28. 이전 1 2 3 4 5 다음 728x90 반응형
