분류 Reactjs

React에 대한 완전한 소개(4)

컨텐츠 정보

  • 조회 280 (작성일 )

본문

첫 번째 인수는 "props"의 객체입니다 


HTML 요소에 id 또는 title과 같은 속성을 할당 할 수 있는 것처럼 React 요소는 렌더링 될 때 속성 목록을 받을 수도 있습니다. 위의 Button 요소 (jsdrops.com/bx2)에 레이블 속성이 수신되었습니다. React에서 React 요소가 수신 한 속성 목록을 props라고합니다. React 함수 컴포넌트는 이 목록을 첫 번째 인수로 받습니다. 이 목록은 속성 이름을 나타내는 키와 할당 된 값을 나타내는 값이 있는 객체로 전달됩니다.


함수 구성 요소를 사용하는 경우 속성 목록을 보유한 오브젝트의 이름을 "props"로 지정할 필요는 없지만 이것이 표준 관행입니다. 아래에서 수행 할 클래스 구성 요소를 사용할 때 항상 동일한 속성 목록에 props라는 특수 인스턴스 속성이 표시됩니다.


소품을 받는 것은 선택 사항입니다. 일부 구성 요소에는 소품이 없습니다. 그러나 구성 요소의 반환 값은 선택 사항이 아닙니다. React 컴포넌트는 "명시 적으로 또는 암시 적으로"정의되지 않은 "을 리턴 할 수 없습니다. 값을 반환해야 합니다. "null"을 반환하여 렌더러가 출력을 무시하게 할 수 있습니다. 


구성 요소 소품 (또는 실제로 상태)을 사용할 때마다 객체 파괴를 사용하고 싶습니다. 예를 들어, 버튼 구성 요소 기능은 소품을 구조화하여 다음과 같이 작성할 수 있습니다.


구성 요소 props 정리 

const Button = ({ label }) => (
  <button type="submit">{label}</button>
);

이 방법에는 많은 이점이 있지만 가장 중요한 방법은 구성 요소에 사용되는 소품을 육안으로 검사하여 구성 요소에 필요 없는 추가 소품을 받지 않도록 하는 것입니다.


일반 기능 대신 화살표 기능을 어떻게 사용했는지 주목하십시오. 이것은 나에게 개인적으로 선호하는 스타일입니다. 어떤 사람들은 일반적인 함수 스타일을 선호하며 그에 아무런 문제가 없습니다. 중요한 것은 선택한 스타일과 일관성을 유지하는 것입니다. 여기서는 화살표 기능을 사용하지만 이를 요구 사항으로 해석하지는 않습니다. 


JSX의 표현 


JSX 내에서 중괄호 쌍을 사용하여 JavaScript 표현식을 포함 할 수 있습니다.

// jsdrops.com/bx4

const RandomValue = () => (
  <div>
    { Math.floor(Math.random() * 100) }
  </div>
);

ReactDOM.render(<RandomValue />, mountNode);


이 중괄호 안에는 표현식만 포함될 수 있습니다. 예를 들어 정규 if 문을 포함 할 수 없지만 삼항식은 괜찮습니다. 값을 반환하는 것은 괜찮습니다. 언제든지 코드를 함수에 넣고 무언가를 반환하고 중괄호 안에 해당 함수를 호출 할 수 있습니다. 그러나 이 중괄호에 넣은 논리는 최소한으로 유지하십시오.

JavaScript 변수도 표현식이므로 구성 요소가 소품 목록을 받으면 이 소품을 중괄호 안에 사용할 수 있습니다. 이것이 Button 예제에서 {label}을 사용한 방식입니다.


JavaScript 객체 리터럴도 표현식입니다. 중괄호 안에 JavaScript 객체를 사용하여 {{a : 42}}와 같이 이중 중괄호처럼 보이게 합니다. 이것은 다른 구문이 아닙니다. 일반적인 JSX 중괄호 안에 정의 된 객체 리터럴 일 뿐입니다.


예를 들어,이 중괄호 안에 객체 리터럴을 사용하는 사용 사례 중 하나는 CSS 스타일 객체를 React의 특수 스타일 속성으로 전달하는 것입니다.

// jsdrops.com/bx5

const ErrorDisplay = ({ message }) => (
  <div style={ { color:'red', backgroundColor:'yellow' } }>
    {message}
  </div>
);

ReactDOM.render(
  <ErrorDisplay
    message="These aren't the droids you're looking for"
  />,
  mountNode
);


위의 스타일 속성은 특별한 것입니다. 객체를 값으로 사용하고 해당 객체는 마치 JavaScript DOM API (카멜 케이스 속성 이름, 문자열 값)를 통해 스타일을 설정하는 것처럼 스타일을 정의합니다. React는 이러한 스타일 객체를 인라인 CSS 스타일 속성으로 변환합니다. 이것이 React 구성 요소의 스타일을 지정하는 가장 좋은 방법은 아니지만 조건부 스타일을 요소에 적용 할 때 사용하는 것이 매우 편리하다는 것을 알았습니다. 예를 들어 다음은 텍스트의 절반 정도를 임의로 녹색 또는 빨간색으로 출력하는 구성 요소입니다.

