[번역] 점차적으로 React 파악 하기 (Angular 개발 자로 서)

Getting to Grips with React (as an Angular developer)감사합니다!이 머리 를 그대로 두 십시오.
React 에 관심 이 있 는 Angular 개발 자 입 니까?걱정 마 세 요. 이 건 정말 당신 을 배신자 나 다른 무엇이 되 게 하지 않 을 거 예요. 정말 이에 요.
아마 당신 은 이미 React 를 하기 시 작 했 을 것 입 니 다. 페 이 스 북 의 공식 튜 토리 얼 을 읽 고 구성 요 소 를 만 들 었 습 니 다.
아마도 당신 은 내 가 몇 달 전에 처 한 상황 에 처 해 있 을 것 입 니 다. React 에 대해 전혀 경험 이 없습니다. 그것 이 얼마나 빠 른 지 들 어 본 적 이 있 는 것 을 제외 하고 가상 DOM 의 개념, 단 방향 연결, 그리고 Flux, Redux, Reflux 와 같은 난잡 한 것들 이 있 습 니 다.
다음 일련의 글 에서 나 는 네가 힘 들 게 배 운 'Angular' 주의 지식 을 React 에 응용 하 는 데 도움 을 줄 것 이다.
Angular 에 서 는 여러 가지 명령 어 directive 를 작성 하 는 것 에 익숙 해 졌 을 것 입 니 다.유행 하 는 규범 에 따라 인 코딩 을 한다 면 프로그램의 각 부분 이 하나 이상 의 명령 으로 구 축 된 것 이 라 고 믿 고 격 리 된 역할 영역 scope 을 사용 하고 있 습 니 다.
React 는 같은 개념 을 가지 고 있 습 니 다. 구성 요소 작성 component.프로그램 을 기능 에 따라 구성 요소 블록 으로 나 누고 가능 한 한 모든 구성 요소 블록 을 독립 적 이 고 재 활용 할 수 있 도록 합 니 다.사실 이 생각 은 React 나 Angular 가 독창적 인 것 이 아니 라 좋 은 소프트웨어 개발 실천 방식 일 뿐이다.가능 한 한 간단 하고 재 활용 가능 한 코드 (함수, 구성 요소, 명령, 마음대로 부 르 세 요) 를 쓰 세 요.
하나의 관건 적 인 차 이 는 React 에 있 는 모든 것 이 구성 요소 이 고 뿌리 노드 에서 아래 까지 모든 것 이다.Angular 는 모든 명령 을 혼합 하고 일치 시 키 기 위해 ng-controller 를 사용 하 라 고 했 습 니 다. 그 다음 에 특정한 경로 에서 각자 의 명령 과 템 플 릿 을... React 는 이 일 을 간단하게 만 들 었 습 니 다.모든 것 이 구성 요소, 페이지, 버튼, 심지어 경로 입 니 다. 우 리 는 나중에 이 야 기 를 할 것 입 니 다.
자, 그 러 니까 React 의 '구성 요소' 는 '명령' 과 유사 합 니 다.그럼 코드 는 어떻게 보 여요?
다음은 노래 이름 을 보 여 주 는 Angular 명령 입 니 다.

angular.module('demo', []).directive('songName', function() {
  return {
    scope: {
      song: '='
    },
    restrict: 'E',
    template: '{{ ctrl.song.name }}',
    controller: function() {},
    controllerAs: 'ctrl',
    bindToController: true
  };
});

다음은 React 로 작 성 된 같은 기능 의 구성 요소 입 니 다.

var SongName = React.createClass({
  propTypes: {
    song: React.PropTypes.object.isRequired
  },
  render: function() {
    return {this.props.song.name};
  }
});

너 는 곧 비슷 한 점 을 발견 할 수 있 을 것 이다. 그들 은 모두 song 대상 을 얻 기 를 기대 하고 여러 가지 모델 이 있 는 것 같다.
일부 차이 점 은 React 가 Angular 에 비해 더 적은 코드 를 가지 고 있다 는 점 이다.제 가 감히... 더 깔끔 하지 않 나 요?React 에서 원 하 는 매개 변수 song 는 특정한 유형 검증 이 있 고 HTML 에는 따옴표 가 없습니다!
사실 따옴표 가 붙 지 않 은 것 처럼 보 이 는 HTML 은 진정한 HTML 이 아니다.(이따가 얘 기 할 게 요)React.createClass 와 angular.directive 유사 합 니 다. - 구성 요소 클래스 를 만 들 었 습 니 다.이 구성 요 소 는 하나의 render 방법 이 있어 야 합 니 다. propTypes 선택 가능 한 대상 이지 만 적어 두 는 것 이 좋 습 니 다.
Angular 에 맞 아야 합 니 다. 1.5 버 전 은 사실 명령 의 길 이 를 줄 이 는 방법 component 을 소 개 했 기 때문에 위의 명령 은 아래 와 같이 간략하게 쓸 수 있 습 니 다.

