React

...rest props 전달하기

component/Button.js function Button({ children, size, color, outline, fullWidth, onClick }) { return ( {children} ); } 여기서 이벤트를 더 추가하게 된다면 function Button({ children, size, color, outline, fullWidth, onClick, onMouseMove }) { return ( {children} ); } 이런 식으로 필요한 이벤트가 있을 때 마다 매번 이렇게 넣어주게 되는 것은 번거롭다. 이러한 문제를 해결해 줄 수 있는 문법이 바로 spread 와 rest 이다. function Button({ children, size, color, outline, fullW..

LifeCycle(생명주기) 메서드

LifeCycle Method 는 '생명주기 메서드' 라고 부른다. 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메서드이다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있는데, useEffect 와 비슷하다고 생각하면 된다. 앞으로 사용할 일이 별로 없을 것이므로 많은 시간을 쏟지 않길 권장하며, 다만 어떤 것들이 있는지 알아만 두고 나중에 사용해야 할 일이 있다면 메뉴얼을 보고 사용할 수 있을 정도로만 학습하면 된다. 마운트 마운트될 때 발생하는 생명주기 constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 (생성자 메서드) getDrivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용 rende..

Class형 컴포넌트

이제는 잘 사용하지 않지만, 함수형 컴포넌트+Hooks로 못하는 작업이 있다. 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고 React-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 써야하는 일이 종종 있다. 클래스형 컴포넌트 생성 클래스형 컴포넌트에서는 render( ) 메서드가 꼭 있어야 한다. 이 메서드에서 렌더링 하고 싶은 JSX 를 반환하면 된다. props 를 조회해야할 때에는 this.props 를 조회하면 된다. defaultProps 를 설정하는 것은 이전 함수형 컴포넌트에서 했을 때와 똑같이 해도 되고, 클래스 내부에 static 키워드와 함께 선언할 수도 있다. import..

Immer 로 불변성 관리하기

불변성 관리 리액트에서 배열이나 객체를 업데이트 해야할 때에는 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야 한다. 배열도 마찬가지로 push, splice 등의 함수를 사용하거나 n번째 항목을 직접 수정하면 안되고 concat, filter, map 등의 함수를 사용해야 한다. immer 를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성을 유지 해준다. 🚨 Immer는 편하지만 성능적으로 Immer를 사용하지 않은 코드가 조금 더 빠르다. 자주 사용하면 오히려 사용하지 않았을 때 보다 속도가 더 느려진다고 한다. 따라서 불변성을 유지하기에 데이터의 구조가 복잡해지는 상황에 사용하는 것을 권장하고, immer 대신 ... 스프레드 연산자를 사용하는 것을 추천한다. 예시 // 값을 직..

Context API를 사용한 전역값 관리

React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 이 Props 와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트 → 즉, 위에서 아래, 한쪽으로 데이터가 흐르게 된다. 만약 다른 컴포넌트에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶은 경우 또는 다른 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶은 경우가 발생한다면 어떻게 해야할까? React에서 데이터는 위에서 아래로 흐르게 되므로 사용하고 싶은 데이터와 이 데이터를 사용할 컴포넌트의 공통 부모 컴포넌트에 State를 만들고, 사용하고자 하는 데이터를 Props를 전달하면 이 문제를 해결할 수 있다. 하지만 이처럼 컴포넌트 사이에 공유되는 데..

Custom Hooks 만들기

커스텀 훅을 만들어서 반복되는 로직을 쉽게 재사용할 수 있다. 커스텀 훅은 파일을 따로 만들어서 그 안에 함수를 작성해서 사용한다. useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현하고, 컴포넌트에서 사용하고 싶은 값들을 반환한다. 예시 함수에서 관리할 form 에 대하여 초기값을 파라미터(initialForm)로 받아오고, form 을 통해 상태도 조회할 수 있다. onChange 를 통해 변경되는 이벤트를 관리한다. 초기화하고 싶다면 reset 을 호출하면 된다. useInputs.js function useInputs(initialForm) { const [form, setForm] = useState(initialForm..

useReducer

[React/리액트] useReducer 를 사용하여 상태 업데이트 로직 분리하기 상태 관리 Hook 함수 useState: 설정하고 싶은 새로운 상태를 직접 지정하여 상태를 업데이트 useReducer: 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있다 useState 와 다르게 상태 업데이트 로직을 바깥에 작성할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수도 있다. 현재 컴포넌트가 아닌 다른 곳에 state 를 저장하고 싶을 때 유용하다. reducer reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. (상태 업데이트 함수) 반환해주는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. 새로운 상태를 만들 때는 불변성을 지켜주어야 한다. ..

함수형 업데이트 useState

[React/리액트] 함수형 업데이트 useState const onCreate = useCallback(() => { const user = { id: nextId.current, username, email, }; setUsers([...users, user]); setInputs({ username: "", email: "", }); nextId.current += 1; }, [username, email, users]); // users 참조 (이전글 참고) React.memo 를 통해서 불필요한 렌더링을 방지하였는데도 작동할 때 같이 리렌더링 되는 경우에는 해당 컴포넌트에 같이 참조되는 값이 있기 때문이다. 따라서 이럴 때는 useState 를 이용한 함수 업데이트를 해주면 된다. 다른 컴포넌트..

컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)

[React/리액트] 리액트 컴포넌트 최적화 정리 (useMemo/useCallback/React.memo) useMemo : 연산된 값을 재사용 useCallback : 특정 함수 재사용 React.memo : 컴포넌트 렌더링 결과물을 재사용 상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때문에 useCallback 의 deps 에 넣지 않아도 된다. useMemo, useCallback, React.memo 는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 사용하는 것이 좋다. (🚨 불필요한 비교 & 버그 발생)

React.memo 를 사용한 컴포넌트 리렌더링 방지

[React/리액트] React.memo 를 사용한 컴포넌트 리렌더링 방지 React.memo 를 이용하면 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 이 함수를 사용하면 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링 하도록 설정해줄 수 있다. 사용법 React.memo( ) 안에 컴포넌트(함수)를 파라미터로 넣는다. export default React.memo(CreateUser); CreateUser.js import React from 'react'; const CreateUser = ({ username, email, onChange, onCreate }) => { return ( 등록 ); }; export default ..

useCallback 으로 함수 재사용하기

확장프로그램 React devtools 설치 개발자 도구를 통해 React 라는 탭을 통해서 현재 리액트 컴포넌트의 구성을 확인할 수 있다. 설정(톱니바퀴) - Highlight Updates 를 체크하면 렌더링이 발생하는 곳을 확인 할 수 있다. useCallback useCallback 은 useMemo 를 기반으로 만들어졌다. useMemo 는 특정 결과값을 재사용할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 사용법 useCallback 사용법도 동일하게 첫번째 파라미터로 넘어온 함수를, 두번째 파라미터로 넘어온 배열 내의 값이 변경될 때 까지 저장해놓고 재사용할 수 있게 해준다. const memoizedCallback = useCal..

useMemo 를 사용하여 연산값 재사용하기

useMemo useMemo → Memoization Memoization 이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. 만약에, 함수가 내부적으로 매우 복잡한 연산을 수행해서 결과값을 리턴하는데 시간이 몇초 이상 오래 걸린다면 컴포넌트의 리렌더링이 필요할 때 마다 함수가 호출되므로 사용자는 지속적으로 UI에서 지연이 발생하는 경험하게 될 것이다. 이를 memorization 기법을 적용하면 React의 useMemo Hook 함수를 이용하여 개선시킬 수 있다. 사용법 첫번째 파라미터에는 (어떻..