// jsdrops.com/bx6

class ConditionalStyle extends React.Component {
  render() {
    return (
      <div style={{ color: Math.random() < 0.5 ? 'green': 'red' }}>
        How do you like this?
      </div>
    );
  }
}

ReactDOM.render(
  <ConditionalStyle />,
  mountNode,
);

이 스타일의 논리는 바로 컴포넌트에 있습니다. 나는 그것을 좋아한다! 이것은 클래스 이름을 조건부로 사용하는 것보다 작업하기가 더 쉬우며 글로벌 CSS 스타일 시트에서 해당 클래스 이름이 수행하는 작업을 추적합니다.


JSX는 템플릿 언어가 아닙니다 


HTML을 다루는 일부 라이브러리는 템플릿 언어를 제공합니다. 루프와 조건이 있는 "향상된"HTML 구문으로 동적 뷰를 작성합니다. 그런 다음이 라이브러리는 JavaScript를 사용하여 템플릿을 DOM 작업으로 변환합니다. 그런 다음 브라우저에서 DOM 작업을 사용하여 향상된 HTML로 설명 된 DOM 트리를 표시 할 수 있습니다.


반응은 그 단계를 제거했다. React 애플리케이션을 사용하여 브라우저에 템플릿을 전혀 보내지 않습니다. React API로 설명 된 객체 트리를 보냈습니다. React는 이러한 객체를 사용하여 원하는 DOM 트리를 표시하는 데 필요한 DOM 작업을 생성합니다.


HTML 템플리트가 사용되면 라이브러리는 애플리케이션을 문자열로 구문 분석합니다. React 애플리케이션은 객체 트리로 구문 분석됩니다. 


JSX는 템플릿 언어처럼 보이지만 실제로는 그렇지 않습니다. HTML 템플릿과 유사한 구문으로 React의 객체 트리를 나타낼 수 있는 JavaScript 확장 일뿐입니다. 브라우저는 JSX를 전혀 다루지 않아도 되며 React도 처리하지 않아도 됩니다! 컴파일러 만 수행합니다. 우리가 브라우저에 보내는 것은 템플릿과 JSX가 없는 코드입니다.


예를 들어 위에서 본 todos 배열의 경우 템플릿 언어를 사용하여 해당 배열을 UI에 표시하려면 다음과 같은 작업을 수행해야 합니다.

<ul>
  <% FOR each todo in the list of todos %>
    <li><%= todo.body %></li>
  <% END FOR %>
</ul>


<% %>는 동적으로 향상된 부분을 나타내는 하나의 구문입니다. {{}} 구문이 표시 될 수도 있습니다. 일부 템플릿 언어는 향상된 논리에 특수 속성을 사용합니다. 일부 템플릿 언어는 공백 들여 쓰기를 사용합니다 (오프사이드 규칙). 


todos 배열이 변경 될 때 (그리고 템플릿 언어로 DOM에서 렌더링 된 것을 업데이트해야하는 경우) 해당 템플리트를 다시 렌더링하거나 DOM 트리에서 todos 배열의 변경 사항을 반영해야 하는 위치를 계산해야 합니다.


React 애플리케이션에는 템플릿 언어가 전혀 없습니다. 대신 JSX를 사용합니다.

<ul>
  {todos.map(todo =>
    <li>{todo.body}</li>
  )}
</ul>

브라우저에서 사용하기 전에 다음으로 번역됩니다.


React.createElement(
  "ul",
  null,
  todos.map(todo =>
    React.createElement("li", null, todo.body)
  ),
);


React는 이 객체 트리를 가져 와서 DOM 요소 트리로 변환합니다. 우리의 관점에서, 우리는 이 나무로 끝났습니다. Google은 이에 대한 조치를 관리하지 않습니다. 우리는 단지 todos 배열 자체에서 작업을 관리합니다.


클래스를 사용하여 컴포넌트 만들기 


React는 JavaScript 클래스 구문을 통해 컴포넌트 작성을 지원합니다. 다음은 클래스 구문으로 작성된 동일한 Button 구성 요소 예제입니다.

// jsdrops.com/bx7

class Button extends React.Component {
  render() {
    return (
      <button>{this.props.label}</button>
    );
  }
}

// Use it (same syntax)
ReactDOM.render(<Button label="Save" />, mountNode);


이 구문에서는 React 최상위 API의 기본 클래스 중 하나 인 React.Component를 확장하는 클래스를 정의합니다. 클래스 기반 React 컴포넌트는 최소한 render라는 인스턴스 메소드를 정의해야 합니다. 이 render 메서드는 구성 요소에서 인스턴스화 된 객체의 출력을 나타내는 요소를 반환합니다. <Button… />를 렌더링하여 Button 클래스 기반 구성 요소를 사용할 때마다 React는 이 클래스 기반 구성 요소에서 객체를 인스턴스화하고 해당 객체의 표현을 사용하여 DOM 요소를 만듭니다. 또한 DOM 렌더링 요소를 클래스에서 생성 한 인스턴스와 연결합니다.


