728x90 React11 [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. [Next.js] _app.js와 _document.js에 대해서 Next.js의 _app과 _document에 대해서 알아보겠습니다 📌 _app 가장 먼저 실행되는 컴포넌트 → 모든 페이지는 _app을 통해 실행됨 → 모든 페이지에서 필요한 처리를 할 수 있음 각각의 페이지가 초기화될 때 로딩되는 파일 → 자신이 원하는 로직으로 페이지를 초기화할 수 있음 위와 같은 특징들로 인해 _app의 대표적인 사용 예는 다음과 같다. 각 페이지의 공통된 레이아웃 페이지 작성 전체 앱에 Global CSS 적용 Redux Provider 설정 import "../styles/globals.css"; import type { AppProps } from "next/app"; import Layout from "../components/layout"; function MyApp({ .. 2022. 12. 26. 이전 1 2 3 다음 728x90
