React 개념정리

강다현·2022년 1월 22일
0

2주차

목록 보기
5/5

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()를 이용해 사용한다.

  • 웹, 앱처럼 동작하게 만들기 위한 중요 요소
  • 화면에서 변화가 있을 때, 새로고침 없이 재 렌더링이 가능하다.
profile
Hello🖐

0개의 댓글