728x90 리액트3 [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. [React] forwardRef 사용법 (useRef, useImperativeHandle...) (함수형 컴포넌트에서) 부모 컴포넌트에서 자식 컴포넌트 안의 DOM element에 접근하고 싶다면? forwardRef를 사용해야 한다. 회사에서 프로젝트를 진행하던 중, 부모 컴포넌트에서 자식 컴포넌트 안의 함수를 사용해야 하는 경우가 생겼다. 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하려면 props를 사용하면 되었지만 그 반대의 경우는 경험해 본 적이 없어서 어떤 방식이 있는지 찾아보다 forwardRef라는 Hook을 발견하였다. 📌 forwardRef를 사용해야 하는 이유 ? 함수형 컴포넌트는 인스턴스가 없기 때문에 ref 속성을 사용할 수 없다. 따라서, 함수형 컴포넌트를 forwardRef로 감싸주게 되면 ref를 사용할 수 있다. (+ 클래스로 선언된 컴포넌트들은 인스턴스를 가지기 때.. 2023. 2. 5. [React] useEffect 총정리 React Hook인 useEffect에 대해서 정리해보겠습니다 📌 useEffect ? React Hooks 중 하나인 useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 실행할 수 있도록 하는 Hook이다. 왜 Effect라는 이름인가? 컴포넌트의 핵심 기능인 html 렌더링 이후에 동작하기 때문이다. 즉, 핵심 기능과 상관 없는 Side Effect(=함수의 핵심 기능과 상관 없는 부가기능)이라는 의미이다. useEffect( () => { 실행할 코드 }, [실행조건]); → 콜백 함수 안에 실행할 코드를 적고, 두 번째 파라미터로 배열 형태의 dependency를 넣을 수 있는데 dependency에는 변수나 state 같은 것들을 넣을 수 있다. 이는 실행조건이라고 보면 된다. 📌 Co.. 2023. 1. 8. 이전 1 다음 728x90
