뇌 채우기 공간

useCallback으로 이전에 만들었던 함수 재사용 하기 컴포넌트가 리렌더링 될때마다 새로운 함수를 계속 만들고 있는 문제 -> 함수를 새로 만드는 것은 메모리도 cpu도 많이 차지하지는 않기 때문에 그 자체만으로 부하가 걸리진 않는다. 그럼에도 한번 만든 함수를 재사용할 수 있다면 재사용 하는게 좋다. 사용법 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ); 이렇게 useCallback으로 감싸준다 그러면 deps에 넣은 값이 바뀔때만 함수가 새로 만들어진다. 여기서는 inputs가 바뀔때만 함수가 새로 만들어진다. 이렇게만 ..

useMemo라는 hook을 사용해서 연산된 값을 저장해놓을 수 있다. 성능최적화에 쓰인다. 참고 블로그 : 벨로퍼트 function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } 활성 사용자 수를 알게 하기 위해서 함수를 만들었다. 이 함수는 이름을 눌러서 초록색이 된 사용자만 세면 된다. 그런데 문제는 input값이 바뀔때에도 저 함수가 호출되는 것이다. input 값이 바뀔때에는 저 함수가 실행될 필요가 없다. const count = countActiveUsers(users); const count = useMemo(() => countActiveU..

1. 마운트 React.useEffect(()=>{ console.log("a"); },[]); 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 위와같이 두번째 파라미터로 비어있는 배열을 넣는다면 클래스형에서 ComponentDidMount()와 마찬가지로 처음에 불러올때 중괄호 안의 함수가 실행된다. 2. 언마운트 cleanup함수라고 한다. React.useEffect(()=>{ console.log("a"); return()=>{ console.log("b"); } },[]); 컴포넌트가 사라질 때 return안의 함수가 실행된다. 3. deps에 특정값 넣기 deps 에 특정 값을 넣게 된다면 아래의 상황에서 호출이 된다. 컴포넌트 처음 마운트될때 저장..

const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(user => user.id !== id)); }; users의 배열에서 user.id가 일치하지 않는 원소만 추출해서 새로운 배열을 만든다. 이것을 리덕스 모듈에서도 활용할 수 있겠다.

이제까지 리액트에서 내가 배열을 렌더링할때는 이런 경우이다. 메인페이지에서 상품 목록을 가지고 올떄 위와 같은 페이지에서 상품 하나를 컴포넌트로 만들어서 , 페이지에서 상품 정보를 가지고 있는 배열을 map돌리는 것이다. {product_list.map((p) => { return ( ); })} 여기서 map을 돌릴때 꼭 key가 있어야한다. key가 없으면 추가나 삭제가 일어날때 매우 비효율 적인 작업이 일어난다. 예를 들어 [a, b, c, d] 배열에 z를 중간에 넣어 [a, b, z, c, d]로 만들고 싶다면 c가 z로 바뀌고, d가 c로 바뀌고 d가 새로 생긴다. 그 후 a를 삭제하고 싶으면 a가 b로 바뀌고 b가 z로 , c가 d로 바뀌고 마지막에 있던 d가 사라진다. 하지만 key가 있으..