리액트34 [클론 코딩] Todo List 컴포넌트 성능 최적화 지난번 포스팅을 통해서 Todo List 앱을 완성시켰습니다. 하지만 최적화 과정이 없이 기능만을 구현했기에 성능 퍼포먼스는 좋다고는 할 수 없습니다. 비록 클론 코딩이지만 실제 개발에서 요구사항을 충족하는 개발에 성능 또한 중요시 여기므로 성능을 최적화 시키는 방법도 알아보겠습니다. 1. 컴포넌트 리렌더링 최적화를 해야하는 이유는 컴포넌트 리렌더링 때문입니다. 웹사이트에서 로딩이 발생하는 이유는 인터넷 대역폭 문제도 있겠지만, 우리가 겪는 로딩이 긴 사이트의 문제점은 웹 사이트의 구성 요소를 불러오는 시간 때문입니다. 즉, 화면에 그려야하는 요소가 많을수록 로딩이 길어지는 것입니다. 리액트를 처음 이야기 할 때, 컴포넌트들을 레고 조립하듯이 만든다고 소개했는데요. 이렇게 조립시킨 컴포넌트가 많아서 렌더.. 2021. 12. 23. [React] 컴포넌트 반복하기 우선 반복을 하기전에 자바스크립트의 Array.map()함수에 대해 알고 넘어가야합니다. map()함수는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 함수입니다. 이 함수를 꼭 기억해주세요. const animals = ['야옹', '멍', '짹', '삐약']; const repeat = animals.map(animal => animal.repeat(2)); console.log(repeat); 1. 배열을 컴포넌트 배열로 만들기 우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들어서 반환하는 방법을 소개해드리겠습니다. 컴포넌트를 하나 만들어줍니다. 이때 map()함수는 animals배열의 요소들을 JSX형태로 변환해주는 역할을 합니다. import React from 'reac.. 2021. 12. 7. [React] 조건부 렌더링 렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다. 1. if문을 이용한 조건부 렌더링 첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조건에 따라 return하는 컴포넌트를 다르게 설정하면 됩니다. const SayHello = props => { return Hello?; }; export default SayHello; const SayHi = props => { return Hi!; }; export default SayHi; import React from 'react'; import './App.css'; import SayHi.. 2021. 12. 6. [React] 컴포넌트에 CSS 적용하기 사용자와 상호작용 하는 로직과 인터페이스도 중요하지만 역시 외관이 눈에 띄고 쉬워야 이용하기 좋은 인터페이스라고 할 수 있습니다. 1. CSS 적용하기 우선 우리가 create-react-app을 통해 만든 리액트 프로젝트에는 App.css라는 css파일이 존재합니다. 이 파일을 열어보면 다음과 같이 구성되어있습니다. .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-co.. 2021. 11. 18. [React] Hooks - useRef 이번엔 함수형 컴포넌트에서 Ref를 사용할 수 있게 만들어주는 Hook인 useRef를 알아보겠습니다. 그 전에 Ref에 대한 설명은 아래 포스트를 참조해주세요. 2021.11.12 - [Programming/React] - ref ref 1. ref HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref bamtory29.tistory.com 1. useRef Ref를 간단하게 소개하자면 컴포넌트에 html의 id속성처럼 식별자를 붙여주는 기능이었습니다. 다만 이 기능은 클래스형에서만 사용가능했었는데요. 이를 함수형 컴포넌트에서도 사용가능하도록 만들어준 Hook.. 2021. 11. 17. [React] Hooks - useCallback 1. useCallback useCallback Hook는 지난 포스트에서 다룬 useMemo처럼 최적화를 담당하고 있습니다. 차이점은 useMemo는 컴포넌트 내부 연산을 주로 최적화 하고, useCallback은 렌더링 자체의 성능 최적화에 주로 사용됩니다. 그래서 주로 렌더링이 자주 되는 컴포넌트에서 혹은 컴포넌트가 많아지면 사용하게 됩니다. 지난번에 만들었던 컴포넌트를 통해 실습해보겠습니다. 지난번에 사용한 컴포넌트의 코드입니다. import React, {Fragment, useState, useMemo} from 'react'; const getTotal = numbers => { let total = 0; console.log('getTotal() 호출'); numbers.forEach(va.. 2021. 11. 16. 이전 1 2 3 4 5 6 다음 300x250
