간단한 리액트 컴포넌트 생성
우선 VSCode로 리액트 프로젝트 실행 후 src폴더에 Hello.js 파일 생성,
그리고
import React from 'react'코드를 넣어 준다.
리액트를 불러와서 사용하겠다는 의미
컴포넌트를 만들 때 함수형과 클래스형으로 만들 수 있는데
일단 함수형으로 만들어 보자.
Hello 함수를 만들고 xml 형태의 값을 리턴 시켜준다.
이때 리턴 값은 JSX 라고 한다.
그리고 함수 컴포넌트 밖에
export default 함수명; 코드 작성.
Hello라는 함수를 내보내주겠다는 의미
App.js에서 컴포넌트 실행
import React 빼고 다 지워준 후
새로 만든 컴포넌트 Hello를 import 시켜준다.
import Hello from "./hello";function App() 의 return의 div 안에 값을 모두 지워 준 후
<Hello/>라고 입력해준다.
그리고 다시 터미널 창에 yarn start 로 react 실행하면
hello.js 컴포넌트의 내용이 그대로 나온다.
Q 컴포넌트(Component)의 개념
컴포넌트(component)?
: 하나의 부품 처럼 버튼, 텍스트 박스 등 자주 쓰이는 요소를 UI
컴포넌트로 만들어 UI의 부품,구성 요소가 되는 것을 말한다.
Q 함수 컴포넌트와 클래스 컴포넌트(리액트 레퍼런스 참고)
Q 컴포넌트 렌더링의 의미와 작동원리?
위 예제의 index.js 파일을 들어가 보면
이런 구조의 코드가 있다.
이는 Document에서 id가 root인 것을 찾아서 < App/ >의 내용을 넣겠다는 의미이다. ( id가 root인 것은 index.html에서 찾을 수 있음.)
이 구조에서 컴포넌트의 렌더링 과정은 react 컴포넌트의 내용이 html 코드에서 id 가'root'인 값을 찾아 Document(Dom) 문서 안에 삽입이 되는 것이다.
Rendering
리액트에서 Rendering이란?
: render()함수 가 컴포넌트 정보를 이용해서 UI를 구성하는 것을 말한다.
작동 원리
컴포넌트 정의 -> render 함수의 컴포넌트 정보를 렌더링-> html코드로 반환-> Domcument(Dom) 요소로 삽입
의 과정이다.
