React (20) 썸네일형 리스트형 [React] Custom Hooks 1. Custom Hook -여러 컴포넌트에서 반복되는 로직을 함수로 추출하여 재사용할 수 있다. -로직 공유의 유연성을 제공하여 복잡한 로직을 간단한 인터페이스로 추상화하거나 복잡하게 뒤엉킨 컴포넌트를 풀어내는데에 도움을 준다. -*코드를 작성할 때마다 매번 바로 hook으로 분리해야하는 강박을 가질 필요 없다. 커스텀 훅의 장점과 목적에 맞게 사용하면 된다. -커스텀 훅은 일반 자바스크립트 함수와 똑같다. 다만 리액트에서 사용할 수 있게 리액트 훅 디자인을 따르도록 몇가지 규칙이 존재한다. 1) 함수 이름 앞에 use를 붙여서 이 함수가 훅이라는 것을 리액트가 알게 한다. 2) 전역 스콥에서 정의하며 함수 내부에서 다른 훅을 호출할 수 있다. (일반 함수 내부에서는 리액트 내장 훅을 호출할 수 없음).. [React] React.lazy() & <Suspense /> 1. Code Spliting -리액트 렌더링 최적화와 관련 있는 내용이다. -많은 모듈들이 번들링 된 자바스크립트는 무겁다. 이는 렌더링을 지연시킨다. -페이지 로딩 속도를 개선하기 위해 코드 분할 아이디어가 도입되었다. -렌더링 속도가 느린 페이지를 파악하여 해당 페이지에서 사용되는 코드 번들을 분할한 뒤에 당장 뷰를 그리는데에 필요한 코드만 불러오고 나머지는 나중에 불러온다. -이를 위해 모듈을 동적으로 불러오는 기술이 요구된다. *참고로 라이브러리 등 외부 모듈을 로드할 때에는 필요한 코드 몇 개만 가져다 쓰는 식으로 개발해야한다. 해당 모듈의 모든 코드를 로드하면 앱의 크기가 방대해진다. import _ from 'lodash'; _.find([]); // 이렇게 lodash 라이브러리를 전체를.. [React ]리액트 버전 18 리액트가 버전 18로 업데이트 되면서 콘솔 창에 이전에 보이지 않았던 경고문이 나타나기 시작했다. 경고문은 이제 React는 버전 18 이후로 ReactDOM.render를 지원하지 않는다는 내용을 담고 있다. const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); 에서 앞으로는 import { createRoot } from "react-dom/client"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( ); 와 같이 createRoot API를 사용한다. (React.. [REACT] useMemo & useCallback (+React.memo) 개요 리액트는 기본적으로 빠른 UI를 제공한다. 그래서 최적화에 대해 늘 강박적으로 스트레스 받지 않아도 된다. 그러나 매우 큰 규모의 프로젝트를 진행할 때 리액트 애플리케이션 속도를 개선하기 위한 몇가지 기능을 알아두면 좋다. 규모가 큰 앱은 처리하는 데이터 양이 많다. 이는 리렌더링, 즉 UI를 최신화할 때 처리하는 DOM 작업 비용을 증가시킨다. 최적화는 이런 불필요한 작업의 발생을 방지하는 것에 초점을 둔다. 특정 상태값이 변화할 때 함수형 컴포넌트가 리렌더링 된다는 것은 DOM을 리턴하는 함수가 재실행 된다는 것이다. 이때 함수 내에서 정의된 다른 변수나 함수들 또한 모두 재선언된다. 매번 이와같은 작업을 반복하는 것은 매우 비효율적이다. useEffect에서 공부했듯이 리액트는 성능 최적화를 .. [REACT] Redux 1. Props Drilling 이슈와 관심사 분리(Separation of Concern) -A 컴포넌트에서 관리하는 state 값을 I 컴포넌트로 전달하고 싶으면 props로 C와 G를 거쳐 데이터를 전달해주어야 한다. -이때 C와 G 또한 이 데이터를 소유하게 되는데, 이는 만약 프로젝트의 규모가 점점 커지게 되면 복잡도를 높인다. -커플링된 여러 컴포넌트들은 상대 컴포넌트에 대한 로직을 가지고 있다. 한 컴포넌트에서 다른 컴포넌트의 상태를 설명해야하는 것은 서로를 의존적으로 만든다. -리덕스는 C 컴포넌트가 I 컴포넌트에 대해서 어떠한 정보도 가질 수 없게 해준다. 연관된 각 컴포넌트들을 디커플링해준다. 그러면 우리는 해당 컴포넌트와 state 각각에만 집중할 수 있다. 2. 전역 상태 저장소 -.. [REACT] useRef() 1. useRef() 란? -"useRef is a React Hook that lets you reference a value that’s not needed for rendering." -함수형 컴포넌트에서 DOM을 직접 조작 할 때 사용하는 훅이다. -HTML 요소에 스타일을 적용할 때 CSS 셀렉터로 사용하는 id 속성처럼 리액트에서도 HTML 엘리먼트 또는 리액트 컴포넌트에 이름을 다는 방법이다. -ref(reference)는 DOM reference, 즉 리액트 DOM 엘리먼트의 주소값이다. (포인터) -리액트 컴포넌트 내에서도 JSX로 DOM에 id를 삽입할 수 있으나 해당 컴포넌트를 여러개 사용하면 id가 중복되는 오류가 발생한다. 하지만 레퍼런스 훅은 전역적으로 작동하지 않고 컴포넌트 내.. [REACT] Styled-Components & Storybook 1. Styled-components -리액트 컴포넌트의 CSS는 HTML과 동일하게 CSS파일을 임포트해서 사용하거나 컴포넌트의 style 속성값으로 직접 지정 할 수 있다. -하지만 컴포넌트 기반의 개발 방식(Component Driven Development)인 리액트에서 CSS 또한 컴포넌트 단위로 다루면 코드를 관리하기가 더욱 쉽다. *설정 { "resolutions": { "styled-components": "^5" } } // package.json에 위 코드를 추가하도록 권장됨. 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여주는 기능임. -Styled components 예시 * { margin: 0.5rem; } button { padding: 1rem; .. [REACT] Life Cycle & Hooks (feat. useEffect) 1. Component Life Cyle -리액트 컴포넌트는 사용자와의 상호작용에 따라 생성되고, 변경되고, 사라진다. 이를 컴포넌트의 수명주기라 부른다. -컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝나게 된다. -아래 이미지와 같이 라이프사이클은 마운트-업데이트-언마운트, 세 가지 단계로 일어난다. ->마운트: 컴포넌트가 생성되고 DOM에 추가되어 웹 브라우저 상에 나타난다 ->언마운트: DOM에서 컴포넌트가 제거되어 화면에서 사라진다. ->업데이트: 컴포넌트 정보가 업데이트되고 리렌더링이 일어남 *업데이트는 1.state가 바뀔 때 => 2.props가 바뀔 때 => 3.부모 컴포넌트가 리렌더링 될 때 일어난다. -각 단계마다 요구되는 작업이 있을 수 있.. 이전 1 2 3 다음
