react27 React : Lazy import을 통한 성능 개선 Lazy를 사용하면 웹 페이지에서 사용자가 실제로 보거나 필요로 할 때까지 리소스의 로드를 연기할 수 있다. 불필요한 네트워크 요청을 최소화하여 초기 페이지 로딩 속도를 개선할 수 있다. Lazy import { lazy, Suspense } from 'react'; const 변수명 = lazy(()=>import('파일주소'));로드되는 동안 표시할 항목 }> lazy로 로드된 컴포넌트가 로드되는 동안 보여줄 컴포넌트나 요소를 fallback 속성에 지정한다. (1) lazy와 suspense를 import한다.import { lazy, Suspense, useState} from 'react'; (2) lazy import를 통해 컴포넌트를 동적으로 가져온다.lazy import의 경우 컴포넌트.. 2024. 9. 5. React: useReducer에 대해서 이전에 useState에 대해 작성한 적이 있다. useReducer도 useState처럼 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 상태 업데이트 훅이다. useReducer의 경우 복잡한 state 로직을 다룰 때 (state 객체 안에 또 다른 state가 있을 경우 등) 유용하게 사용된다. 공식 홈페이지에서는 가급적이면 useState를 사용을 권장하고 있다. const [state, dispatch] = useReducer(reducer, initialState, [init]);state: 현재 상태 값을 나타낸다. dispatch: state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수로, action을 인자로 받아 reducer에 전달한다.action : 사용자에 의해 수.. 2024. 9. 5. React: React에서 Styled Component 사용하기 styled-components Age" data-og-host="styled-components.com" data-og-source-url="https://styled-components.com/" data-og-url="https://styled-components.com/" data-og-image="https://blog.kakaocdn.net/dna/bwAXGi/hyWZd8hAoc/AAAAAAAAAAAAAAAAAAAAAIIPlGgMKz0_ggIonGLQbHIETUkbbhuqeTy0KfYfiSL4/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=LlXfFuI7cxDduSwPkXoUZ3DbkB4%3D 2024. 9. 4. React: useEffect에 대해서 useEffect는 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있게 해주는 리액트 훅이다. useEffect가 나오기 전에는 클래스 컴포넌트에서 생성(componentDidMount), 업데이트(componentDidUpdate), 제거(componentWillUnmount) 메서드를 통해 생명주기 변화에 대응했었다. 현재는 useEffect를 통해 간편하게 사용할 수 있게 되었다. useEffectuseEffect( () => { 생성이 되었을 때 시행되는 로직 return () => {제거 되었을 때 시행되는 로직} }, [ 변화를 관찰할 props/state ]생성(mounting)은 컴포넌트가 처음 생성되어 DOM에 추가될 때를 의미하며, 제거(unmounting)은 컴포넌트가 DO.. 2024. 9. 3. React : 컴포넌트 합성이란 ? 컴포넌트 합성은 여러 개의 작은 컴포넌트를 조합하여 더 큰 기능을 수행하는 컴포넌트를 만드는 방법을 의미한다. 분리된 컴포넌트를 사용하는 쪽에서 조합해서 사용하는 방법이다. 컴포넌트 합성을 통해서 코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있다. 컴포넌트 합성 시에 중요한 것은 단일 책임 원칙, 즉 각 컴포넌트는 하나의 기능만을 담당해야한다. 컴포넌트 합성 예제한 예시로 React로 TodoList를 구현한다고 했을 때,TodoInput이라는 컴포넌트는 등록을 하는 기능을 가지고 있고TodoItem은 각 Todo의 항목을 표시하고 수정 및 완료 버튼을 제공한다. 각 Todo항목을 관리하는 기능을 가지고 있다.TodoEdit는 TodoItem에서 Todo의 수정 기능을 가지고 있다. TodoIn.. 2024. 8. 31. React에서 Web Component 사용하기 Web component는 캡슐화된 컴포넌트를 만들어 재사용이 가능할 수 있게 하는 JavaScript의 표준으로, 모든 프레임워크에서 공통으로 사용이 가능하다는 장점이 있다. 그래서 프레임워크/라이브러리의 교차 사용이 자주 발생하는 곳에서는 프레임워크 기반의 컴포넌트보다 JavaScript의 웹 컴포넌트를 사용하여 재사용성을 증가시킬 수 있다. Web Component 사용하기Web Component 파일의 경우에는 폴더를 별도로 만들어서 관리해야 한다. public 안에 폴더를 별도로 생성해서 관리하는 경우고 있고, util / lib 이라는 폴더를 따로 생성하여 관리하는 경우 등이 있다. 1. Web Component 생성 >window.customElements.define("custom-t.. 2024. 8. 30. 이전 1 2 3 4 5 다음