티스토리 뷰

차곡차곡/Frontend

React를 이용한 Counter 만들기 - (2)

p퐝유p 2022. 4. 15. 21:29

이제 React를 이용하여 counter를 만들어 보자.

 

React란? 

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 

상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다.

애플리케이션의 각 상테에 대한 간단한 뷰만 설계하면 React는 데이터가 변경됨에따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.

 

 

ReactDOM이란?

- React를 <script>태그로 불러온다면 ReactDOM 글로벌 영역에서 상위레벨 API를 이용할 수 있다.

 

react와 React는 <head>에 CDN을 통해 사용할 수 있다.

CDN이란?

Content Delivery Network의 약자이다. 전 세계의 서버 네트워크에 캐시된 정적 콘텐츠를 제공한다.

아래의 공식 react 사이트에서 링크를 얻을 수 있다.

https://ko.reactjs.org/docs/cdn-links.html

 

리액트 사용하기 위한 기본 html 템플릿은 아래와 같다. 따로 다운로드를 받지 않고 링크만으로 사용 가능하다.

-Increase 버튼을 생성한다.

 

- 콘솔에셔 React 자체를 출력해본다.

이것은 React라는 API가 가진 프로퍼티들을 출력한 것이다. 

즉,  React의 최상위 API, React 라이브러리의 진입점이다.

 

js로 counter를 만들 때로 돌아가서 , 

React에 대입하면 이전 상태 (<P>0</p>)와 최근 상태  (<P>1</p>)와의 차이를 비교해주고, 이러한 변경내역을 감지하여 ReactDOM한테 전달하는 것이다.

ReactDOM.createElement (type,[props],[...childern])

React.createElement(
  type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  [ ... children] // 자식으로 넣어주는 요소들
);

type 은 div, props는 해당이 안되어서 null이고, children(자식 요소)는 'div입니다.' 이다. 

콘솔을 보면 이렇게 출력이 된다는 것을 확인할 수 있다.

ReactDOM.render (element, container[,callback])

.render는 Web API를 사용하여 웹 브라우저에 그려주는 함수이다.

리액트 요소를 루트 DOM요소에 랜더링 하고 싶을 때 사용한다. 

 

'div입니다' , 'p입니다' 두 줄을 입력하고 싶으면 React.createElement안 Child로 또 하나의 React.createElement를 넣어주면 된다.

 

Component란?

이 컴포넌트를 통해 react에서 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.\

일반적으로 대문자로 시작한다. 

 

1. 클래스 컴포넌트 (class component ~ ) / 2. 함수형 컴포넌트 : 함수의 형태로 작성

 

클래스 컴포넌트보다 함수형 컴포넌트가 컴포넌트 선언이 편하기에 이를 사용하겠다. 

 

props란?

property의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용된다.props의 타입은 객체(object)다.프로퍼티는 수종이 불가하며, 자식 입장에서는 읽기 전용 데이터이다. 

 

함수형 컴포넌트를 만들었다. 화살표함수로 간단하게 만들 수 있다.

 

<초기 렌더링>

    1. Component함수를 다시 받아 createElement에 넣는다.

 

    2.  {count:0}은 props 이다.  그 다음 root 태그에 넣어 렌더링한다.

 

- i 초기 값을 0으로 설정한다.

- 클릭 이벤트 발생에 따라 Re-Rendering이 될 수 있도록 한다.

- 전체 과정이다.

그럼 요로콤콤 Increase버튼을 누를 때 마다 카운트가 증가하는 결과를 맛 볼 수 있다. 아 맛있다.

 

 

'차곡차곡 > Frontend' 카테고리의 다른 글

[React] Props와 State / 리액트로 클릭 카운터 만들기  (0) 2022.04.17
[React] Components와 Props / 컴포넌트 다이어트 성공기  (0) 2022.04.17
[React] 엘리먼트 렌더링 - tick 만들기  (0) 2022.04.17
[React] JSX  (0) 2022.04.15
React를 이용한 Counter 만들기 (1)  (0) 2022.04.14