[React다루는기술][완료] 26. 서버 사이드 렌더링(SSR:Server Side Rendering)
in React on React 다루는 기술
이전에 작성한 서버 사이드 렌더링(SSR)에 대한 포스팅이다. React 에서도 SSR 를 위한 설정방식과 SSR를 위해 React 프레임워크인 Next.js 가 있다.
해당 카테고리에서 참고서적인 “React다루는기술”에서 더 이상은 클론코딩 위주이기에 해당 카테고리에서 마지막 포스팅이다.
[React다루는기술] 25. 코드 스플리팅(Code Splitting)
in React on React 다루는 기술
코드 스플리팅(Code Splitting)은 대규모 웹 애플리케이션을 개발할 때 사용되는 기술로, 애플리케이션의 코드를 여러 개의 작은 조각으로 분할하여 필요한 코드만 사용자에게 제공함으로써 초기 로딩 시간을 줄이고 성능을 향상시키는 방법이다.
[React다루는기술] 24. Redux Saga Middleware(비동기 작업)
in React on React 다루는 기술
Redux Saga는 Redux 애플리케이션에서 비동기 작업을 관리하기 위한 미들웨어로 제너레이터 함수를 이용한 라이브러리이다.
[React다루는기술] 23. redux-saga에 앞서 제너레이터 함수(generator function)
in React on React 다루는 기술
React 에서 redux-saga 의 비동기 작업을 하기 전에 제너레이터 함수에 대한 포스팅이다. 제너레이터 함수(generator function)는 일반 함수와는 다르게 실행 중간에 멈출 수 있고, 필요할 때 다시 시작할 수 있는 함수입니다. 제너레이터 함수는 함수 내부에 yield 키워드를 사용하여 값을 반환하고 함수 실행을 일시 중지시킬 수 있다.
[React다루는기술] 22. Redux Thunk Middleware(비동기 작업)
in React on React 다루는 기술
redux-thunk 는 리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어이다.
[React다루는기술] 21. Redux Middleware 기본 구조 및 설명
in React on React 다루는 기술
Redux Middleware 기본 구조 및 설명에 대한 포스팅이다.
[React다루는기술] 20. useSelector Hook, useDispatch Hook 사용
in React on React 다루는 기술
useSelector Hook과 useDispatch Hook 사용예제 포스팅이다.
[React다루는기술] 19.Redux(리덕스) 개념
in React on React 다루는 기술
Redux 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 분리시켜서 더 호율적으로 관리할 수 있다. 특히 Redux 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이며 대규모 애플리케이션에서 상태 관리를 보다 효율적이고 예측 가능하게 만들어준다.
[React다루는기술] 18.React Context API
in React on React 다루는 기술
React Context API는 React 애플리케이션에서 전역적으로 상태를 관리하기 위한 기능을 제공한다. 이를 통해 props를 통해 데이터를 여러 컴포넌트에 전달할 필요 없이, 컴포넌트 트리의 깊은 곳에 있는 컴포넌트들도 쉽게 상태를 공유할 수 있다.
[React다루는기술] 17. React에서 axios와 Custom Hook 사용 예제
in React on React 다루는 기술
React에서 axios와 Custom Hook 사용 예제포스팅이다. [React다루는기술] 카테고리와 해당 포스팅은 리액트를 다루는 기술(개정판)를 보고 부분적인 기록용으로 작성한 예제로 자세한 내용은 책을 사서 보면 된다.
[React다루는기술] 16. 비동기 처리(Callback, Promise, Async/Await)
in React on React 다루는 기술
해당 포스팅에서는 javascript에서 비동기 처리와 비동기를 동기처럼 처리시에 사용되는 Callback Function, Promise, Async/Await에 대한 포스팅이다.
[React다루는기술] 15. React 파라미터와 쿼리스트링(useParams, useSearchParams)
in React on React 다루는 기술
리액트에서 화면 라우팅간에 파라미터와 쿼리스트링을 useParams와 useSearchParams Hook 을 설명하는 포스팅이다.
[React다루는기술] 14. React Router
in React on React 다루는 기술
리액트에서는 SPA 를 구현하기 위해서 라우팅이라는 개념이 있는데 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.
리액트에서 라우트 시스템을 구축하기 위해 사용하는 방법은 크게 2가지로 React-Router와 리액트 프레임워크인 Next.js 가 있는데 해당 포스팅은 React-Router 를 활용하는 포스팅이다.
[React다루는기술] 13. 싱글 페이지 애플리케이션이란?
in React on React 다루는 기술
싱글 페이지 애플리케이션 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다.
[React다루는기술] 12. react-virtualized
in React on React 다루는 기술
react-virtualized는 React를 사용하여 대량의 데이터를 효율적으로 렌더링하기 위한 라이브러리로, 리스트나 그리드와 같은 컴포넌트에서 성능을 최적화할 때 유용합니다.
안드로이드의 “RecyclerView” 기능과 동일한 역할이라고 볼 수 있다.
[React다루는기술] 11. React TODO List
in React on React 다루는 기술
리액트를 다루는 기술(개정판)을 참고한 리액트 TODO App 예제 코드이다. 설렁설렁 하기 좋다.
[React다루는기술] 10. React Hook
in React on React 다루는 기술
React Hook은 함수 컴포넌트에서 상태(state) 및 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 훅은 함수 컴포넌트에서 상태 관리나 부수 효과(side effect) 등을 더 쉽게 다룰 수 있도록 도와줍니다. 리액트 훅은 함수형 컴포넌트에서만 사용할 수 있습니다.
[React다루는기술] 09. React Life cycle
in React on React 다루는 기술
리액트 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거되기까지의 여러 단계에 걸친 메서드들을 나타냅니다. 리액트 라이프사이클은 세 가지 주요 단계로 나눌 수 있습니다:
[React다루는기술] 08. map 함수 리액트 사용 예제
in React on React 다루는 기술
map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다. 이 함수는 배열을 순회하면서 각 요소를 변환하거나 추출하는 데 유용하게 사용됩니다. JavaScript에서 map 함수는 함수형 프로그래밍의 일부로서 배열의 요소를 변형하고 새로운 배열을 생성하는 기능을 제공합니다.
[React다루는기술] 07. Ref
in React on React 다루는 기술
리액트 컴포넌트 내에서도 id를 사용은 가능하나 컴포넌트를 여러번 재활용시에 id는 유니크 해야되는데 DOM내에 여러개가 생겨 문제가 생긴다. 그래서 리액트에서는 컴포넌트 내에서만 동작하는 ref 기능을 사용한다.
[React다루는기술] 06. 이벤트 핸들링(Event Handling)
in React on React 다루는 기술
클래스 컴포넌트로 이벤트 핸들링하는 포스팅이다. click 이벤트와 change 이벤트 예제만 있으며 기본적인 이벤트들은 html, js 사용되는 이벤트들과 모양새가 비슷하다.
[React다루는기술] 05. State
in React on React 다루는 기술
React에서의 상태(State)는 컴포넌트의 데이터를 저장하고 관리하는 데 사용됩니다. 각각의 React 컴포넌트는 자체적인 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링될 때 데이터를 보관하고 관리하는 데 사용된다.
[React다루는기술] 04. PropTypes
in React on React 다루는 기술
PropTypes는 React에서 사용되는 도구로, 컴포넌트에 전달되는 데이터의 종류를 정의합니다.
[React다루는기술] 03. 컴포넌트(Component)
in React on React 다루는 기술
리액트에서 컴포넌트는 UI를 구성하는 독립적인 부분이며, 재사용 가능한 블록으로 생각할 수 있습니다. 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있고, props라 불리는 속성을 통해 데이터를 전달받을 수 있습니다.
[React다루는기술] 02.JSX란
in React on React 다루는 기술
JSX는 React에서 UI를 작성하기 위해 사용되는 JavaScript 확장 문법입니다. React는 JavaScript 라이브러리로, UI를 만들기 위해 JSX를 활용합니다.
[React다루는기술] 01.리액트란
in React on React 다루는 기술
React를 다루는 기술 책 기반으로 리액트를 취미로 정리하기 위한 카테고리로 심심할때 포스팅할 예정. 다른것도 할게 많다.
