이 문서에서는 React의 기본 주제에 대해 설명합니다.

가상 DOM

JSX

부품

아이템

상태

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다.다시 말하면 웹 응용 프로그램의 시각도를 책임진다고 할 수 있습니다.

성명의

React는 프로그래밍의 설명식 스타일을 따릅니다.그것은 단지'우리가 무엇을 원하는가'를 의미할 뿐,'우리는 어떻게 하는가?'와는 다르다.방법제가 좀 더 설명해 드릴게요.만약 당신의 목표가 병원에 가는 것이라고 가정해 보세요.지금, 두 가지 방법이 있다.
성명: 병원만 가고 싶어요.
명령: 노선을 찾아 택시에 올라 목적지에 도착하세요.

구성 요소 기반

이것은 React에서 가장 좋은 기능 중의 하나입니다.이 때, React의 구성 요소는 기본적으로 자바스크립트 함수일 뿐, 두 가지 방법으로 정의할 수 있다는 것을 기억하십시오.우리의 진일보한 발전에 따라 우리는 더욱 많은 구성 요소를 소개할 것이다.

가상 DOM

너는 아마 DOM을 알고 있을 거야, 그렇지?음, 가상 DOM은 실제 DOM과 매우 비슷합니다.JS에서 변경 사항이 있으면 DOM 트리의 노드가 업데이트되고 페이지가 변경된다는 것을 기억하실 수 있습니다.
가상 DOM은 실제 DOM과 동기화됩니다.React는 응용 프로그램을 업데이트(상태 변경)할 때마다 이전 상태와 업데이트된 상태를 비교(diff 알고리즘 사용)하고 업데이트된 가상 DOM을 만들고 실제 DOM에 변경 사항을 적용합니다.문제는 "실제 DOM을 직접 업데이트할 수 없는 이유"입니다.만약 우리가 때때로 상태를 변경한다면, 매번 요소를 다시 렌더링해야 하며, 이것은 매우 비싼 임무를 초래할 것이다.가상 DOM은 최신 변경 사항만 업데이트하여 효율성을 높입니다.
official docs 에서 자세한 내용을 확인할 수 있습니다.

그림은cronJ에서 제공합니다.일반 도메인 이름 형식

JSX 회사

JSX는 HTML과 유사해 보이지만 그렇지 않습니다.이것은 React 요소와 UI를 만드는 데 사용되는 구문 기호입니다.

function App() {
  return(
    <h1 className="header">Hello World</h1> // JSX
  )
}

엔진 덮개 아래에서 babel 를 열려고 하면 다음 코드가 표시됩니다.

React.createElement("h1", {className: "header"}, "Hello World");

다양한 방법으로 React 구성 요소의 스타일을 설정할 수 있습니다.스타일링에 관한 좋은 글이 있습니다here.

구성 요소

구성 요소는 React 요소를 반환하고 UI의 모양을 설명하는 JavaScript 함수 또는 클래스입니다.우리는 하나의 예로 이 점을 이해합시다.

기능 구성 요소

function App() {
    return(
        <h1>Hello World<h1>
    )
}

Output: Hello World

기능 구성 요소에서 setState () 와 같은 방법을 사용할 수 없습니다. 이것이 바로 기능 구성 요소가 우리가 제공한 입력에서 UI로 되돌아오기 때문에 무상태 구성 요소라고 불리는 이유입니다.다른 한편, 클래스 구성 요소를 보면 구조 함수, 상태, 심지어 상태를 변경할 수 있는 상태를 볼 수 있다.그래서 그것은 약간 상태가 있는 구성 요소 같다.

클래스 기반 구성 요소

class App extends React.Component {
    render() {
        <h1>Hello World<h1>
    }
}

Output: Hello World

클래스 기반 구성 요소에 대해render () 방법이 필요합니다.

도구

도구는 데이터를 한 구성 요소에서 다른 구성 요소로 전달하는 데 사용됩니다.도구는 데이터 속성과 같다고 할 수 있다.왜 그런지 보여줘!

function Name(props) {
    return(
        <h1>Hello, {props.name}</h1>
    )
}

function App() {
    return(
        <Name name="Rick"/>
    )
}

ReactDOM.render(<App />, document.getElementById("root"))


Output: Hello, Rick

따라서, 여기에는 두 개의 구성 요소, 즉 이름과 응용 프로그램 구성 요소가 있습니다.React는 응용 프로그램 구성 요소에 정의된 도구로 이름 구성 요소를 호출합니다.기억해라, 도구는 대상 형식이다.간단히 말하면Name은 대상 도구의 "Name"키를 받아서 요소를 화면에 렌더링합니다.
문서에서 "모든 React 구성 요소는 도구에 대해 순수한 함수처럼 작동해야 합니다."도구는 읽기 전용입니다.도구는 변하지 않는다.도구는 항상 구성 요소 외부에서 전달됩니다.함수는 우리가 되돌려 주기를 원하는 내용을 되돌려줍니다.해결 방안은 동적 데이터를 처리할 때 유용한 것들을 정의하는 것이다.그래, 네 생각이 맞다. 이걸 상태라고 한다.

상태

상태는 React에서 가장 중요한 개념 중 하나입니다.거의 모든 것이 그것에 달려 있다.모든 상태가 바뀔수록 우리의 관점도 바뀔 것이다.
이것은 계수기의 간단한 예이다.버튼을 클릭하면 계수 값이 1 증가합니다.

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      }
    })

  }

  render() {
    return(
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

우리가 여기서 해야 할 일은 계수기를 업데이트하는 것이다. 이전의 상태를 업데이트하는 것이다.우리는 여기까지 와서 말할 수 없다.

this.state.count + 1

반대로 상태를 설정하기 위해 React는 setState() 메서드를 사용합니다.주의해야 할 것은 setState는 비동기적이다.이런 상황을 피하기 위해서는 리셋이 매우 편리하다.위의 코드 세그먼트에서 상태를 설정할 때, 우리는prevState를 수신하는 리셋을 매개 변수로 사용합니다.따라서 버튼을 클릭할 때마다 이전 상태로 돌아가 하나씩 증가합니다.
훌륭한 React 개발자가 되고 싶다면 this 의 Toptal 글을 보십시오.이것은 고급 구성 요소, React의 기능 프로그래밍, 상태 관리 등 주제에 대한 상세한 이해를 제공한다.그러니까 꼭 가봐야지!
본문을 읽어 주셔서 감사합니다.계속 저를 팔로우하고 더 많은 업데이트를 알아보세요.