React 개념정리
JSX(JavaScript XML)
JSX는 JavaScript를 확장한 문법이다. HTML에서 사용하는 태그들과 비슷한 문법을 사용한다.
function Start () {
return (
<div>
<div>Hello World!</div>
</div>
)
}
엘리먼트(Element)
컴포넌트의 구성 요소. react앱의 최소 단위이다.
- type(문자열 혹은 컴포넌트 함수/클래스) 필드와 props(객체) 필드로 표현된다.
컴포넌트 엘리먼트(Component Element)
- 엘리먼트의 type이 컴포넌트 클래스/함수인 경우(대문자로 시작)를 말한다.
- 사용자가 직접 정의한 컴포넌트를 표현한다.
- 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다.
클래스형 컴포넌트
import { Component } from "react"
Class New extends Component {
render() {
return <div>클래스형 컴포넌트</div>
}
}
exprot default New
함수형 컴포넌트
function New() {
return <div>함수형 컴포넌트</div>
}
export default New
↓ 화살표 함수로 간단하게 표현이 가능하다.
const New = () => <div> 함수형 컴포넌트 </div>
export default New
React State
보통 JavaScript는 변수로 선언하여 사용하지만 React에서는 state로 사용한다.
state는 변수 대신 쓰는 데이터 저장 공간이며, useState()를 이용해 사용한다.
- 웹, 앱처럼 동작하게 만들기 위한 중요 요소
- 화면에서 변화가 있을 때, 새로고침 없이 재 렌더링이 가능하다.
Author And Source
이 문제에 관하여(React 개념정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kkangda712/React-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)