리액트

[React] Hooks useState() 란?

1. useState()란? 리액트 컴포넌트에서 동적인 값을 상태(State)라고 부르고, 사용자 인터랙션을 통해 컴포넌트 상태 값이 동적으로 바뀔 때는 상태관리가 필요하다. 리액트 훅이 나오기 전까지는 클래스 기반의 컴포넌트를 사용하여 상태값을 관리하였는데, 이렇게 관리를 하면 유지보수에 불편함이 있었다. 하지만 리액트 16.8 버전 이후로 훅(Hooks)이라는 기능이 도입되면서 함수형 컴포넌트에서도 상태관리를 할 수 있게 되었고, 이때 사용하는 함수가 useState() 함수다. 2. useState() 사용법 import React, { useState } from "react" export default function Count(){ const [count, setCount] = useState..

[React] 리액트(React.js) 설치 및 시작하기 (Window)

리액트(React.js)와 특징에 대해 간단하게 이해하였다면, 리액트를 설치하고 프로젝트를 만들어 보자 [React] 리액트(React.js) 가볍게 알아보기 리액트(React.js)란? 리액트는 사용자 인터페이스를 만드는데 사용되는 자바스크립트 라이브러리라고 볼 수 있습니다. Facebook 개발팀이 개발하였고, 재사용이 가능한 UI구성 요소를 만들어, 데이터 tmdrnr96.tistory.com 순서 1. Node.js / npm 또는 yarn 설치 2. Visual Studio Code 설치 3. Git 설치 4. React 프로젝트 만들기 설치 1. Node.js / npm 또는 yarn 설치 리액트(React.js)를 통해 프로젝트를 만들기 위해 Node.js를 반드시 설치해 줘야한다. 하기 링..

[React] 리액트(React.js) 가볍게 알아보기

리액트(React.js)란? 리액트는 사용자 인터페이스를 만드는데 사용되는 자바스크립트 라이브러리라고 볼 수 있습니다. Facebook 개발팀이 개발하였고, 재사용이 가능한 UI구성 요소를 만들어, 데이터에 변화가 생기면 다시 처음부터 로드하지 않고, 변경된 부분만 다시 로드하여 성능을 최대화한 효율적인 자바스크립트 라이브러리이다. 좀 더 상세히 말하자면... DOM(Document Object Mode)은 객체로 문서 구조를 HTML이나 XML로 작성하여 표현하는데, 이러한 DOM에 변화가 일어나면 일반적으로 웹에서는 CSS를 다시 연산하고, 레이아웃을 다시 구성하여 페이지를 리페인트하기 때문에 시간이 오래걸린다. 하지만 리액트는 Virtual DOM(가상의 DOM) 을 이용하여 변경된 부분을 Real..