React6 Redux Toolkit Redux Toolkit Redux Toolkit은 Redux를 더 편하게 사용할 수 있게 해주는 Redux에서 공식으로 제공하는 도구이다. 기존 Redux의 문제점이라고 할 수 있는 것들은 다음과 같이 생각해 볼 수 있다. 필요한 boilerplate가 많음 많은 패키지의 의존성 필요 Redux Toolkit을 사용하지 않고 기존처럼 구성한다면 액션 타입 정의 액션 함수 정의 리듀서 정의 상태값의 불변을 위한 immer 사용 비동기 처리를 위해 thunk 혹은 saga 사용 불필요한 렌더링을 막아주는 reselect 사용 등등 구성해야할 것이 상당히 많다. 하지만 Redux Toolkit을 사용한다면! saga를 제외한 (thunk는 기본적으로 내장되어 있음) 위의 기능들을 사용할 수 있다. 사용법 c.. 2021. 6. 4. Controlled Component vs UnControlled Component 리액트는 내부 상태를 'Single Source of Truth' 로 관리하는 설계원칙을 가지고 있다. 이 의미는 모든 데이터 요소를 한 곳에서만 제어하도록 하는 것이다. 보통의 HTML 엘리먼트들은 내부적으로 어떤 데이터를 가지지 않아 문제가 없지만, HTML 엘리먼트 자체적으로 데이터를 가지는 엘리먼트들인 , , 들은 사용자가 DOM에서 직접 정보를 입력하면 해당 정보를 엘리먼트가 직접 보관하므로 SST에 위배된다. Controlled Component (제어 컴포넌트) 제어 컴포넌트는 엘리먼트가 가지고 있는 컴포넌트가 직접 상태를 관리하는 컴포넌트 이다. import React, { useState } from 'react'; const ControlledComponent = () => { cons.. 2021. 5. 17. useEffect useEffect 훅은 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 업데이트 될 때 (특정 props가 바뀔 때) 사용한다. useEffect(() => { fetchUrl() }, []) 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존 값이 들어있는 배열을 넣는다. 빈 배열을 넘기게 되면 컴포넌트가 처음 나타날 때 (마운트 됐을 때) 만 useEffect에 등록한 함수가 호출 된다. 또한 useEffect는 함수를 반환할 수 있는데, 이를 cleanup 함수라고 한다. 클린업 함수는 useEffect에 대한 뒷정리를 해주는거라고 생각하면 된다. 클린업 함수 또한 의존값에 빈 배열이 들어있는 경우 컴포넌트가 사라질 때 클린업 함수 호출된다. 주로 마운트 시에 하는 작업들은 아래와 같다. props.. 2021. 2. 2. useState의 이전 상태값 useState를 사용할 때 이전 상태값을 기반으로 다음 상태값을 계산하기 위해 의존성 배열에 추가 하는 경우가 있다. function TestComponent() { const [number, setNumber] = useState(0) useEffect(() => { function onClick() { setNumber(number + 1) } }, [number]) // 의존성 배열 } 의존성 배열을 없애기 위해 상태값 변경 함수에 함수를 입력하면 이전 상태값을 매개변수로 받을 수 있다. function TestComponent() { const [number, setNumber] = useState(0) useEffect(() => { function onClick() { setNumber(pr.. 2020. 12. 28. 이전 1 2 다음
