리액티브 시스템(Reactive System)이란? Reactive의 사전적 정의는 '반응성, 반응적인'입니다. 즉 리액티브 시스템(Reactive System)은 '반응하는 시스템'이라고 말할 수 있겠습니다. 여러 소프트웨어 개발자와 아키텍트들에 의해 공동으로 작성된 리액티브 시스템 설계에 대한 가이드라인 문서인 "리액티브 선언문(Reactive Manifesto)"을 통해 다음과 같은 4가지 특성으로 요약할 수 있습니다. 반응성(Responsive): 시스템이 가능한 한 빠르게 응답할 수 있도록 합니다. 이는 사용자 경험을 향상하는 것뿐만 아니라, 문제가 발생했을 때 신속하게 대응할 수 있는 능력도 의미합니다. 회복력(Resilient): 시스템의 일부가 실패하더라도 전체 시스템의 가용성에 영향을 주..
React
useEffect와 side-effect useEffect 함수는 React에서 제공하는 훅(hook) 중 하나로, 함수 컴포넌트에서 부작용(side effect)을 수행하고, 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 때 사용됩니다. 부작용이란 데이터 가져오기, 구독 설정, 수시로 발생하는 이벤트 처리 및 DOM 조작과 같은 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 등을 의미합니다. useEffect 사용법 기본 형태 useEffect(setup, dependencies) // 예시 useEffect(() => { console.log("effect 함수 실행"); }, []); 매개변수(Parameter) setup 컴포넌트가 렌더링 될 때 실행할 함수 및 작업..
Context란? 리액트 Component간에 어떠한 값(value)을 공유할 수 있게 해주는 기능입니다. Context는 주로 데이터를 전역적(global)으로 관리하고 컴포넌트 간에 데이터를 공유할 때 사용합니다. 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줍니다. 왜 Context를 사용해야 하는가? 깊숙이 위치한 컴포넌트에 prop을 전달하려면 여러 컴포넌트를 거쳐 연달아 props를 설정해줘야 합니다. 이런 prop drilling이라 불리는 복잡한 상황에서 해결책으로 Context가 등장합니다. 이를 통해 더 간편하고 가독성 있는 코드를 작성하여 복잡성을 줄일 수 있습니다. Context 사용법 1. context 만들기 createContext(기본값..
useState란? useState는 React에서 상태(state)를 관리하기 위한 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리하는 데 사용됩니다. useState를 사용하면 컴포넌트 내에서 상태 변수를 선언하고 해당 상태 변수를 업데이트할 수 있으며, 상태가 변경될 때 React는 컴포넌트를 다시 렌더링 합니다. Hook이란? React Hook은 React 버전 16.8부터 도입된 개념으로, 함수형 컴포넌트에서 상태(state) 및 생명주기 관련 기능을 사용할 수 있도록 하는 기술입니다.이전에는 클래스 컴포넌트에서만 상태 및 생명주기 관련 로직을 다룰 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 이러한 기능을 간편하게 활용할 수 있게 되었습니다. State란? State는 컴포넌..
