React (5) 썸네일형 리스트형 React 성능 최적화 기법 ( usecallback )적용과 후기 최적화는 프로그래머에 있어 매우 중요하다. . 하지만 최적화를 어설프게 하면 오히려 코드가 복잡하고 안하느니만 못할 수도 있기 때문에 이번기회에 최적화 툴을 써보고 최적화의 기본 사례를 통해 어떻게 최적화를 진행하는게 좋을지 알아 보자 React Profiler를 사용하여 성능 측정하기Profiler 도구를 사용하여 React 성능을 측정하고, 어떻게 하면 성능을 높일 수 있는지 알아보겠습니다.medium.com profiler 를 써보고 공부해볼겸 원티드랩에서 작성한 React.memo 사례를 바탕으로 이번에는 usecallback 의 쓰임새 및 사례를 한번 살펴볼까 한다. 앞서 실험한 React.memo 를 기반으로 usecallback 기능을 추가할 예정이라 앞선 글을 보고 오는것을 추천한다. .. VS 놀이 ( 밸런스게임) 을 만들어 보자 발단 ( 배경 ) 외주개발로 밸런스 게임에 대한 의뢰가 들어왔다. 실제 생활속에서나 여러 웹페이지상에서 많이 경험 해보기도 했지만 실제 만들어 본 적은 없었기에 흥미로웠다. 하지만 실제 구글링을 해보니 괜찮은 소스 코드를 찾을 수 없었다. 그렇기에 후속으로 만드는 분들꼐 도움이 되고자 기록을 남기고자 한다. python 코드 candidate_number=int(input()) candidate=[i for i in range(1,candidate_number+1)] victory=[] print(candidate) round=int(len(candidate)/2) while round>0: victory = [] print(round, "round") for i in range(round): print.. [React] Fragment JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다. 이런 상황에 Fragment를 사용하면 쉽게 그룹화가 가능하다. 아래와 같이 Table 컴포넌트에서 Columns를 불렀다고 가정해보자 import { Component } from 'React' import Columns from '../Components' class Table extends Component { render() { return ( ); } } Columns 컴포넌트에서는 ~~ 와 같은 element를 반환해야 유효한 테이블 생성이 가능할 것이다. import { Component } from 'React' class Columns extends Component { render() { return ( Hello World.. React preview 1. React를 배우는 이유 컴포넌트를 사용해 복잡한 UI단을 쪼개서 쉽게 설계할 수 있게 해준다. 변화하는 값을 선언적인 방법으로 손쉽게 다룸으로써, 사용자와 상호작용하는 간단하게 만들 수 있다. 가상 돔(Virtual DOM)을 이용해 효율적이고 최적화된 환경을 제공한다. 2. JSX란? 간단히 말해서, JavaScript 내의 HTML이라고 생각하면 쉽다. 3. Component란? component(컴포넌트)란 재사용 가능한 UI단위이다. 독립적으로, 재사용가능한 코드로 관리할 수 있고, 하나의 컴포넌트에 필요한 html,css,js를 모두 합쳐서 만들 수 있다. React Component에 값을 전달할 때 input을 props(properties의 줄임말)라고 하고 화면에 보여져야 할 Re.. React JS+Typescript+StyledComponent 초기 세팅 ㅁ 이전 1 다음
