dukDukz

App.js import './App.css'; import React from 'react'; import CounterContainer from './containers/CounterContainer'; function App() { return ( ); } export default App; 카운터를 구현하기 위해 redux 를 사용해보자. 폴더 트리를 확인해보자 index.js App.js components > Counter.js containers > CounterContainer.js modules > index.js modules > counter.js 중요한 것만 보자면 이렇게 되어있다. 1. modules > counter.js 리듀서가 있는 곳이다. /* eslint-disable d..

import React, { useReducer, useState } from "react"; const ACTIONS = { INCREMENT: "increament", DECREMENT: "decreament" }; function reducer(state, action) { switch (action.type) { case ACTIONS.INCREMENT: return { count: state.count + 1 }; case ACTIONS.DECREMENT: return { count: state.count - 1 }; default: return state; } } export default function App() { const [state, dispatch] = useReducer(redu..

useCallback은 useMemo 와 비슷한 훅이다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 컴포넌트에 함수를 선언하면 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 크게 리소스를 낭비하지는 않지만, useCallback을 어떻게 쓸지는 알아놔야 한다. 컴포넌트에서 props 가 바뀌지 않았으면 Virtual DOM 에 새로 렌더링하는 것 조차 하지 않고 컴포넌트의 결과물을 재사용 하는 최적화 작업을 할건데요, 이 작업을 하려면, 함수를 재사용하는것이 필수입니다. App.js import React, { useState, useCallback } from "react"; import List..

성능 최적화를 위해 연산된 값을 재사용하는 방법을 알아보자 이때 useMemo 를 사용하게 된다. 1. active 값이 true 인 사용자 수를 세어보자 이전 코드에서 2022.01.25 - [수업/React] - [React] 배열 수정 하기 [React] 배열 수정 하기 2022.01.25 - [수업/React] - [React] 배열에서 항목 삭제하기 [React] 배열에서 항목 삭제하기 배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전 dukdukz.tistory.com 추가된 내용을 보자 App.js import React, { useRef, useState } from 'react'; import UserList from '...

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다. 그리고, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다. 주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다. props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이브러리 사용 (D3, Vi..

import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [count, setCount] = useState(1); const [name, setName] = useState(""); const handleCountUpdate = () => { setCount(count + 1); }; const handleInputChange = (e) => { setName(e.target.value); }; // 렌더링 될때 마다 매번 실행됨 useEffect(() => { console.log("렌더링 됨!"); }); // 마운트 될때 + count 가 업데이트 됐을 때 실행되게 ..

2022.01.25 - [수업/React] - [React] 배열에서 항목 삭제하기 [React] 배열에서 항목 삭제하기 배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전편을 보고오면 2022.01.25 - [수업/React] - [React] 배열에 항목 추가하기 [React] 배열에 항목 dukdukz.tistory.com 삭제와 마찬가지로 수정시에도 배열 원소 값의 id가 필요하다. 추가된 부분만 보겠다. const onToggle = (id) => { setUsers( users.map((user) => (user.id === id ? { ...user, active: !user.active } : user)), ); }; retu..

배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전편을 보고오면 2022.01.25 - [수업/React] - [React] 배열에 항목 추가하기 [React] 배열에 항목 추가하기 App.js import React, { useRef, useState } from 'react'; import './App.css'; import UserList from './\bUserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = u.. dukdukz.tistory.com 코드가 이어지니까... UserList.js 부분에 추가할 부분이 있다..