분류 Reactjs

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

컨텐츠 정보

  • 조회 258 (작성일 )

본문

구성 요소의 장점 


"구성 요소"라는 용어는 다른 많은 프레임 워크와 라이브러리에서 사용됩니다. 맞춤 요소 및 HTML 가져 오기와 같은 HTML5 기능을 사용하여 기본적으로 웹 구성 요소를 작성할 수도 있습니다.


기본적으로 작업하든 React와 같은 라이브러리를 통해 작업하든 구성 요소에는 많은 장점이 있습니다.


먼저 구성 요소를 사용하면 코드를 보다 읽기 쉽고 작업하기 쉽게 만들 수 있습니다. 이 UI를 고려하십시오.


HTML 기반 UI 

<a href=”http://facebook.com”>
 <img src=”facebook.png” />
</a>

이 UI는 무엇을 나타냅니까? HTML을 말하면 여기에서 HTML을 빠르게 구문 분석하고 "클릭 할 수 있는 이미지입니다"라고 말할 수 있습니다.이 UI를 구성 요소로 변환하는 경우 이름을 ClickableImage로 지정할 수 있습니다!

<ClickableImage />

상황이 복잡해지면 HTML 구문 분석이 어려워 져 구성 요소를 통해 편안한 언어를 사용하여 UI가 무엇을 나타내는 지 빠르게 이해할 수 있습니다. 더 큰 예는 다음과 같습니다.

<TweetBox>
  <TextAreaWithLimit limit="280" />
  <RemainingCharacters />
  <TweetButton />
</TweetBox>

실제 HTML 코드를 보지 않고 이 UI가 무엇을 나타내는 지 정확히 알고 있습니다. 또한 나머지 문자 섹션의 출력을 수정해야 하는 경우 정확히 어디로 가야 하는지 알고 있습니다.

React 구성 요소는 동일한 응용 프로그램과 여러 응용 프로그램에서 재사용 할 수도 있습니다. 예를 들어, 다음은 ClickableImage 구성 요소의 가능한 구현입니다.

클릭 가능한 이미지 렌더링 함수 

const ClickableImage = ({ href, src }) => {
 return (
   <a href={href}>
     <img src={src} />
   </a>
 );
};


href 및 src props에 대한 변수가 있으면 이 구성 요소를 재사용 할 수 있습니다. 예를 들어,이 컴포넌트를 사용하기 위해 props 세트로 렌더링 할 수 있습니다 :

<ClickableImage href="http://google.com" src="google.png" />


그리고 다른 props 세트를 사용하여 재사용 할 수 있습니다.

<ClickableImage href="http://bing.com" src="bing.png" />

함수형 프로그래밍에는 순수한 함수라는 개념이 있습니다. 이것들은 기본적으로 외부 상태로부터 보호됩니다. 동일한 입력을 주면 항상 동일한 출력을 얻습니다. 

React 컴포넌트가 정의 외부에 있는 것에 의존하지 않거나 수정하는 경우 (예를 들어, 글로벌 변수를 사용하지 않는 경우) 해당 컴포넌트에 순수 레이블을 지정할 수 있습니다. 순수한 구성 요소는 아무런 문제없이 재사용 될 가능성이 더 높습니다. 


뷰를 나타내는 컴포넌트를 만듭니다. ReactDOM의 경우 정의한 React 컴포넌트는 HTML DOM 노드를 나타냅니다. 위의 ClickableImage 구성 요소는 두 개의 중첩 된 HTML 요소로 구성되었습니다.

브라우저에서 HTML 요소를 내장 컴포넌트로 생각할 수 있습니다. 또한 자체 사용자 정의 컴포넌트를 사용하여 더 큰 컴포넌트를 작성할 수 있습니다. 예를 들어 검색 엔진 목록을 표시하는 구성 요소를 작성해 보겠습니다.

const SearchEngines = () => {
  return (
    <div className="search-engines">
      <ClickableImage href="http://google.com" src="google.png" />
      <ClickableImage href="http://bing.com" src="bing.png" />
    </div>
  );
};


ClickableImage 구성 요소를 사용하여 SearchEngines 구성 요소를 어떻게 구성했는지 참고하십시오!


또한 데이터를 변수로 추출하고 해당 변수와 함께 작동하도록 설계하여 SearchEngines 구성 요소를 재사용 할 수 있습니다.


예를 들어 다음과 같은 형식으로 데이터 배열을 도입 할 수 있습니다.

const data = [
  { href: "http://google.com", src: "google.png" },
  { href: "http://bing.com", src: "bing.png" },
  { href: "http://yahoo.com", src: "yahoo.png" }
];


