함수 식 React

반응 의 기능 적 측면
저자: Andrea Chiarelli
번역자: 박 헌
React 는 현재 가장 유행 하 는 자 바스 크 립 트 라 이브 러 리 중의 하나 이다.React 를 사용 하면 웹 사용자 인 터 랙 션 인터페이스 를 쉽게 만 들 수 있 습 니 다.그것 의 성공 에는 많은 요소 가 있 지만, 아마도 그 중의 한 요 소 는 뚜렷 하고 효과 적 인 프로 그래 밍 방법 일 것 이다.
React 의 세계 에서 UI 는 하나의 구성 요소 로 구성 되 어 있 습 니 다.구성 요 소 는 다른 구성 요 소 를 만 들 기 위해 조합 할 수 있 습 니 다. 응용 자체 가 모든 구성 요 소 를 포함 하 는 큰 구성 요소 입 니 다.개발 자가 React 를 사용 하면 대상 을 대상 으로 프로 그래 밍 하 는 것 을 쉽게 연상 할 수 있 습 니 다.구성 요소 의 문법 자 체 를 정의 하기 때문에 다음 과 같은 느낌 을 줄 수 있 습 니 다.

class HelloReact extends Component {
  render() {
    return (
Hello React!
);
  }
}

거위, 대상 을 향 한 표상 아래 React 는 함수 식 특질 을 숨 겼 다.이 특질 들 이 무엇 인지 볼 까요?
사용 render() 렌 더 링 출력
React 구성 요소 의 큰 특징 은 render() 방법 을 포함 하고 있다 는 것 이다.render() 방법 을 포함 하지 않 은 구성 요 소 는 React 구성 요소 가 아 닙 니 다.render() 방법 은 항상 React 요 소 를 되 돌려 줍 니 다. 이런 행 위 는 구성 요소 의 특징 과 같 습 니 다.다시 말 하면 React 는 모든 구성 요소 에 출력 이 있어 야 한다 고 요구 할 것 이다.구성 요 소 는 입력 에 따라 출력 을 되 돌려 줍 니 다. 이렇게 구성 요 소 를 고려 하면 구성 요소 가 대상 이 아 닌 함수 처럼 느껴 집 니 다.
구성 요 소 는 함수 입 니 다.
실제로 React 구성 요 소 를 함수 로 볼 수 있 을 뿐만 아니 라함수 로 구성 요 소 를 실현 할 수 있 습 니 다.다음 코드 는 함 수 를 사용 하여 위 에서 정의 한 구성 요 소 를 어떻게 실현 하 는 지 보 여 줍 니 다.

const HelloReact = () => 
Hello React!
;

보시 다시 피 구성 요 소 를 실현 하 는 간단 하고 치밀 한 방법 입 니 다.
또한 함수 에 인 자 를 전달 할 수 있 습 니 다:

const Hello = (props) => 
Hello {props.name}!
;

위의 예제 에서 props 인 자 를 전 달 했 습 니 다. 여기 props 대상 은 한 구성 요소 에서 다른 구성 요소 로 데 이 터 를 전달 하 는 데 사 용 됩 니 다.props 의 불변성
알다 시 피 props 는 바 꿀 수 없다. 그들 을 읽 을 수 는 있 지만 바 꿀 수 는 없다.이것 도 바로 React 구성 요소 의 함수 특성 중의 하나 이다.props 구성 요소 의 입력 매개 변수 이기 때문에 불변성 을 주면 부작용 을 피 할 수 있다.실제로 이것 도 함수 식 프로 그래 밍 의 기본 원칙 중 하나 이다. 함 수 는 입력 파 라 메 터 를 변경 할 수 없다.
번역: 순수 함수 의 소개, 이것 을 추천 합 니 다 - 함수 식 프로 그래 밍 - wiki, 그리고 제 가 전에 번역 한 자바 스 크 립 트 의 함수 식 프로 그래 밍 원리
단일 항목 데이터 흐름React 에 대한 또 다른 특성 은 단일 데이터 흐름 이다.이것 은 구성 요소 의 차원 구조 에서 데이터 가 비교적 높 은 구성 요소 에서 비교적 낮은 구성 요소 로 흘러 가 야 한 다 는 것 을 의미 하 며, 반대로 도 마찬가지 이다.만약 우리 가 구성 요 소 를 대상 으로 본다 면, 이 관점 은 좀 억 지 스 러 워 보일 것 이다.반대로 우리 가 함수 의 측면 에서 구성 요 소 를 고려 하면 자 연 스 러 워 보인다.
다음 코드 를 고려 해 보 세 요.

class App extends Component {
  render() {
    return ()
  };
}

class Hello extends Component {
  render() {
    return (
Hello {props.name}!
);
  }
}

예 를 들 어 두 개의 구성 요소 가 있 습 니 다. App 구성 요 소 는 Hello 구성 요 소 를 사용 하여 "Hello React!" 를 보 여 줍 니 다.이 동시에 예 에서 도 구성 요소 간 의 차원 구 조 를 암시 적 으로 정의 했다.그러나 얼핏 보면 name 속성 을 통 해 데이터 의 흐름 을 알 수 없다.
이제 함수 로 수 정 된 코드 를 살 펴 보 자.

const App = () => ;
const Hello = (props) => 
Hello {props.name}!
;

위의 구성 요소 의 등급 구 조 를 통 해 알 수 있 듯 이 App() 와 Hello() 두 함수 의 조합 에 불과 하 다.너 도 그것 을 아래 의 내용 으로 볼 수 있다.

const App = () => Hello("React");

