React

SPA등장 전, 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동시 브라우저가 페이지를 보여주기위해 HTML파일로 된 페이지 전체를 불러와야했다. 이는 시간이 흐름에 따라 웹사이트가 복잡해지고 애플리케이션 형태를 가지게 됨에따라 문제가 생겨나기 시작했다. 애플리

컴포넌트의 속성(Property)를 의미하는 props는 생년월일 처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 이는 부모 컴포넌트 (상위 컴포넌트)로 부터 전달받은 값이며 React 컴포넌트는 JavaScri

State 애플리케이션의 '상태' 로 쇼핑몰 장바구니속 물건들의 체크박스 체크 여부에따라 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면이 달라지는 것처럼 컴포넌트 내부에서 변할 수 있는 값이다. React의 Event handling Reac

React의 개발방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다는 점이다. 따라서 필요에 따른 각각의 컴포넌트를 만든 후 조립하는 상향식(bottom-up)으로 앱을 만든다. 이 방식은 테스트가 쉽고 확정성이 좋다. 때문에 앱의 디자인을 전달 받을

보통 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 side effect가 있다고 말한다. 이런 Side Effect를 최소화하거나 따로 분리하여 함수로 묶어주는 작업은 해당 프로젝트나 소프트웨어의 유지보수를 좀 더 수월하게 해준다. React에서는 컴포넌트

SPA를 만드는 핵심 기술인 AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. AJAX의 가장

SSR은 Server Side Rendering의 약자로 웹 페이지를 서버에서 렌더링한다. CSR은 Client Side Rendering의 약자로 웹 페이지를 클라이언트에서 렌더링한다. 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링하는 SSR 은 브라우저

React 환경에서 사용 가능한 Styled Components라는 라이브러리는 CSS를 컴포넌트화 해준다. Styled Components는 CSS in JS라는 개념이 대두되면서 나온 라이브러리로 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, R

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기)가 등장했다. Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가

DOM 엘리먼트의 주소값을 활용해야 하는 경우인focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 등의 상황일 때 useRef 로 DOM 노드, 엘리먼트, 그리고 Rea

Redux 상태 관리 라이브러리중 하나인 Redux는 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이며 React 없이도 사용할 수 있는 상태 관리 라이브러리이다. Redux의 구조 Red

React에서 Hook이란, 함수형 컴포넌트에서 사용되는, state와 관련된 기술들을 모아서 일컫는 말이며 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 대표적으로 useState() 와 useEffect()