자기소개

무짱입니다.
간사이를 거점으로 활동하고 있는 프런트 엔드 엔지니어입니다.

HAL 오사카의 2 회생입니다 (2020.7.4 현재)

이벤트 등 돌고 있으므로 꼭 오사카 근처 분은 만나요!

1...REACT란?

Facebook이 개발한 웹 UI를 만들기 위한 자바스크립트 라이브러리.

[공식 문서]: htps : // 그럼. Rea ctjs. rg/

2 ... 구성 요소 란 무엇입니까?

[외형]+[기능]을 맞춘 물건.

외형 (View)

기능 (controller)

웹 구조 (구성 요소 트리)

· 오브젝트의 계층 구조

왜 컴포넌트를 사용하는가?

재사용하기

분할 통치를 위해 (서로 의존성 제거)

변수에 강해지기 위해

구성 요소 유형

· Functional Component (기능 컴포넌트)


・Class Component(클래스 컴포넌트)

3...DOM 정보

원래 DOM은 무엇입니까?

~Document Object Model (DOM)=요점은 인터페이스

HTML에 액세스하는 창구 같은 것
구조, 외형, 콘텐츠 변경

Virtual DOM이란?

~ React가 관리하는 DOM

브라우저 렌터링 및 별도 관리
-> 효율적으로 DOM 조작 가능

· 일반 DOM 조작

document.getElemntById('hoge').innerText='hoge'

· React의 VirtualDOM 조작

render(
<div id="hoge">hoge</div>
)

JSX 정보 (트랜스 컴파일)

~ Javascropt 내에서 HTML처럼 보입니다.

ReactDOM.render(
<div ClassName={hoge}>
  <h1>HelloWorld</h1>
</div>
)

4...JSX의 기본 문법에서의 주의점!!

· React 패키지 설치 필요

import React from "react"

・Class는 ClassName으로 기술

· 하나로 완료하는 태그는 종료 태그를 붙인다

후기

이번에는 나름대로 React에 대해 간결하게 정리해 보았다

다음 번은 state나 라이프 사이클에 대해 보다 자세하게 정리해 보고 싶습니다.

Twitter @HomgMuchan 꼭 팔로우 기다리고 있습니다 ❗️