렌더링 된 JSX에서 this.props.label을 어떻게 사용했는지 주목하십시오. 모든 컴포넌트는 인스턴스화 될 때 해당 컴포넌트의 요소에 전달 된 모든 값을 보유하는 props라는 특수 인스턴스 특성을 가져옵니다. 함수 구성 요소와 달리 클래스 기반 구성 요소의 렌더링 함수는 인수를 받지 않습니다.


함수 대 클래스 


React에서 제한되었던 기능으로 생성 된 컴포넌트. 구성 요소를 "상태 저장"하는 유일한 방법은 클래스 구문을 사용하는 것입니다. 2019 년 초에 릴리스 된 React 버전 16.8로 시작하는 "React Hooks"릴리스로 변경되었습니다. React 후크 릴리스는 함수 구성 요소를 상태 저장 (및 기타 많은 기능 제공)하는 새로운 API를 도입했습니다.


이 새로운 API를 사용하면 일반적으로 React로 수행되는 대부분의 작업을 함수로 수행 할 수 있습니다. 클래스 기반 구문은 고급 및 매우 드문 경우에만 필요합니다.


새 API가 이전 API를 천천히 대체 할 것이라고 생각하지만 이것이 유일한 API 사용을 권장하는 것은 아닙니다 (가능한 경우에만).


대규모 응용 프로그램에서 두 API를 모두 사용했으며 여러 가지 이유로 새로운 API가 이전 API보다 훨씬 우수하지만 개인적으로 가장 중요하다고 생각하는 API는 다음과 같습니다.

  • 클래스 "인스턴스"및 해당 암시 적 상태로 작업 할 필요는 없습니다. 각 렌더에서 새로 고쳐지는 간단한 기능을 사용합니다. 상태는 명시 적으로 선언되어 있으며 아무것도 숨겨져 있지 않습니다. 이 모든 것은 기본적으로 코드에서 놀라움이 덜 발생한다는 것을 의미합니다.
  • 관련 상태 저장 논리를 그룹화하여 독립적 인 구성 가능 및 공유 가능 단위로 분리 할 수 ​​있습니다. 따라서 복잡한 구성 요소를 더 작은 부품으로 쉽게 분할 할 수 있습니다. 또한 구성 요소 테스트가 쉬워집니다.
  • 구성 요소 트리에서 계층 적 "중첩"을 사용할 필요 없이 선언적인 방식으로 상태 저장 논리를 사용할 수 있습니다.

클래스 기반 구성 요소는 예측 가능한 미래를 위한 React의 일부가 될 것이지만, 생태계의 새로운 이민자로서 기능과 후크로 순전히 시작하고 새로운 API를 배우는 데 집중하는 것이 합리적이라고 생각합니다 이미 클래스를 사용하는 코드베이스로 작업해야 합니다).


구성 요소와 요소(Components vs Elements) 

React 안내서 및 자습서에서 "component"및 "element"라는 단어가 섞여있을 수 있습니다. React 학습자는 중요한 차이점을 이해해야 한다고 생각합니다. 

  • React 구성 요소는 템플릿입니다. 청사진. 글로벌 정의. 이것은 함수 또는 클래스 일 수 있습니다 (렌더 메소드 사용).
  • React 요소는 구성 요소에서 반환되는 것입니다. 컴포넌트가 나타내는 DOM 노드를 가상으로 설명하는 객체입니다. 함수 구성 요소의 경우 이 요소는 함수가 리턴하는 오브젝트이고 클래스 구성 요소의 경우 요소는 구성 요소의 render 메소드가 리턴하는 오브젝트입니다. 반응 요소는 브라우저에 표시되지 않습니다. 그것들은 단지 기억에 있는 물체 일 뿐이며 그것에 대해 아무것도 바꿀 수 없습니다.

React는 브라우저로 렌더링 해야 하는 DOM 요소 트리를 파악하기 위해 내부적으로 객체를 생성, 업데이트 및 파괴합니다. 클래스 컴포넌트로 작업 할 때 브라우저에서 렌더링 한 DOM 요소를 컴포넌트 인스턴스라고 하는 것이 일반적입니다. 동일한 구성 요소의 여러 인스턴스를 렌더링 할 수 있습니다. 인스턴스는 클래스 기반 구성 요소 내에서 사용하는 "this"키워드입니다. 클래스에서 인스턴스를 수동으로 만들 필요는 없습니다. React의 기억에 어딘가에 있다는 것을 기억하면 됩니다. 함수 컴포넌트의 경우 React는 함수 호출을 사용하여 렌더링 할 DOM 요소를 결정합니다.