react15 [React] MobX 상태 관리 라이브러리 📌 MobX (전역 상태 관리) 상태 관리 라이브러리는 여러 컴포넌트 간의 상태를 쉽게 관리할 수 있도록 돕는 도구입니다.MobX는 전역적으로 상태를 관리할 수 있는 스토어(Store)를 제공하여,상태를 한 곳에서 관리하고 필요할 때 접근할 수 있게 합니다.이를 통해 컴포넌트 간에 상태를 계속 전달하지 않아도 되어 상태 관리가 간단해집니다. 📌 MobX 작동 원리MobX는 단방향 데이터 흐름을 기반으로 작동합니다.MobX에서의 상태 관리 과정은 다음과 같은 단계로 이루어집니다. Actions (액션) 상태를 변경하기 위한 함수 사용자가 어떤 동작을 취하면 그에 따라 상태를 변화시키는 역할 Observable State (관찰 가능한 상태) MobX에서 관리하는 데이터 이 데이터는 여러 컴포넌트에.. 2024. 9. 11. [React] 리액트 동적 라우팅(Dynamic Routing) - useLocation, useNavigate, useParams, useSearchParams 📌 동적 라우팅(Dynamic Routing)웹 애플리케이션에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식입니다.사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정합니다.이는 사전에 경로가 고정된 정적 라우팅(Static Routing)과 다르게,실행 시점에 라우팅 규칙이 결정되는 특징이 있습니다. Path Parameter(경로 매개변수) URL에서 하나의 정보를 전달할 때 사용합니다. 특정 목록에서 상세 페이지로 이동할 때 /about/sohyun처럼 사용Query Parameter(쿼리 매개변수) URL에서 여러 정보를 전달할 때 사용합니다. 페이지네이션이나 필터링 기능을 구현할 때 /about?name=sohyun처럼 사용 .. 2024. 9. 6. [React] 리액트 Children Props(props.children 사용) 📌 Children Props리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 사용예시이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다.function App() { return Hello world!}function Welcome(props) { return {props.children};}📌 합성(Composition)과 props.children 🔎 children 이란?props.children은 React 컴포넌트의 특별한 props입니다.컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을.. 2024. 9. 3. [React] 리액트 훅 - 커스텀 훅(Custom Hook) 📌 사용자 정의 훅(커스텀 훅)React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재 사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 내장 훅(useState, useEffect 등)을 이용하여 구현된다. JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 .. 2024. 9. 2. [React] 리액트 훅 - useRef(리렌더링 방지 DOM요소 접근) 📌 useRef 훅이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는 직접적으로 관련이 없는 값들을 저장할 때 사용됩니다.useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.👉 성능향상 변화는 감지하지만 렌더링 발생 ❌ 👉 DOM요소에 손쉽게 접근 (ref속성 사용)👉 전생애주기를 통해 값 유지언마운트 되기전까지는 값을 계속 기억함// ▶ 객체 생성// → {current: 초기값} 을 지닌 객체가 반환됨 const 변수명 = useRef(초기값)// ▶ DOM .. 2024. 8. 30. [React] 리액트 훅 - useMemo, useCallback(메모이제이션 값, 함수 반환) 📌 useMemo, useCallback 훅useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.useMemo 계산된 값을 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 계산합니다. useCallback 함수를 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 함수를 생성합니다.useMemo(() => 함수, 의존성 배열);useCallback (함수, 의존성 배열);🤔 리렌더링(re-rendering)React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준.. 2024. 8. 30. [React] 리액트 훅 - useContext(전역 상태값 공유) 📌 useContext 훅React 컴포넌트는 부모에서 자식으로 props를 통해 데이터를 전달해야한다.이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... useContext() 훅은 리액트에서 상태를 전역적(globally)으로 사용할 수 있도록 해.. 2024. 8. 29. [React] 리액트 훅 - useReducer(관리 코드 컴포넌트 외부 분리) 📌 useReducer 훅React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다.useState와 마찬가지로 상태를 관리하지만,컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해준다.State 업데이트 로직을 또다른 파일에 작성해서(분리), 분리된 파일을 불러와서 사용하는 것도 가능🔎 useReducer를 사용한 경우컴포넌트.. 2024. 8. 28. [React] 리액트 이벤트 처리 - 핸들러, 컴포넌트 상태(useState), 단방향 바인딩 📌 이벤트 핸들링 / 이벤트 핸들러이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이벤트 핸들러 : 이벤트를 처리하는 함수 (onClick, onSubmit 등과 같은 이벤트 프로퍼티에 함수 형태로 전달)📌 이벤트 핸들러 (단방향 데이터 흐름)컴포넌트에서 특정 DOM 요소에 이벤트가 동작하도록 하려면, 해당 DOM 요소에 이벤트 핸들러를 설정해야 합니다. HTML 엘리먼트의 이벤트는 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다.예를 들어, 클릭 이벤트는 onClick으로 설정합니다. 리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐릅니다. 이벤트 핸들러도 동일한 원칙에 따라 작동하며, 부모 컴포넌트는 자식 컴포넌트에 이벤트 핸들러 함수를 전달하.. 2024. 8. 26. 이전 1 2 다음 728x90 반응형
