[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)

리액트는 보통 부모 -> 자식 방향의 단방향 정보전달의 구조를 이루고 있다. 따라서 자식 컴포넌트에서 정보가 변하지 않고 부모 컴포넌트에서만 값이 변해도 자식 컴포넌트가 같이 렌더링 되는 불필요한 과정이 있다. 이를 해결하기 위해서 memo, useMemo, useCallback 등을 사용할 수 있는데 실제로 리랜더링을 얼마나 막아줄 수 있는지와 props로 객체가 전달되었을 경우에 대한 이해를 여러가지 케이스들을 실험해 보며 정리해 보자. 1. 세팅 먼저 간단한 프로젝트를 CRA를 활용해서 만들어 보았다! npx create-react-app react-render --template typescript components라는 폴더를 만들고 간단하게 부모 컴포넌트, 자식 컴포넌트를 만들어준다. //Ap..

→2024.04.12

FrontEnd/Deep Dive

[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현

이전 글에서 소개했듯이 정말 오랜 기간동안 리액트 애플리케이션의 상태관리는 리덕스에 의존했다. 심지어 일부 개발자들은 리액트 + 리액트를 하나의 프레임워크 정도로 생각할 정도였다. 하지만 지금은 Context API , useReducer , useState의 등장으로 리덕스 외의 다른 상태관리 라이브러리를 선택하는 경우가 많아졌다고 한다. ( 리덕스가 조금 수고스럽긴 하다) useState 해당 훅의 등장으로 리액트에서는 여러 컴포넌트에 걸쳐 동일한 인터페이스의 상태를 생성하고 관리할 수 있다. 아래와 같은 훅이 있다고 생각해보자. const useCounter = () => { const [counter, setCounter] = React.useState(0); function increase() ..

→2024.01.03

FrontEnd/Deep Dive

[React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버

리액트의 가장 큰 특징중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다! 이러한 가상 DOM은 왜 만들어졌고 실제 DOM과는 어떤차이가 있는지 알아보자. DOM(Document Object Model) 웹페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떠한 방식으로 보여줄지에 대한 정보가 담겨있다. 브라우저가 웹 사이트 접근 요청을 받고 화면은 그리는 일은 아래의 순서대로 일어난다. 1. 브라우저가 URL에서 HTML파일을 다운로드 2. HTML을 파싱하여 DOM 트리를 만든다. 3. (2)번과정 진행중 CSS파일을 만나면 CSS파일을 다운로드 4. CSS를 파싱하여 CSSOM을 구성 5. (2)번 DOM노드를 순회한다. (display : none 과 같은 사용자에게 안..

→2023.12.18

오류들

[Figma,React] SVG이미지 겹침 현상

react에서 svg파일들을 불러와서 쓰려는데 모든 이미지가 한가지 이미지로만 나오는 현상이 발생했다. Figma에서 SVG 파일을 다운로드 해서 사용하고 있었는데 왜 위와같은 현상이 발생하는지 찾아보니 위 svg 파일을 보면 id값을 pattern1을 사용하는 것으로 되어있다. Figma에서 이미지들을 다운로드 받으면 해당 id들이 모두 pattern0으로 되어 있어서 이런 문제가 발생하였다. 따라서 해당 fill과 id를 모두 바꿔주면 해결된다!!

→2023.11.24

FrontEnd/React

[React] 토스트 알람창으로 alert 대체하기

개발을 하다보면 alert를 활용하여 알람을 띄어주는 경우가 생긴다. 이를 아래와 같이 조금 더 예쁘게 꾸며보자. react-toastify 라이브러리를 활용하면 위와같은 토스트를 쉽게 만들 수 있다. 사용방법도 매우 간단하다. import React from 'react'; import 'react-toastify/dist/ReactToastify.css'; import { toast } from 'react-toastify'; import { ToastContainer } from 'react-toastify'; function App() { const notify = () => toast.warning('Wow so easy!'); return ( Notify! ); } export default ..

→2023.02.03

FrontEnd/React

[React] 스크롤 이벤트 활용하기

이번에 프로젝트를 진행하다가 스크롤 이벤트를 활용할 상황이 생겨서 공부하게 되었다. 원래 스크롤이벤트를 활용하기 위해서는 window.addEventListener 함수를 활용하여 이벤트를 등록할 수 있다. 이를 훅으로 만들어 두면 보다 편하게 사용할 수 있다. import { useEffect } from 'react'; // 스크롤이벤트 등록해주는 훅 export const useWindowScrollEvent = ( listener: (this: Window, ev: Event) => any, ) => { useEffect(() => { window.addEventListener('scroll', listener); return () => { window.removeEventListener('scr..

→2023.02.01