분류 Reactjs

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

컨텐츠 정보

  • 조회 263 (작성일 )

본문

사용자의 입력을 수락 


트위터의 트윗 양식과 같이 텍스트 영역에 사용자가 입력 한 문자를 계산해야 한다고 상상해보십시오. 사용자가 입력하는 각 문자마다 새로운 문자 수로 UI를 업데이트 해야 합니다.


문자 수에 대한 자리 표시 자 div가있는 텍스트 영역 입력 요소를 표시하는 구성 요소는 다음과 같습니다.

// jsdrops.com/bx10

const CharacterCounter = () => {
  return (
    <div>
      <textarea cols={80} rows={10} />
      <div>Count: X</div>
    </div>
  );
};

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


텍스트 영역에서 사용자 유형에 따라 개수를 업데이트하려면 사용자가 입력 할 때 발생하는 이벤트를 사용자 지정해야 합니다. React의 이 이벤트는 onChange로 구현됩니다. 또한 문자 수에 상태 요소를 사용해야 하고 onChange 이벤트 내에서 해당 업데이터 기능을 실행해야 합니다.


새로운 onChange 이벤트 핸들러에서 textarea 요소에 입력 된 텍스트에 액세스해야 합니다. 기본적으로 React는 인식하지 못하기 때문에 어떻게 든 읽을 필요가 있습니다. 사용자가 입력함에 따라 렌더링 된 UI는 브라우저 자체의 상태 관리를 통해 변경됩니다. textarea 요소의 값을 기반으로 UI를 변경하도록 React에 지시하지 않았습니다.


우리는 두 가지 주요 방법을 사용하여 값을 읽을 수 있습니다. 먼저 DOM API 자체를 직접 사용하여 읽을 수 있습니다. DOM 선택 API를 사용하여 요소를 "선택"해야 하며, 일단 element.value 호출을 사용하여 값을 읽을 수 있습니다. 요소를 선택하기 위해 단순히 ID를 부여하고 document.getElementById DOM API를 사용하여 요소를 선택할 수 있습니다.


React는 textarea 요소를 렌더링하므로 실제로 React 자체를 통해 요소 선택을 수행 할 수 있습니다. React는 특별한 "ref"속성을 가지고 있으며,이 속성은 각 DOM 요소에 할당하고 나중에 이를 사용하여 액세스 할 수 있습니다.


onChange 이벤트의 대상 객체를 통해 요소에 직접 액세스 할 수도 있습니다. 각 이벤트는 대상을 노출하며 텍스트 영역에서 onChange 이벤트의 경우 대상은 textarea 요소입니다.


즉, 우리가 해야 할 일은 :


https://jscomplete.com/playground/bx11 


이것은 가장 간단한 솔루션이며 실제로 잘 작동합니다. 이 솔루션에 대한 비 이상적인 것은 우리가 우려를 혼합하고 있다는 것입니다. handleChange 이벤트는 setCount 함수를 호출하고 텍스트 길이를 계산하는 부작용이 있습니다. 이것은 실제로 이벤트 처리기의 문제가 아닙니다.


이러한 관심사를 혼합해야 하는 이유는 React가 입력중인 내용을 인식하지 못하기 때문입니다. 반응 변경이 아닌 DOM 변경입니다.


텍스트 영역의 값을 재정의 하고 상태 변경으로 React를 통해 업데이트하여 React 변경으로 만들 수 있습니다. onChange 핸들러에서 문자 수를 계산하는 대신 컴포넌트 상태에 입력 된 값을 설정했습니다. 그런 다음 해당 값으로 수행 할 작업에 대한 관심이 React UI 렌더링 논리의 일부가 됩니다. 이 전략을 사용하는 솔루션 버전은 다음과 같습니다.


https://jscomplete.com/playground/bx12 


이것은 약간 더 많은 코드이지만 걱정의 분명한 분리가 있습니다. React는 이제 입력 요소 상태를 인식합니다. 그것을 제어합니다. 이 패턴은 React에서 제어되는 구성 요소 패턴으로 알려져 있습니다.


이 버전은 확장하기도 쉽습니다. 사용자가 입력 할 때 단어 수를 계산하는 경우 이는 또 다른 UI 계산 값이 됩니다. 상태에 다른 것을 추가 할 필요가 없습니다.


부작용 관리 


브라우저에서 React 컴포넌트를 처음으로 렌더링 하는 것을 "마운팅"이라고 하며 브라우저에서 제거하는 것을 "마운트 해제"라고 합니다.


구성 요소를 마운트, 업데이트 및 마운트 해제하려면 "부작용"이 필요할 수 있습니다. 예를 들어 React TODOs 앱은 브라우저 페이지 제목에 활성 TODO 항목 수를 표시해야 합니다. 이것은 React API로 직접 할 수있는 것이 아닙니다. DOM API를 사용해야 합니다. 마찬가지로 입력 양식을 렌더링 할 때 텍스트 상자에 자동 초점을 맞추고 싶을 수 있습니다. 이것도 DOM API로 수행해야 합니다.


부작용은 일반적으로 React의 렌더링 작업 전후에 발생해야 합니다. 이것이 React가 클래스 구성 요소에 "라이프 사이클 메소드"를 제공하여 render 메소드 전후에 사용자 정의 조작을 수행 할 수 있게 하는 이유입니다. componentDidMount 클래스 메소드 내부에 컴포넌트가 처음 마운트 된 후 수행 할 수 있고 componentDidUpdate 클래스 메소드 내부에서 컴포넌트가 업데이트 된 후 수행 할 수 있으며 componentWillUnmount 클래스 내부의 브라우저에서 컴포넌트가 제거되기 직전에 수행 할 수 있습니다. 


함수 구성 요소의 경우 부작용은 React.useEffect 후크 함수를 사용하여 관리되며, 콜백 함수와 종속성 배열이라는 두 가지 인수가 필요합니다.


useEffect(() => {
  // Do something after each render
  // but only if dep1 or dep2 changed
}, [dep1, dep2]);


React가 useEffect 호출을 가진 컴포넌트를 처음 렌더링 할 때 콜백 함수를 호출합니다. 해당 컴포넌트의 각 새 렌더링 후에 종속성 값이 이전 렌더링에서 사용했던 값과 다른 경우 React는 콜백 함수를 다시 호출합니다.


함수 컴포넌트가 업데이트 되거나 마운트 해제되면 React는 부작용 "정리"함수를 호출 할 수 있습니다. 해당 정리 함수는 useEffect 콜백 함수에서 리턴 될 수 있습니다. 


부작용 방법은 응용 프로그램에서 진행 중인 작업을 분석하고 React 업데이트의 성능을 더욱 최적화 하는 데 매우 유용합니다.


향후 계획 


React로 간단하지만 멋진 앱을 만들 준비가 되었습니다. 이 대화 형 랩을 통해 React 앱에서 데이터를 사용하고 관리하는 데 익숙해 지십시오. 그런 다음 더 큰 것을 만드십시오. 실용적인 것. 뭔가 재미 있는 도전을 해보세요. 간단한 메모리 게임을 만드십시오!


React로 물건을 만드는 동안 초보자 목록 개발자가 React를 사용할 때 일반적으로 발생하는 일반적인 문제가 포함 된 브라우저 창을 이 목록에서 열어 두십시오. 문제가 발생하면 그 중 하나가 아닌지 확인하십시오.