[React] 리액트 주요 개념

리액트의 주요특징

 

1. 가상 DOM : 일반적으로 웹 페이지 View를 변경할때, 사용자의 클릭등의 이벤트에 따라 DOM 을 변경하여 웹 사이트 내용을 갱신한다.

그러나 React는 Virtual DOM을 도입하여 리액트에서 실제 DOM의 복사본인 가상 DOM을 만든뒤, 변화를 주고 싶은 부분의 DOM을 변경하여 실제 DOM과 가상 DOM의 차이점만 반영하게 된다.

 

2. 컴포넌트 기반

리액트에서 요소를 렌더링하는 가장 기본적인 방식으로 함수형 또는 클래스형 컴포넌트를 통해 요소를 생성한다.

 

index.js

리액트의 기본 프로젝트 구조중에서 index.js라는 하나의 파일에서 웹 페이지가 생성된다.

root는 React의 가장 베이스 요소이고, 해당 root 요소 안에 <App> 이라는 컴포넌트를 삽입한 형태인 것이다.

 

App.js

 

다음은 App.js 파일이다.

컴포넌트들을 함수의 형태로 작성하고, App() 함수안에서 해당 컴포넌트를 삽입해주면서 Html 파일을 렌더링 하는 형태이다.

 

Props

 

 

함수형 컴포넌트의 파라미터로 받는 props는 Object 형태이다.

<Article> 컴포넌트의 속성들(Properties)을 React의 컴포넌트에서 파라미터로 받아 해당 props에서 요소들의 속성을 객체형태로 꺼내쓸수 있다.

 

State

 

리액트에서 중요한 개념인 state는 props와 무엇이 다를까?

props는 요소의 속성값을 파라미터로 컴포넌트에 전달되는 반면

state는 컴포넌트 안에서 관리된다.

쉽게 말하면, props는 단순히 JavaScript내에서 일종의 변수로 관리되는반면

state값은 변경되면 state객체에 대한 컴포넌트는 리렌더링된다.

즉, 동적으로 HTML을 변경할수 있다는 얘기다.

사용자의 요청에 따라 동적으로 HTML요소를 변경하고싶을때, state의 setState()함수를 통해 state값을 변경시키면,

자동으로 리렌더링 되어 HTML요소가 변경된다.

 

 

 

다음의 Count 컴포넌트는 count라는 변수를 state로 관리한다.

즉, up()라는 함수를 실행하면 setCount()를 통해 count값을 1 증가시기고, down은 그 반대이다.

return값으로 up()함수를 실행하는 버튼과 현재 count 값을 jsx표현식으로 {count}로 표현한다면,

up() 함수가 실행되면 setCount()를 통해 state값이 변경되고 해당 컴포넌트 (Count)는 리렌더링 된다.