그런 다음 <SearchEngines data = {data} />가 작동하도록 하려면 객체 목록에서 ClickableImage 구성 요소 목록으로 데이터 배열을 매핑하면 됩니다.

const SearchEngines = ({ engines }) => {
  return (
    <List>
      {engines.map(engine => <ClickableImage {...engine} />)}
    </List>
  );
};

ReactDOM.render(
 <SearchEngines engines={data} />,
 document.getElementById("mountNode")
);


이 SearchEngine은 Google에 제공하는 모든 검색 엔진 목록과 함께 사용할 수 있습니다.


후크란 정확히 무엇입니까? 


React 컴포넌트의 훅은 특수 함수에 대한 호출입니다. 모든 후크 함수는 "use"이라는 단어로 시작합니다. 이들 중 일부는 useState와 같은 상태 저장 요소가 있는 함수 구성 요소를 제공하는 데 사용될 수 있고, 다른 요소는 useEffect와 같은 부작용을 관리하거나 함수 및 오브젝트 (예 : useCallback)를 캐시 / 메모리 화하는 데 사용될 수 있습니다. 후크는 매우 강력하며 하늘은 당신이 할 수 있는 일에 한계가 있습니다.


React 후크 함수는 함수 구성 요소만 사용할 수 있습니다. 클래스 구성 요소에는 사용할 수 없습니다.


기본 useState 후크의 예를 보려면 위의 Button 구성 요소가 클릭 이벤트에 응답하도록하겠습니다. "count"변수에서 클릭 횟수를 유지하고 해당 변수의 값을 렌더링하는 버튼의 레이블로 표시합니다.

const Button = () => {
  let count = 0;

  return (
    <button>{count}</button>
  );
};

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

이 계수 변수는 예제를 소개하는 데 필요한 상태 요소입니다. UI가 의존 할 데이터 (표시하기 때문에)이며 시간이 지남에 따라 바뀌기 때문에 상태 요소입니다.


코드에서 변수를 정의 할 때마다 상태가 표시되며 해당 변수의 값을 변경할 때마다 해당 상태가 변경됩니다. 명심하십시오. 


카운트 상태의 값을 변경하기 전에 이벤트에 대해 알아야 합니다.


사용자 이벤트에 응답 


"onEvent"속성을 가진 이벤트 핸들러 (이 경우 버튼 요소에)를 추가 할 수 있습니다. 이것은 onClick, onMouseOver, onScroll, onSubmit 등 일 수 있습니다.


여기서 필요한 것은 onClick 이벤트이며 대상 요소의 속성으로 정의합니다. 예를 들어, 버튼을 클릭 할 때마다 프로그램이 콘솔에 메시지를 기록하도록하려면 다음과 같이 할 수 있습니다.


React에서 onClick 사용 

const Button = () => {
  let count = 0;

  return (
    <button onClick={() => console.log('Button clicked')}>
      {count}
    </button>
  );
};

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

문자열을 사용하는 onClick 속성의 DOM 버전과 달리 React의 onClick 속성은 함수 참조를 사용합니다. 중괄호 안에 지정하십시오.

function func() {}

<button onClick={func} />

함수 클릭 (이름)을 onClick 핸들러로 전달한 방법에 주목하십시오. 거기에 func을 호출하지 않았습니다. 버튼을 클릭하면 반응이 기능을 호출합니다.


위의 Button 구성 요소에 있는 onClick 이벤트의 경우, 호출 할 때 콘솔에 메시지를 출력하는 함수 정의를 "인라인"했습니다. 버튼을 클릭 할 때마다 onClick 핸들러 (인라인 화살표 기능)가 호출되고 해당 메시지가 표시됩니다.


이벤트 이름이 낙타의 경우에 유의하십시오. React에서 처리하는 모든 DOM 관련 속성은 낙타 케이스 여야 합니다 (그렇지 않은 경우 React에 오류가 표시됨). 또한 React는 사용자 정의 HTML 속성 사용을 지원하며 모두 소문자 형식이어야 합니다. 


React의 일부 DOM 속성은 일반 DOM API에서 수행하는 것과 약간 다릅니다. 그 예로는 onChange 이벤트가 있습니다. 일반 브라우저에서는 일반적으로 양식 입력란 외부를 클릭하거나 탭을 클릭하면 시작됩니다. React에서 onChange는 양식 필드의 값이 변경 될 때마다 (추가 / 제거 될 때마다) 발생합니다. 


React의 일부 속성 이름은 HTML과 다릅니다. 그 예로는 React의 className 속성이 있는데 이는 HTML에서 class 속성을 사용하는 것과 같습니다. React 속성과 DOM 속성의 차이점에 대한 전체 목록은 jscomplete.com/react-attributes를 참조하십시오.