Web Programming/React
-
Web Programming/ReactRTK Query를 이용하여 데이터 최신으로 관리하기(& Redux Toolkit)
시작하며 Redux Toolkit(RTK)과 RTK Query를 프로젝트에 적용하며 검색을 해보다 SWR과 React Query에 관한 글을 종종 찾을 수 있습니다. 하지만 아직까지는 둘에 대해서는 관련 글들도 많지 않아 원하는 내용을 찾기 쉽지 않은 것 같습니다. Redux Toolkit은 이전 글에서 간단하게 설명했듯이 Redux의 복잡성을 해결하기 위해 만들어졌으며, RTK Query는 Redux Toolkit 패키지에 추가 기능(optional addon)이라고 할 수 있습니다. RTK Query는 데이터를 가져오기와 캐싱 문제 해결을 위해 개발되어 앱의 API 인터페이스 계층을 간결하게 정의할 수 있습니다. Redux를 비롯하여 Redux Toolkit과 RTK Query의 공식 문서는 설명이 ..
-
Web Programming/ReactReact의 시작
안녕하세요? 씨앤텍시스템즈입니다. 이번 포스트에서는 React로 간단한 애플리케이션을 생성해보려고 합니다. React의 시작 React는 Single Page Application으로 각각의 페이지가 명확하게 나뉘어져 있는 특징을 가지고 있습니다. 첫 애플리케이션이라고 불리는 것이 구글의 Gmail인데요, Gmail을 보면 '웹 사이트' 보다는 '애플리케이션'이라는 느낌을 받습니다. 웹 애플리케이션은 데이터가 정말 많은데, 데이터를 바꾸면 화면도 함께 바뀌어야 합니다. 이러한 동적인 기능을 웹 사이트로 구현하기에는 굉장한 어려움이 있습니다. 그 문제를 해결하기 위해 Single Page Application 프로그램이 나오기 시작하였습니다. 페이스북은 React를 만들었습니다. 이로써 데이터와 화면의 불..
-
Web Programming/ReactReact 3. Redux, Redux Toolkit - Global UI Component 만들기
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 지난 글에서는 리스트 스타일링까지 진행했습니다. 이번 글에서는 redux에 대해 기본적인 내용을 살펴본 후, Redux를 사용하여 리스트의 데이터를 store에 저장하여 사용해 보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 Redux 시작하기 Redux React Redux Redux Toolkit Redux를 사용하여 global component list 만들기 수정 버튼 추가 모달 컴포넌트 생성 슬라이스 작성 스토어 연결..
-
Web Programming/ReactReact 2. Emotion를 이용한 React component 스타일링 (with. CSS-in-JS)
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 저번 글에서 만든 List 컴포넌트에 스타일을 적용시켜보려고 합니다. html 문서에 css 스타일 코드를 추가하는 것처럼 css 파일을 연결할 수도 있지만 js 파일 안에서 컴포넌트에 바로 스타일을 적용시키거나, 스타일이 적용되어 있는 라이브러리에서 컴포넌트를 가져와 사용할 수도 있습니다. 아래 글에서 여러 방법들에 대해 하나씩 살펴보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 CSS-in-JS Emotion 마..
-
Web Programming/ReactReact 1. Component 렌더링
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이 글에서는 React를 사용하면서 한 번은 들어본 함수형 컴포넌트와 클래스형 컴포넌트를 만들고 화면에 컴포넌트가 렌더링 되는 과정에 대해 하나씩 알아보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 컴포넌트 렌더링 React 컴포넌트의 라이프 사이클 마무리 1. 컴포넌트 렌더링 우선, 리액트는 v18부터 ReactDOM.render를 더 이상 사용하지 않고 createRoot를 사용하여 root 엘리먼트에서 render 메서드를..
-
Web Programming/ReactReact 란?
안녕하세요 씨앤텍시스템즈 박선희 연구원입니다. 이번 포스트는 React 에 대해 알아보는 시간을 가져보고자 합니다. 1. 리액트란? 2. 리액트는 왜 만들여졌을까? 3. 리액트 구성요소 1. 리액트란? 리액트는 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용됩니다. 컴포넌트 기반으로 동적인 UI를 만들 때 사용되며 데이터가 변경됨에 따라 필요한 컴포넌트만 갱신되고 렌더링 됩니다. 페이스북과 개별 개발자 및 공동체에 의해 개발과 유지보수가 되고 있습니다. 요즘 프론트 개발에 많이 사용되는 Vue, Angular와 동일하게 SPA 개발에 사용될 수 있습니다. 언어는 JSX, JS 그리고 HTML을 사용합니다. 리액트는 라우팅, API 통신 등의 기능을 기본적으로 제공하지 않아 추가 라이..