위의 예 에서 'React' 텍스트 가 앱 구성 요소 에서 어떻게 전달 되 는 지 뚜렷하게 알 수 있다.
여기 원문의 예 에서 사용 하 는 것 은const App = () => Hello("John"); 글 의 'React' 와 일치 하지 않 아서 예 에서 전달 한 문안 을 고 쳤 습 니 다. 헤헤...
그룹 vs 상속
대상 을 대상 으로 하 는 프로 그래 밍 범례 에서 클래스 에 대해 서 는 계승 을 하나의 기준 으로 보기 쉽다.그러나 함수 의 측면 에서 React 구성 요 소 를 고려 하면 계승 이 자 연 스 럽 지 못 하 다.
예 를 들 어 '환영 메시지' 를 표시 할 수 있 도록 구성 요 소 를 업그레이드 하 겠 다 고 가정 합 니 다.다음 예 와 같은 Hello 구성 요소 와 조합 하여 새 구성 요 소 를 만 들 수 있 습 니 다.

const HelloAndWelcome = (props) => 
Welcome to React!
;

페 이 스 북 팀 이 밝 힌 바 와 같이 계승 이 필요 한 경 우 는 정말 드물다.
고급 구성 요소 와 고급 함수
고급 구성 요 소 는 Hello 프로 그래 밍 에서 흔히 볼 수 있 는 모델 이다.새 구성 요 소 를 만 들 기 위해 구성 요소 논 리 를 다시 사용 할 수 있 습 니 다.쉽게 말 하면 고급 구성 요 소 는 하나의 함수 입 니 다. 하나의 구성 요 소 를 입력 으로 하고 새로운 구성 요 소 를 출력 으로 되 돌려 줍 니 다.다음은 고급 구성 요소 의 예제 입 니 다.

const AddWelcome = (GreetingComponent) => {
  class TheNewComponent extends Component {
    render() {
      return (
        

          
          
Welcome to React!
        
);
      }
    }

  return TheNewComponent;
};

함수 React 는 AddWelcome() 인 자 를 받 아들 이 고 새 구성 요소 GreetingComponent 가 정의 한 TheNewComponent 방법 에서 사용 합 니 다.이 새 구성 요 소 는 출력 후 환영 메 시 지 를 추가 할 뿐 입 니 다.마지막 으로 함수 render() 는 새 구성 요 소 를 되 돌려 줍 니 다.
다음 예제 와 같이 이 기능 을 사용 할 수 있 습 니 다.

const HelloAndWelcome = AddWelcome(Hello);

GreetingComponent 포장 AddWelcome() 구성 요 소 를 사용 하면 새 구성 요 소 를 얻 을 수 있 습 니 다.
위의 예 에서 고급 함수 AddWelcome() 를 함수 로 다시 정리 할 수 있 습 니 다.

const AddWelcome = (GreetingComponent) => {
  const TheNewComponent = (props) => 
Welcome to React!
;
  
  return TheNewComponent;
};

보시 다시 피 이것 은 고급 함수 와 같 습 니 다. 이 함 수 는 함 수 를 받 아들 여 새로운 Hello 요 소 를 되 돌려 줍 니 다.
구성 요소 와 상태
응용 프로그램의 상 태 는 시간 에 따라 변화 하 는 데이터 세트 입 니 다.함수 식 프로 그래 밍 범례 는 응용 프로그램 에서 사용 되 는 상 태 를 피 하 는 데 목적 을 둔다.실제로 응용 프로그램 상태 관 리 는 소프트웨어 개발 에서 복잡성 의 주요 원천 중 하나 이다.그러나 그것 이 없 으 면 안 되 기 때문에 적어도 사용 을 제한 하고 관리 하기 쉽게 해 야 한다.AddWelcome() 의 개발 안내 서 는 무 상태 구성 요소 의 생 성 을 추진 했다. 즉, 무 React 구성 요소 이다.이 구성 요소 의 출력 은 들 어 오 는 것 React 에 만 달 려 있다.무 상태 구성 요 소 는 순 함수 처럼 보이 지만 실제로 도 마찬가지 입 니 다.
하지만 알다 시 피 state 을 사용 하지 않 고 복잡 한 프로그램 을 만 들 수 없습니다.노 하 우 는 애플 리 케 이 션 의 몇 가지 점 에서 격 리 props 하 는 것 으로 한 점 에서 더 좋다.이 정책 은 개발 자 에 게 루트 구성 요소 에서 사용 상태 향상 을 요구 합 니 다.상부 노드 에 상 태 를 유지 해 야 하고 그 후 대 는 무 상태 구성 요소 여야 한 다 는 얘 기다.이렇게 하면 우 리 는 하나의 루트 구성 요소 만 관리 하기 때문에 상 태 를 더욱 잘 제어 할 수 있다.
결론.
처음에 state 을 사용 한 개발 자 에 게 state 는 보기 와 같이 함수 식 인 코딩 의 원칙 이 아니 라 대상 을 대상 으로 하 는 원칙 에 더욱 적합 하 다.일반적으로 이것 은 개발 자가 더욱 정식 적 으로 검증 할 수 있 는 코드 를 만 들 수 있 도록 합 니 다. 예 를 들 어 자동화 테스트 를 통 해 응용 프로그램 을 테스트 할 수 있 습 니 다.나 는 React 의 함수 특성 을 충분히 이용 하여 유지 하기 쉬 운 코드 를 작성 할 것 을 건의 합 니 다.
Andrea Chiarelli 는 Beginning React 의 저자 다.
본 고 는 이미 원문의 작가 에 게 연락 하고 번역 권한 을 부여 하 였 으 니, 전재 할 때 원문의 링크 를 보존 하 시기 바 랍 니 다.