반응형

Development/React 6

[React] React-Bootstrap

스타일이 적용된 부트스트랩 컴포넌트들을 리액트 컴포넌트처럼 사용할 수 있도록 도와주는 라이브러리이다. 설치 npm install react-bootstrap bootstrap 공식문서 React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 만일 Bootstrap Sass 파일을 수정해서 쓰고싶다면 CDN을 쓰는 것보다 vanilla Bootstrap을 설치해서 사용하는 것을 권고한다. 모든 Bootstrap을 include하기 // Custom.scss // Option A: Include all of Bootstrap // Include any default variable over..

Development/React 2023.01.19

[React] React Router

공식문서 Home v6.4.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 설치하기 터미널에 아래의 명령어를 입력해준다. npm install react-router-dom package.json 파일에 "dependencies" 중 "react-router-dom"이 추가되었는지 확인한다. 사용예시 import { BrowserRouter, Rou..

Development/React 2023.01.17

[React] Component

Component 기존의 웹 프레임워크는 MVC방식으로 정보, 화면, 구동코드를 분리하여 관리하는데 이러한 방법은 코드관리를 효율적으로 할 수 있으나 MVC각 요소의 의존성이 높아 재활용이 어렵다. 웹사이트 화면은 각 요소가 비슷하고 반복적으로 사용되는 경우가 많기 때문에, 컴포넌트를 사용하면 MVC의 뷰를 독립적으로 구성해 재사용도 할 수 있고, 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들수도 있다. 구성요소 Property: 상위컴포넌트에서 하위컴포넌트로 전달되는 읽기 전용 데이터 State: 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터 Context: 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 Property 자바스크립트의 자료형을 모두 사용할 수 있으며 수정할 수 없다는..

Development/React 2023.01.12

[React] React와 개발환경 구축

React React는 페이스북에서 개발한 프론트엔드 프레임워크 중 하나이다. Component라는 독립적인 코드블록을 조합해 빠르고 효율적으로 화면을 수정한다. 가상화면 기술(Virtual DOM)을 도입했기 때문에 코드의 복잡성이 줄고, 화면 출력 속도를 증가시켰다. Hot reloading이라는 모듈이 있어 리액트 앱을 구동한 상태에서 파일을 수정하고 저장하면 즉시 화면이 바뀐다. 개발환경 구축 React를 사용해서 웹 개발을 하기 위해서는 NVM, Node.js, yarn, create-react-app이 필요하다. 아래 Node.js 공식 사이트에서 LTS 버전을 설치할 수 있다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..

Development/React 2023.01.06
반응형