React/이론공부 (13) 썸네일형 리스트형 React forwardRef forwardRef - 부모 컴포넌트에서 자식 컴포넌트의 ref 를 다루고 싶을 때 사용함 자식 컴포넌트의 값을 부모로 올리는 것이 어려우므로 ref 를 부모 컴포넌트에서 만들어서 자식에게 내려보내주어야 함. forwardRef 사용 방법 import React, { forwardRef } from "react"; const Component = forwardRef((props, ref) => { return ( ); }); export default Component; import React, { forwardRef } from "react"; const Component = (props, ref) => { return ( ); }; export default forwardRef(Component); .. React의 가상돔 (Virtual DOM) DOM (Document Object Model) - HTML 파일 내용을 토대로 만들어지고, javascript 와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현 - 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다. - DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. - DOM 은 DOM이 제공하는 API(getElementById, querySelector) 를 사용해 , 원하는 엘리먼트에 스타일, 구조 등을 조작할 수 있다. - 웹 페이지는 일종의 문서(document) 로 이루어져있다. 이 문서는 웹 브라우저를 통해 문서가 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 가상 돔 (.. React.Fragment React.Fragment 란 - 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. return ( hello World ) - 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. - 리액트가 하나의 컴포넌트 만을 리턴 할 수 있기 때문이다. React.Fragment 기본 사용법 function App() { return ( Hello, World ); } function App() { return ( Hello, World ); } 빈 태그를 사용해도 되지만, 상황에 따라서 React.Fragment 를 넣어줘야하는 경우도 있다. 예제를 확인해봅시다 React.Fragment 예제 Style 을 지정할 때 App.js fu.. React.memo React.memo 란 - 리액트에서 제공하는 고차 컴포넌트 (HOC) - Memoization 기법으로 동작한다. - 컴포넌트가 props 로 동일한 결과를 렌더링하면, React.memo 를 호출하고 결과를 메모이징 하도록 래핑하여 경우에 따라 성능을 향상시킬 수 있다. - React.memo 는 props 의 변화에만 영향을 준다. ( 함수 컴포넌트 안에서 구현한 state 나 context 의 변화에는 재렌더링 ) 고차 컴포넌트? HOC ? 어떤 컴포넌트를 인자로 받아서 최적화된 새로운 컴포넌트를 반환해주는 함수 - 최적화된 새로운 컴포넌트는 렌더링이 될 때마다 prop check 라는 과정을 거쳐서 자신의 props 의 변화를 파악한다. ( props 가 변화가 있다고 인지하면 렌더링을 하고, .. [React Hooks] useReducer useReducer 란 - state(상태) 를 관리하고 업데이트 하는 hook 인 useState 를 대체할 수 있는 Hook - useState 처럼 state를 관리하고 업데이트 할 수 있는 hook useReducer 의 매력 - 한 컴포넌트 내에서 state 를 업데이트 하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해줌 => state 업데이트 로직을 분리하며 컴포넌트 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해줌. useReducer 와 useState 의 사용 차이 useState - 관리해야 할 state 가 1개일 경우 - state가 단순한 숫자, 문자열 또는 Boolean 값일 경우 useReducer - 관리해야 할 state 가 1개 이상, .. [React Hooks] useCallback useCallback 이란 - 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수 useMemo 와 차이점 useCallback : memoization된 함수를 반환하는 특징 (함수를 반환함) useMemo : memoization 된 값을 반환해서 직관적인게 특징 (함수를 실행해버림) useCallback 의 구조 useCallback(() => { memoization 할 함수 }, [ 의존성 배열 ]) useCallback 의 예제 useCallback 기본 예제 const calculate = useCallback((num) => { return num + 1 ; }, [item]) 함수를 useCallback 으로 감싸주면 calculate 는 memoization 된 함수를 갖게.. [React Hooks] useMemo useMemo 란 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나 useMemo 의 Memo 는 Memoization 을 뜻함 memoization이란 - 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 - 자주 사용되는 값을 캐싱해두어서, 필요할 때마다 다시 계산하는게 아니라, 재사용하는 것 함수형 컴포넌트에 대해 - 함수형 컴포넌트는 렌더링 -> component 함수 호출 -> 모든 내부 변수 초기화 과정을 거친다. UseMemo 를 사용했을 때 함수형 컴포넌트 모습 const calculate = () => { return 10 } function App() { const value = useMemo(() => { .. [React Hooks] useContext & Context 배경지식 부모 컴포넌트에서 자식 컴포넌트로 props 를 통해 데이터를 전달함 하지만 그 깊이가 깊어질수록 거쳐가야 하는 컴포넌트들이 많아지고 코드를 반복적으로 작성해야하고 변수명이 바뀌면 거쳐가는 모든 컴포넌트에서 변수명을 수정해야하는 비효율적인 일들이 발생함. Context 란 - context 를 이용하면 단계마다 일일이 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 - 데이터가 필요할 때마다 props 를 통해 전달할 필요가 없이 context 를 이용해 공유함 context 는 꼭 필요할때만! - context 를 사용하면 컴포넌트를 재사용하기 어려워질 수 있음 - prop drilling 을 피하기 위한 목적이라면 component composition ( 컴포넌.. 이전 1 2 다음
