react4 17. useMemo를 사용하여 연산한 값 재사용하기 useMemo Hook을 사용하여 연산된 값을 재사용 1) 첫번째 파라미터 : 어떻게 연산할 지 정의하는 함수 2) 두번째 파라미터 : deps 배열 이 배열 안의 내용이 바뀌면, 첫번째 파라미터에 등록한 함수를 호출해서 값을 연산해주고 만약에 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. const count = useMemo(() => countActiveUsers(users), [users]); 2022. 7. 22. 16. useEffect를 사용하여 마운트/언마운트/업데이트 시 할 작업 설정하기 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) useEffect(() => { // 마운트 시 하는 작업을 작성 console.log('컴포넌트가 화면에 나타남'); return () => { // 언마운트 시 하는 작업을 작성 (업데이트 되기 바로 직전에 호출) console.log('컴포넌트가 화면에서 사라짐'); } }, []); useEffect 1) 첫번째 파라미터 : 함수 2) 두번째 파라미터 : 의존값이 들어있는 배열 (deps) - 만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출 마운트 시 하는 작업에 바뀌기전값이 .. 2022. 7. 21. 15. 배열 항목 수정하기 onToggle 함수를 선언 active 값에 따라 폰트의 색상 변경하는 것 구현 id값을 비교해서 id가 다르다면 그대로 두고, 같다면 active를 반전시키도록 구현 const onToggle = id => { setUsers( users.map(user => user.id === id ? { ...user, active: !user.active } : user ) ); }; App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19. 14. 배열에 항목 제거하기 filter 내장 함수()를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. (2022.07.05 - [TIL/Javascript] - 배열)를 사용하여 제거할 id값을 가진 객체를 제외한 배열을 새로 만들어준다. onRemove 함수를 선언 : App컴포넌트에서 구현하여 UserList에 넘김 → UserList에서 전달받아 → User 컴포넌트에 전달 2022. 7. 19. 이전 1 다음 반응형