react28 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://scrap.kakaocdn.net/dn/bwAXGi/hyWZd8hAoc/KPh5y8NN2JFlhXHpSD77Lk/img.png?width=652&height=652&face=0_0_652_652,https://scrap.kakaocdn.net/dn/cfqrX8/hyWVXMPDaB/cvhjWV7QkA4aDczZO4LUDK/img.png?width=652&height=652&face=0_0_.. 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. 24.08.20 지금까지 배운 React 요약 JSXJavaScript에서 XML을 추가한 확장한 문법 JSX에서 지켜야할 문법1. JSX 파일 하나에는 한개의 function 2. return타입에 들어가는 태그는 최상위 태그는 하나 혹은 사용 가능3. 자바스크립트 표현식은 JSX내부에서 {}로 감싸주기4. 복잡한 자바스크립트 로직은 사용이 불가능, 간단한 로직만 표현식에 사용 가능 복잡한 로직의 경우 JSX 밖으로 빼서 함수로 별도로 정의해서 해당 표현식에서 해당 함수를 불러오는 방법 사용!로직이 여러 줄일 경우 표현식 내에서 ()로 묶어서 출력 가능{조건문 && ()}5. 속성 및 스타일 등은 camelCase , 컴포넌트의 이름은 PascalCaseJavaScript과 혼동될 것 같은 경우 React 자체에 대체문법을 사용한다.class .. 2024. 8. 30. 이전 1 2 3 4 5 다음