[전 창고 React] 첫날: React 가 뭐 예요?

번역 자: iOS DevLog 링크:http://www.zcfy.cc/article/3765원문:https://www.fullstackreact.com/30-days-of-react/day-1/
오늘 우 리 는 처음부터 시작 했다.React 가 무엇 인지, 무엇이 React 를 작 동 시 키 는 지 봅 시다.우 리 는 왜 그것 을 사용 해 야 하 는 지 토론 할 것 이다.
앞으로 30 일 동안 React 홈 페이지 프레임 워 크 와 생태계 의 각 부분 을 체험 할 수 있 습 니 다.
우리 의 30 일 모험 에서 의 하루 하루 는 전날 의 재료 에 세 워 질 것 입 니 다. 따라서 시리즈 가 끝 난 후에 프레임 워 크 가 어떻게 작 동 하 는 지 에 대한 용어, 개념 과 기 초 를 알 수 있 을 뿐만 아니 라 다음 웹 응용 프로그램 에서 도 사용 할 수 있 습 니 다.
시작 합 시다.우 리 는 0 에서 시작 할 것 이다. 왜냐하면 그것 은 매우 좋 은 시작 장소 이기 때문이다.
React 가 뭐 예요?
React 는 사용자 인터페이스 구축 을 위 한 자 바스 크 립 트 라 이브 러 리 입 니 다.그것 은 웹 프로그램의 시각 층 이다.
모든 React 프로그램의 핵심 은 구성 요소 (components) 입 니 다.구성 요 소 는 출력 을 제공 하 는 자체 포 함 된 모듈 입 니 다.우 리 는 유사 한 단추 나 입력 필드 의 인터페이스 요 소 를 React 구성 요소 로 사용 할 수 있 습 니 다.구성 요 소 는 조합 할 수 있다.구성 요 소 는 출력 에 하나 이상 의 다른 구성 요 소 를 포함 할 수 있 습 니 다.
일반적으로 React 프로그램 을 만 들 기 위해 다양한 인터페이스 요소 에 대응 하 는 React 구성 요 소 를 만 들 었 습 니 다.그리고 이 구성 요소 들 을 응용 프로그램 구 조 를 정의 하 는 더 높 은 구성 요소 로 구성 합 니 다.
예 를 들 어 양식 을 받 습 니 다.폼 은 입력 필드, 탭, 단추 등 많은 인터페이스 요 소 를 포함 할 수 있 습 니 다.창의 모든 요 소 는 React 구성 요소 로 쓸 수 있 습 니 다.그리고 우 리 는 더 높 은 구성 요소, 형식 구성 요소 자 체 를 씁 니 다.폼 구성 요 소 는 폼 의 구 조 를 지정 하고 모든 인터페이스 요 소 를 포함 합 니 다.
중요 한 것 은 React 응용 프로그램의 모든 구성 요소 가 엄격 한 데이터 관리 원칙 을 준수 한 다 는 것 이다.복잡 한 대화 형 사용자 인터페이스 는 보통 복잡 한 데이터 와 응용 프로그램 상태 와 관련된다.React 의 표면 구역 은 제한 되 어 있 습 니 다. 프로그램 이 주어진 상황 에서 의 외관 을 예측 할 수 있 도록 도 구 를 제공 하 는 것 이 목적 입 니 다.우 리 는 뒤의 과정 에서 이런 원칙 들 을 토론 한다.
좋아, 그럼 우 리 는 어떻게 사용 할 까?
React 는 자 바스 크 립 트 프레임 워 크 입 니 다.프레임 워 크 를 사용 하 는 것 은 HTML 에 자 바스 크 립 트 파일 을 포함 하 는 것 처럼 간단 하 며, 자 바스 크 립 트 응용 프로그램 에서 내 보 내기 React 를 사용 합 니 다.
예 를 들 어 React 사이트 의Hello world_예 시 는 다음 과 같이 간단 할 수 있다.

  
  
  
  
  
  



  

  
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.querySelector('#app')
    );
  

좀 무서워 보일 수도 있 지만 자 바스 크 립 트 코드 는 동적 추가Hello world_페이지모든 작업 을 할 수 있 도록 자 바스 크 립 트 파일 만 포함 시 켜 야 합 니 다.
그것 은 어떻게 일 합 니까?
많은 전신 과 달리 React 는 브 라 우 저의 문서 개체 모델 (DOM) 에서 직접 실행 되 는 것 이 아니 라 가상 DOM (virtual DOM) 에서 실 행 됩 니 다.즉, document 우리 의 데 이 터 를 변경 한 후에 브 라 우 저 에서 조작 하 는 것 이 아니 라 가상 DOM 의 변경 을 해결 한 것 이다.리 액 트 는 가상 DOM 을 업데이트 한 후 실제 DOM 에 대한 변경 사항 을 스마트 하 게 확인한다.
가상 DOM 은 메모리 에 완전히 존재 하 며 웹 브 라 우 저의 DOM 표시 입 니 다.따라서 React 구성 요 소 를 쓸 때 우 리 는 DOM 에 직접 쓰 는 것 이 아니 라 가상 구성 요 소 를 쓰 는 것 입 니 다. React 는 DOM 이 됩 니 다.
다음 글 에서 React 구성 요 소 를 구축 하고 JSX 로 건 너 가 첫 번 째 진짜 구성 요 소 를 만 드 는 데 어떤 의미 가 있 는 지 살 펴 보 겠 습 니 다.