FrontEnd/React
-
JSX 기본 내용 정리FrontEnd/React 2023. 2. 7. 15:29
import {React, useState, useEffect} from 'react'; export default function AddCount() { const [count, setCount] = useState(0) useEffect(() => { alert("안녕하세요") }) return ( setCount(prev => prev + 1)}>`current Count : ${count}`) } import React from 'react'; export default function HelloWorld() { return ( hello World ) } 리액트 함수형 컴포넌트의 기본형이다. HelloWorld라는 컴포넌트인데 리액트 컴포넌트에서 주의사항은 첫글자는 무조건 대문자여야한다. 코드..
-
React 비용 계산하기 - React Profiler APIFrontEnd/React 2023. 1. 8. 10:28
https://ko.reactjs.org/docs/profiler.html Profiler API – React A JavaScript library for building user interfaces ko.reactjs.org 리액트를 활용하여 애플리케이션을 만든 후에 비용을 어떻게 계산할 수 있을까? 리액트는 업데이트된 부분만 리렌더링하는 특징이 있다. 이를 위해서 렌더링할 필요가 없는 부분은 memo함수를 이용하여 메모이제이션하는 등 여러 방법을 취하고 있다. 그럼 이게 잘 동작하는지, 최악의 비용은 어느 정도인지 계산할 수 있는 API가 바로 Profiler API이다. 코드는 아래와 같다. render( ); 예를 들어 Navigation을 profile하기 위해서 profiler로 감싸준다. ..
-
React 성능을 최적화 해보자!FrontEnd/React 2023. 1. 2. 23:22
https://ko.reactjs.org/docs/optimizing-performance.html 성능 최적화 – React A JavaScript library for building user interfaces ko.reactjs.org 여기 공식 문서에서 제안하는 방법들이 있는데 그 중 몇 가지를 살펴보자! 긴 목록 가상화 하기 앱 내에서 긴 목록(채팅리스트, 트윗, 메시지 등)을 불러와야 하는 경우에 전체를 다 불러오는 것보다 부분 목록만 렌더링함으로써 걸리는 시간과 생성된 DOM의 갯수를 현저히 줄일 수 있다. 이게 무슨 말일까? UI상에 메세지 목록이라는 박스에 필요한 메세지 목록 데이터가 만약 수천개라고 해보자. 하지만 사용자가 보는 화면에 수천개를 한 번에 띄우는 일은 어렵고, 기껏해야 ..
-
동일한 패턴이 여러 컴포넌트에서 쓰이고 있다면? - React 고차 컴포넌트로 해결하기!FrontEnd/React 2023. 1. 1. 23:05
고차 컴포넌트란? "고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다."라고 공식 홈페이지에서 정의하고 있다. 규모가 큰 애플리케이션에서 DataSouce에 접근하여 SetState를 호출하는 동일한 패턴이 반복적으로 발생할 때 유용하다. class CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" 는 글로벌 데이터 소스입니다. comments: DataSource.getComments() }; } componentDidMount() { // 변화감지를 위해 리스너를..