리액트의 최적화 1. 리액트의 렌더링 리액트의 리렌더링은 state가 변화되었을 때 이루어진다. 크게 아래의 4단계를 거치게된다. 기존 컴포넌트의 UI를 재사용할 지 확인한다. 함수 컴포넌트: 컴포넌트 함수를 호출한다 / Class 컴포넌트: 메소드를 호출한다. 2의 결과를 통해서 새로운 VirtualDOM을 생성한다. 이전의 VirtualDOM과 새로운 VirtualDOM을 비교해서 실제 변경된 부분만 DOM에 적용한다. 2. React.memo 리액트는 컴포넌트의 UI가 변화 되었는지 검증 후에 리렌더링을 실시한다. 만약 하위 컴포넌트의 state가 변화되지 않았다면 비효율적으로 검증하는 과정을 거칠 필요가 없다. 그래서 리액트는 개발자에게 컴포넌트에 대한 리렌더링 여부를 표현할 수 있는 React.memo 함수를 제공하고 이를 통해 기존의 컴포넌트의 UI를 재사용할 지 판단하는 방법을 채택했다. React.memo로 감싸진 컴포넌트는 이전 props와 다음 props의 값을…

✔ React-Router-Dom v6 기존 React-Router-Dom v5에서 v6로 넘어가면서, 사용법이 바뀌고 기능이 추가되는 등 큰 변화가 있었다. 대표적으로 변경된 것, 간단한 사용법을 정리한다. 1. Routes ① Switch의 네이밍이 Routes로 변경되었다. ② exact 옵션이 제거되었다. ③ component, render props가 제거되고 element props가 생겼다. ④ path props에 상대경로로 지정이 가능해졌다. 위와 같이 사용할 수 있다. 2. 중첩 라우팅 v6 에서는 중첩 라우팅을 가독성 있게 설정할 수 있고 관리가 용이하다. 위와 같이 바로 중첩 라우팅을 설정할 수도 있지만 Outlet을 사용하면 좀 더 효율적으로 사용할 수 있다. v5 였다면 각 컴포넌트에 레이아웃을 포함 시켜야했을 로직을 위처럼 Outlet과 중첩 라우팅을 이용하여 코드 가독성과 관리를 용이하게 할 수 있다. 3. Hooks ① useLocation 기존 v5…

React Hooks React Hooks는 React v16.8 기준으로 등장하여 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 도와준다. 1. useState ① useState 위와 같은 형태로 선언하여 사용하고 함수형 컴포넌트에서 상태 관리를 할 수 있게 도와준다. ② prev를 이용하여 이전 state값을 사용할 수 있다. ③ props를 전달할 때는 위와 같이 element에 값을 할당하여 전달한다. ❗️ 결과 ㅇ + 버튼 클릭 시 1씩 증가한다. ㅇ - 버튼 클릭 시 1씩 감소한다. ㅇ Reset 버튼 클릭 시 전달받은 Props 값으로 초기화된다. 2. useEffect useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 도와준다. ① useEffect에서 두번째 아규먼트로 빈 배열을 넣어주면 마운트 시에만 실행한다. 빈 배열이 아닌 다른 값을 넣어주면 그 값이 갱신될 때 useEffect를 재실행한다. ② 컴포넌트가 언마운트 되기 전이나 업데…

리액트 컴포넌트에서 데이터는 Props와 State 두가지를 다룬다. Props props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 부모 컴포넌트가 자식 컴포넌트에게 값을 주어야 사용할 수 있다. props는 직접 수정할 수 없다는 특징이 있다. 으로 name props를 전달하고 실행 시 결과는 defaultProps 컴포넌트에 props를 지정하지 않았을 때는 defaultProps를 지정하여 기본값을 설정할 수 있다. 로 defaultProps를 지정하고 실행 시 결과는 📂 참고자료 VELOPERT님 글 생활코딩님 강의

프론트엔드의 라이브러리는 종류가 다양하다. 현 시점에서 가장 많이 쓰이는 라이브러리로 ReactJS, VueJS, AngularJS 3대장을 꼽는다. 이 셋은 각각 다른 특징을 가지고 있다. ❓ 자바스크립트로 구현하면 되는데 굳이 라이브러리를 쓰는 이유? ❗️ 사용자 인터렉션이 적다면 라이브러리를 사용하지 않아도 되지만, 요즘의 웹은 정말 많은 기능과 데이터를 다루기 때문에 수많은 DOM을 관리하기란 쉽지 않은 일이다. 라이브러리를 통하여 관리 부담을 줄이고 UI 구현에 집중할 수 있다. Why React? 블럭 단위로 소스를 관리하는 컴포넌트라는 개념에 집중한다. 컴포넌트 사용은 소스 관리에 용이하고 재사용성이 뛰어나다. Virtual DOM이라는 가상의 DOM을 사용한다. 변화를 감지했을 때, 해당 부분만 렌더링을 해줄 수 있다. 변화가 있을 때 마다 페이지 전체를 렌더링 하는 것과 바뀐 곳만 렌더링 하는 것은 성능면에서 차이가 있을 것이다. 커뮤니티가 크다는 것이 큰 장점이다.…