728x90 반응형 리액트8 [React] Next.js로 React와 TypeScript 환경 설정하기 📌 Next.js + React + TypeScriptNext.js : React 기반 프레임워크React : UI를 구성하는 라이브러리TypeScript : 정적 타입을 추가하여 JavaScript의 기능을 향상시키는 언어 Next.js가 모든 개발, 빌드, 배포 과정을 통합적으로 관리합니다.즉, Next.js가 설치된 환경에서는 모든 작업을 수행할 수 있습니다.📌 Vite + React + TypeScript (기존 사용 방식)Vite : 빠른 개발 서버와 빌드를 지원하는 도구React : UI를 구성하는 라이브러리TypeScript : 정적 타입 추가 Vite가 개발 서버와 빌드를 처리하지만, 실제 배포는 별도로 진행해야 합니다.따라서 Vite를 사용할 경우, 배포 과정은 추가적인 설정이 필요합.. 2024. 10. 11. [React] 리액트에서 Nivo Chart 데이터 시각화 📌 니보차트 란? (Nivo Chart)Nivo Chart는 React에서 차트를 쉽게 구현할 수 있도록 도와주는 차트 라이브러리입니다.React의 컴포넌트 기반 구조에 맞게 차트를 적용할 수 있어서,React 스타일로 차트를 만들 수 있습니다. ❓ 차트가 필요한 이유차트는 2개 이상의 숫자 데이터를 시각적으로 표현하는 데 사용됩니다.글자로 된 데이터는 쉽게 설명할 수 있지만,숫자 데이터는 그 자체로 이해하기 어려울 때가 많습니다.차트를 사용하면 복잡한 숫자 데이터를 한눈에 파악할 수 있어,웹사이트나 애플리케이션에서 매우 유용합니다.🔎 차트를 만드는 3가지 방법 1. 순수 HTML자바스크립트가 비활성화된 브라우저에서도 차트를 표시할 수 있습니다.자바스크립트를 사용하지 않고 HTML만으로 간단한 차트를.. 2024. 10. 6. [React] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20. [React] MobX 상태 관리 라이브러리 📌 MobX (전역 상태 관리) 상태 관리 라이브러리는 여러 컴포넌트 간의 상태를 쉽게 관리할 수 있도록 돕는 도구입니다.MobX는 전역적으로 상태를 관리할 수 있는 스토어(Store)를 제공하여,상태를 한 곳에서 관리하고 필요할 때 접근할 수 있게 합니다.이를 통해 컴포넌트 간에 상태를 계속 전달하지 않아도 되어 상태 관리가 간단해집니다. 📌 MobX 작동 원리MobX는 단방향 데이터 흐름을 기반으로 작동합니다.MobX에서의 상태 관리 과정은 다음과 같은 단계로 이루어집니다. Actions (액션) 상태를 변경하기 위한 함수 사용자가 어떤 동작을 취하면 그에 따라 상태를 변화시키는 역할 Observable State (관찰 가능한 상태) MobX에서 관리하는 데이터 이 데이터는 여러 컴포넌트에.. 2024. 9. 11. [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] 리액트 훅 - useContext(전역 상태값 공유) 📌 useContext 훅React 컴포넌트는 부모에서 자식으로 props를 통해 데이터를 전달해야한다.이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... useContext() 훅은 리액트에서 상태를 전역적(globally)으로 사용할 수 있도록 해.. 2024. 8. 29. [React] 리액트 내장 컴포넌트(Fragment, Profiler, StrictMode, Suspense, lazy) 내장 컴포넌트리액트는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공합니다.내장 컴포넌트설명..., 또는 ... 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.여러 JSX 노드를 하나의 그룹으로 묶고 싶을 때 사용하는 컴포넌트리액트 컴포넌트가 얼마나 빠르게 렌더링되는지를 측정하고, 성능을 분석할 수 있게 도와주는 컴포넌트개발 중에 잠재적인 문제를더 빨리 찾아내고 해결할 수 있도록 돕는 컴포넌트React.lazy()자식 컴포넌트를 로딩하는 동안 fallback을 표시할 수 있습니다.자식 컴포넌트를 비동기적으로 로딩할 때, 로딩이 완료되기 전까지 보여줄 화면을 지정 내장 컴포넌트 사용방법 (import)리액트에서 기본 태그나 내장 컴포넌트들을 사용하기 위해서는 import를 통해 해당.. 2024. 8. 21. [React] 리액트 JSX(TSX) 문법 ❓리액트(React)리액트는 프론트엔드 개발을 위한 Javascript의 오픈소스 라이브러리이다. HTML, Javascript만으로도 충분히 웹을 만들 수 있는데 왜 리액트를 사용하는걸까?JavaScript에서는 DOM 을 변형시키기 위하여브라우저의 DOM Selector API를 사용해서 특정 DOM 을 선택한 뒤,특정 이벤트가 발생하면 변화를 주도록 설정해야했다. 이를 이용하여 프로젝트를 진행했을 때 규모가 커질 수록 Dom Selector를 많이 쓰게 되고,그러한 코드가 쌓여갈 수록 매우 지저분하다는 생각이 들었다.사실 하나씩 불러오는 것도 매우 귀찮았다. 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면관리하기도 힘들고, 규모가 커질 수록 성능 저하의 원인이 될 수도 있는 문제가.. 2024. 8. 17. 이전 1 다음 728x90 반응형
