지난 포스트에서 추가되는 데이터가 적어서 컴포넌트를 관리하는데 불편하지않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지게 됩니다. 이때 사용되는 것이 컴포넌트 성능 최적화입니다. 실습은 다음과 같은 순서로 진행됩니다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle 과 onRemove 가 새로워지는 현상 방지하기 react-virtualized 를 사용한 렌더링 최적화 이번 실습을 위해서는 일정관리 웹서버가 필요합니다. https://daradarav.tistory.com/64 의 주소를 참고하여 실습을 진행한 후 이 포스트를 봐주시길 바랍니다. [React] 10. 일정 관리 웹 애플리케이션 만들기 ..

모든 리액트 컴포넌트는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전, 준비 과정에서 시작하여 페이지가 사라질 때 끝납니다. 컴포넌트의 라이프사이클 메서드를 사용하는 경우는 다음과 같습니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하는 경우 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우 불필요한 업데이트를 방지해야하는 경우 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능합니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 📌 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 ..

일반 HTML에서는 DOM 요소에 이름을 달 때 id 값을 사용합니다. 특정 요소에 id 값을 달면 CSS에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id를 찾아 작업하기도 합니다. 이렇게 HTML에서 id 를 사용하여 DOM에 이름을 다는 것처럼 리엑트 프로젝트 내부에서도 DOM에 이름을 다는 방법이 있습니다. ref를 사용하지 않은 코드를 보며 ref의 필요성을 알아보고, ref를 사용한 코드를 작성해보겠습니다. 이후 컴포넌트에 직접 ref를 달아 사용하는 코드도 작성해보겠습니다. 📌 ref는 어떤 상황에서 사용해야 할까? 📚 ref 의 주요 목적 예제를 통해 ref의 필요성을 알기 전에 REACT 공식 문서(https://ko.reactjs.org/docs/refs-and-the-d..

이벤트(event)란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 의미합니다. 3장에서 사용했던 마우스 클릭이나 마우스 커서 올리기, 입력 등등이 이벤트의 예시입니다. html의 alert와 같이 사용자가 웹 브라우저에서 상호작용하는 것이 이벤트(event)입니다. 리액트의 이벤트는 순수 JavaScript 혹은 jQuery를 사용한 웹 어플리케이션에서 이벤트를 다루는 것과 동일합니다. 기존 HTML DOM Event를 알고 있다면 리액트의 컴포넌트도 쉽게 다룰 수 있을 것입니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 이벤트를 다루도록 합시다 📌 리액트 이벤트 시스템 📚 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 onclick은 리액트에서 on..

앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 두 가지로 선언될 수 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하며 컴포넌트를 생성해보겠습니다. 또한 컴포넌트에서 사용하거나 렌더링 하는 데이터를 담는 props와 state의 차이점과 선언 방식을 배우겠습니다. 📌 클래스형 컴포넌트 📚 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. 클래스형 컴포넌트와 함수 컴포넌트는 state 기능 및 라이프 사이클 기능, 임의 메서드 정의 등에서 차이가 납니다. 각 방법으로 작성된 코드를 보면서 차이점을 비교해보자. 📃 클래스 컴포넌..

리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다. 코드 이해하기 src/App.js 파일을 열어보면 다음과 같은 코드가 있을 것입니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위의 코드를 하나씩 이해해봅시다. 📚 import 구문 import logo from './logo.svg'; import '...

📌 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있습니다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했습니다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있습니다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었습니다. 이번 포스트에서는 여러 프레임워크 중 React가 중심이 된 이유와 개발 환경 설정을 해보겠습니다. 또한 리액트의 주요특징인 Virtual DOM에 대해서 알아보겠습니다. 📚 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들..