본문 바로가기

전체 글

 (134)
2021-05-11 :: 컴포넌트 성능 최적화2 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에 리렌더링 된다. 자신이 전달받은 props가 변경될 때 자신의 state가 변경될 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 지금 상황을 분석해 보자. 먼저 할 일1을 체크 했을 때 App컴포넌트의 state가 변경되어 App 컴포넌트가 리렌더링 된다. 이어서 자식 컴포넌트인 TodoList 역시 리렌더링이 되고 TodoList의 자식 컴포넌트인 수많은 Todo 컴포넌트 역시 리렌더링 되며 성능의 저하가 발생된다. 할 일1은 리렌더링 되어야 하는 것이 맞지만 그 이외 값이 변경되지 않은 컴포넌트는 리렌더링할 필요가 없다. React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지하기 위해서 우리는 shou..
2021-05-07 :: 컴포넌트 성능 최적화1 많은 데이터 렌더링하기 성능 최적화를 경험하기 위해 먼저 많은 데이터를 렌더링해 보겠다. function createBulkTodos() { const array = []; for(let i=0; i
2021-05-07 :: SCSS official guide 번역 sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but st sass-lang.com 전처리 css가 점점 커지고 복잡해 짐에 따라 관리가 힘들어졌다. 따라서 전처리기의 도움이 필요하다. Sass는 기존의 css에 없었던 변수, nesting, ..
2021-05-07 Todo scss설정하기 CSS 단위 em rem CSS의 길이 단위 중 em rem은 상대적 기준으로 크기를 정한다. em은 상위 요소 기준으로 크기를 정한다. 만약 html테그의 font-size가 16px이고 html의 하위 요소인 body의 font-size를 1.5em으로 잡는다면 body의 실질적인 font-size는 32px이 된다. rem은 최상위 요소인 html 기준으로 크기를 정한다. 세부 작동 방식은 em과 비슷하니 생략하겠다. 요소의 가운데 정렬 아래 코드와 같이 width를 먼저 지정해준 뒤 margin-left, margin-right 속성에 auto 값을 부여하면 가운데 정렬이 된다. .TodoTemplate { width: 512px; //width가 부여된 상황에서 중앙정렬 margin-left: ..
2021-05-06 :: Todo Project1 reactjs.org/docs/refs-and-the-dom.html Refs and the DOM – React A JavaScript library for building user interfaces reactjs.org ref에 접근하기 위해서는 .current를 이용 해 준다. id지정해줄 때 useRef로 많이 처리한다. const id = useRef(4); id.current +=1; 2번째 배열 인자에 꼭 들어가야하는 값들 const onSubmit = useCallback(e=> { onInsert(value); e.preventDefault(); },[onInsert, value]); 최상위 컴포넌트 App에 데이터를 state로 관리해준다. 또한 그 state를 조작하는 메서드 역시 ..
2021-05-03 :: 리액트 라우터로 SPA 개발하기3 withRouter withRouter 함수는 HoC(higher-order Component)이다. 라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있게 해 준다. import React from 'react'; import {withRouter} from 'react-router-dom'; const WithRouterSample = ({location, match, history}) => { return( location match history.push('/')}>홈으로 ); } export default withRouter(WithRouterSample); JSON.stringify의 두 번째 파라미터와 세 번째 파라미터를 위와 같이 null, ..
2021-04-30 :: 리액트 라우터로 SPA 개발하기2 URL 쿼리 이번에는 About 페에지에서 쿼리를 받아 오겠습니다. 쿼리는 location 객체에 들어 있는 search 값에서 조회할 수 있다. location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 어플리케이션의 현재 주소에 대한 정보를 지니고 있다. location의 형태는 다음과 같다. { "pathname": "/about", "search": "?detail=true", "hash": " " } 위 location 객체는 URL/about?deatail=true 주소로 들어갔을 때의 값이다. URL 쿼리를 읽을 때는 위 객체가 지닌 값 중에서 search 값을 확인해야 한다. 이 값은 문자열 형태로 되어 있다. 또한 URL 쿼리는 ?detail=true&another=1..
2021-04-23 :: 리액트 라우터로 SPA 개발하기 SPA란? SPA는 Single Page Application의 약어이다. 말 그대로 한 개의 페이지로 이루어진 어플리케이션이라는 뜻을 가지고 있다. 전통적인 웹 페이지에는 다음과 같이 여러 페이지로 구성되어 있다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 왔다. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 기존처럼 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 그래서 리액트 같은 라이브러리를 사용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 새로운 데이터가 필요한 경우에만 서버 API를 호출하여 로드한다. 리액트 라우팅 라이브러리로는 리액트 라우터, 리치 라우터, Next.js등이 있다. SPA의 단점 SPA의 단점은 앱의 규모가 커지면 자바..

티스토리툴바