angular.module('demo', []).component('songName', {
  bindings: {
    song: '='
  },
  template: '{{ $ctrl.song.name }}'
});

더 쉬 운 문법.그것 은 심지어 기본적으로 컨트롤 러 가 없다!Todd Motto 의 구성 요소 방법 에 관 한 글 을 읽 고 코드 에서 시도 해 보 는 것 을 추천 합 니 다.
그래도 없어 요 propTypes..
propTypes propTypes 구성 요소 에 필요 한 인 자 를 검증 하 는 방법 입 니 다.개별 매개 변 수 를 '필요 한 것' 이나 '선택 할 수 있 는 것' 으로 표시 할 수 있 습 니 다.
다음은 정말 멋 진 부분 입 니 다. propTypes 를 지정 하고 하나의 매개 변수 가 필요 하 다 는 것 을 설명 한 다음 에 이 를 전달 하 는 것 을 잊 어 버 리 면 콘 솔 에서 힌트 정 보 를 얻 을 수 있 습 니 다.
Angular 보 다 는 너무 좋아요!네가 지령 에 전 참 하 는 것 을 잊 었 을 때, 너 는 다 시 는 영문 도 모 르 고 잘못 보고 하 는 것 을 두려워 하지 않 을 것 이다.
props
'prop' 이 뭐 예요?이 는 실제 적 으로 'property' 의 약자 (React 개발 자 에 게 감 사 드 립 니 다. 다 시 는 this.properties 나 this.propertyTypes 를 치지 않 아 도 됩 니 다.
구성 요소 에 전 달 된 속성 으로 볼 수 있 습 니 다.명령 어 에서 HTML 요소 에서 속성 을 전달 하 는 것 처럼 - props JSX 요소 에서 속성 으로 전 달 됩 니 다.
구성 요소 사용
다음은 Angular 에서 명령 을 사용 하 는 방법 입 니 다.

// Notice how you have to mentally translate 'songName' to 'song-name'?

그리고 다음은 React 에서 구성 요 소 를 사용 하 는 방법 입 니 다.

// Notice how you DON'T need to mentally translate SongName to anything?
    

하위 요소 가 없 는 모든 탭 은 JSX 에서 자동 으로 종 료 될 수 있 습 니 다.
근 데 JSX 얘 기 하 는 데 몇 분 걸 릴 까요?
JS 의 HTML?!
내 가 React 에 대해 많이 알 지 못 했 을 때, 나 는 그것 이 HTML 과 JS 를 혼합 한 것 이라는 것 을 알 았 다. 그리고 나 서 나 는 이렇게 하 는 것 이 정말 추 하 다 고 생각 했다.내 말 은, 이것 은 최선 의 실천 에 대한 사고 에 있어 서 이미 여러 해 동안 이렇게 쓰 지 않 았 을 것 이다. 그렇지 않 니?jQuery 를 사용 한 어두 운 날 부터 JS 에 HTML 요 소 를 쓰 는 것 이 교묘 하고 개발 체험 이 상당히 나 쁜 일 이라는 것 을 알 고 있 었 습 니 다. 그래서 왜 React 는 다시 같은 실 수 를 저 질 렀 습 니까?
그래서 여기 서 알 아야 할 두 가지 가 있 습 니 다.

그것 은 문자열 이 아 닙 니 다.너 는 그것 이 어떻게 "HTML" 에 따 옴 표를 붙 이지 않 을 수 있 는 지 알 고 있 니?그것 은 HTML 이 아니 기 때문이다.따옴표 가 붙 지 않 는 것 도 문법 사탕 이 아니 라 React 는 그 물건 을 HTML 로 바 꾸 지 않 는 다.

그 건 HTML 이 아니 야.JSX 입 니 다.나 는 그것 이 HTML 처럼 생 겼 다 는 것 을 알 고 있다. 곧 너 는 "JSX 잖 아. HTML 에 대해 약간의 변 화 를 하고 이름 을 바 꿨 을 뿐 이 야" 라 고 생각 할 것 이다. 그래, 너 도 그렇게 말 할 수 있다.나 는 오히려 그것 이 우리 에 게 함수 호출 을 통 해 DOM 요 소 를 만 드 는 문법 사탕 을 제공 한 것 이 라 고 생각한다.

JSX 를 자 바스 크 립 트 로 컴 파일
DOM 요 소 를 만 드 는 함수 호출?네, 아래 코드 를 보 세 요.

// This JSX...
{this.props.song.name}

// Compiles to this function call:
React.createElement('span', {className: 'song-name'}, this.props.song.name);
// React.createElement('tagName', props, children);

보아하니 꽤 일리 가 있 는 것 같은 데, 그렇지 않 니?HTML 에 포 함 된 DOM 노드 를 만 듭 니 다. 포 함 된 DOM 노드 대신 포 함 된 함수 로 호출 합 니 다.

// This is valid JSX:

  
    Hello
    World
  


// ...which compiles to this call:
React.createElement('div', null,
  React.createElement('span', {className: 'greeting'},
      React.createElement('strong', null, 'Hello'),
      React.createElement('strong', null, 'World')
    ));    

실현 에 있어 이런 props 방법 은 진정한 DOM 노드 를 만 들 지 않 았 고 가상 DOM 노드 를 만 들 었 다.
하지만.. 관심 의 분리!
그 러 니까 우 리 는 HTML 문자열 을 자바 script 에 쓴 것 이 아니다!
그러나 코드 논 리 는 시종 표현 층 과 혼합 되 어 있다!그것 은 결코 옳다 고 할 수 없다!이렇게 많은 해 동안 의 소프트웨어 개발 실천 은 우리 에 게 이렇게 하 는 것 은 매우 좋 지 않다 고 알려 주 었 다.안심 하 세 요. 아직 다 하지 못 했 을 뿐 보기 와 논 리 를 섞 지 않 았 습 니 다.
나 는 이것 이 '화물 숭배' 와 유사 한 것 이 라 고 생각한다. 우 리 는 왜 이런 상황 에서 찬성 하고 집행 하 는 지 진정 으로 파악 하지 못 한다.논리 와 보기 층 을 분리 해 야 하 는 이 유 를 설명 하 는 좋 은 이유 가 많 지만 뒤 돌아 보면 좋 은 이유 도 많다.
혹시 컨트롤 러 와 분 리 된 템 플 릿 파일 이 있 는 Angular 명령 을 썼 나 요?
컨트롤 러 를 볼 수 없 거나 수정 할 수 없 는 상황 에서 템 플 릿 파일 에 가서 수정 하 는 것 이 얼마나 많은 지 알려 주 시 겠 습 니까?템 플 릿 에 접촉 하지 않 은 상태 에서 컨트롤 러 를 수정 하 는 일이 얼마나 자주 있 습 니까?
이것들 은 당신 이 관심 사 에 대한 분리 로 보 입 니까?
우 리 는 JS 와 HTML 을 서로 다른 파일 로 분리 하여 '관심 사 분리' 시 키 는 것 을 좋아 합 니 다. 재 활용 성 이 있 습 니 다!
하지만 그렇게 일 하 는 경 우 는 드물다.명령 어 컨트롤 러 와 템 플 릿 이 서로 밀접 하 게 연결 되 어 있 기 때문에 자 연 스 럽 게 동전 의 양면 과 같다.코드 를 다른 파일 로 분리 하 는 것 은 자동 으로 관심 사 분 리 를 초래 하지 않 습 니 다.
만약 당신 이 아직 눈치 채 지 못 했다 면, 사실 나 는 위의 설 을 통 해 템 플 릿 과 논리 적 통 제 는 사실 하나의 파일 에 공존 할 수 있다 는 것 을 알려 주 고 싶 었 습 니 다. 그리고 이렇게 하 는 것 이 더 일리 가 있 을 지도 모 릅 니 다.
시험 해 보다
나 는 네가 여전히 의심 으로 가득 차 있다 는 것 에 감히 내 기 를 할 수 있다.정상, 나 도 그 랬 어.
개인 적 으로 나 는 오랫동안 믿 었 던 이론 에서 완전히 반대 되 는 위치 로 튀 어 나 오 는 것 이 상당히 어 려 운 일이 라 고 생각한다.나 는 직접 그렇게 해 보고 이 새로운 방법 이 그리 나 쁘 지 않다 는 것 을 증명 해 보 았 다.
당신 도 같은 일 을 할 수 있 기 를 바 랍 니 다. 조금 만 시간 이 필요 합 니 다.React 의 공식 튜 토리 얼 을 시도 해 보 세 요.
아마 내 가 한 것 처럼 React 구성 요 소 를 쓰 는 것 이 정말 재 미 있 을 것 이다.아니면 React 가 당신 이 원 하 는 것 이 아니 라 는 것 을 알 게 될 수도 있 지만, 적어도 당신 은 시도 하고 검증 한 적 이 있 습 니 다.
만약 네가 그것 을 사용 하기 로 결정 했다 면, 여기에 돌아 와라, 내 가 너 를 기다 릴 게!