SOOM_BLOG [숨숨 블로그]

💡 클라이언트 사이드 렌더링(CSR)이란? 페이지의 내용을 브라우저에서 그리는 클라이언트 사이드 렌더링(CSR)을 내장하고 있다. 따라서 사용자가 페이지에 진입 후 (클라이언트 쪽에서) 페이지 내 자바스크립트 코드가 실행될 때 데이터를 가져올 수 있으므로 데이터를 가져오는 시간을 사용자는 기다린 후 화면을 볼 수 있다. 이러한 경우가 큰 문제가 되는건 아니지만 검색 엔진 최적화(SEO)가 중요한 경우 문제가 될 수 있다. 로그인을 해야만 볼 수 있는 화면 같은 경우 검색 엔진이 볼 수 없기에 검색 엔진 최적화(SEO)가 중요하지 않지만, 콘텐츠가 많이 공개되어 있는 화면 같은 경우 검색 엔진 최적화(SEO)가 중요하다! 검색 엔진 크롤러는 서버에서 들어온 비어있는 초기 HTML만 바라볼 수 있기 떄문에 ..

useCallback() 이란? 기본적으로 컴포넌트 실행 전반에 걸친 함수를 저장하는 hook이다. react에 함수를 저장하여 매 실행마다 재생성하지 않도록 한다. 메모리 내의 동일한 위치 중 하나에 저장되므로 동일한 함수(객체)인지 비교가 가능하다. useCallback(() => {...}, [dependencies]) 첫 번째 인수 : 저장할 함수 두 번째 인수 : useCallback 호출의 dependency 배열 (useEffect와 동일) useCallback을 왜 사용해야 할까? js 함수 동등성 의존 배열로 함수를 넘길 때 (클로져 개념 알기) React.memo와 함께 사용하기 [참고자료] 클로져란?!! useCallback 사용 이유 상세 페이지1 useCallback 사용 이유 상..

리액트가 어떻게 작동하는가? React는 유저 인터페이스를 만들기 위한 JavaScript 라이브러리이다. React는 Component로 유저 인터페이스를 만들고, Component를 활용하여 유저 인터페이스를 효율적으로 구축하고 업데이트 한다. - React는 어떻게 되어 있나..? React는 Component를 관리하는 라이브러리로 Component를 관리하고 Component의 현재 state와 이전의 state의 차이점을 찾아낼 수 있다. React가 다루는 데이터로는 Component에 영향을 미치는 Props, State, Context 이다. React가 Component를 관리하는 과정을 보면 (예시), React는 데이터(props, state, context)..

React Portals 컴포넌트를 렌더링 시킬 때 렌더링 시킬 DOM을 선택하여 부모 컴포넌트의 바깥에서도 렌더링 할 수 있게 해주는 기능 modal은 페이지 위의 오버레이이며, 논리적으로 모든 것 위에 위치해야한다. 스타일링을 통해 div가 modal처럼 보이게 하는 것은 바람직하지 않음. 이러한 부분을 해결하기 위해 React Portals를 배워보자. portal 이용 방법 컴포넌트를 이식할 위치가 필요함. index.html 에 이식 위치를 정한다. (index.html에서는 다양한 컴포넌트에 대한 여러 루트들을 만들 수 있다.) 해당 위치에 포털이 필요함을 컴포넌트에게 알려야 한다. 리액트 노드 : 렌더링 되어야 하는 리액트 노드 (반드시 JSX여야 한다) 포인터 : 요소들이 렌더링 되어야 하..

useImperativeHandle? useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes) 한다. useImperativeHandle는 forwardRef와 함께 사용한다. useImperativeHandle(ref, createHandle, [deps]) ref : 프로퍼티를 부여할 ref. createHandle : 객체를 리턴하는 함수. 해당 객체에 추가하고 싶은 프로퍼티를 정의하면 됨. 예제) 부모 컴포넌트 import React, { useState, useRef } from 'react'; import Input from '../UI/Input/Input'; const ParentCompo = (props) => { co..

CONTEXT 여러개의 컴포넌트에 영향을 미치는 state를 관리할 때, prop drilling(=prop chain)을 필요로 하는데, 이런 경우 prop으로 state를 계속해서 전달하게 되면 관리하기가 매우 어려워진다. 이런 어려움을 해결하기 위해 context를 배워보자. CONTEXT는 모든 수준에서 props를 수동으로 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공한다. 💡 CONTEXT를 사용해보자 1. createContext()를 통해 context 생성 전역 데이터를 관리하기 위해서 React 패키지에서 제공하는 createContext라는 함수를 사용한다. 개념적으로 React Context는 전역 데이터를 담고 있는 하나의 저장 공간이라고 생각할 수 ..