React JS: 상태 저장 대 상태 비저장 구성 요소

구성 요소는 React JS에서 애플리케이션의 일부일 뿐입니다. 각 구성 요소는 페이지에서 데이터를 렌더링하거나 다른 구성 요소로 전달하기 위해 데이터를 처리해야 합니다. 구성 요소가 데이터를 처리하는 방식에 따라 해당 앱이 상태 저장인지 상태 비저장인지 정의됩니다.

상태 저장 구성 요소는 변경될 수 있는 데이터 집합에 대한 참조를 유지하면서 '상태'의 데이터를 처리하는 반면, 상태 비저장 구성 요소는 부모 구성 요소 또는 부모 구성 요소의 계보에서 받은 props(속성의 약어) 형식으로 데이터를 수신합니다. 이러한 부모 구성 요소 중 적어도 하나는 상태 저장입니다.

개인 읽기 목록을 추적하기 위해 작은 웹 앱을 구축한다고 가정해 보겠습니다.



이 작은 앱에는 몇 가지 작은 구성 요소가 있습니다. 이것은 세 가지가 있습니다:

1) 모든 데이터를 추적하고 다른 하위 구성 요소를 렌더링하는 기본(상태 저장) 앱 구성 요소:

class ReadingApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        //these might change
        //add books, finish reading books
      books: this.props.books,
    };

2) 자식 구성 요소를 포함하고 기본 ReadingApp에서 받은 데이터를 다음과 같이 전달하는 상태 비저장 ReadingList 구성 요소:

const ReadingList = (props) => {
  return (
    <table>
    <tbody>
      {books.map(book => {
        return <ReadingListEntry book={book} />
      })}   
    </tbody>
  </table>
  );

3) 이 ReadingListEntry 구성 요소는 다른 책이 상태에 추가될 때마다 새 인스턴스가 생성되고 자체적으로 토글 상태 변경 클릭 이벤트를 포함합니다.

class ReadingListEntry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showQuote: false,
    };
  }

render() {
    const { title, cover, quote } = this.props.book;
    return (
      <tr onClick={() => this.setState({ showQuote: !this.state.showQuote})}>
        <div className="book-title-container">
        <td className="book-title">{title}</td>
        </div>
        <td>
          <img src={cover}/>
        </td>
        {this.state.showQuote ? <td className="book-quote">{quote}</td> : null}
      </tr>
    );
  }
}

우리의 두 가지 상태 저장 구성 요소는 ES6 클래스 인스턴스화 패턴으로 작성되었습니다. 상태 저장 구성 요소는 클래스 구성 요소라고 하며 React.Component에서 확장되어 React 라이브러리에서 상태 저장 반응성을 상속합니다. 상태 저장 구성 요소도 props를 받을 수 있으며 내 예제에서 상태는 전달된 props에서 액세스하는 값으로 정의됩니다.

상태 비저장 구성 요소는 props만 수신하고 Function 선언으로 작성됩니다. 상태 비저장 구성 요소는 정적이며 종종 애플리케이션의 컨테이너처럼 작동합니다. 자체적으로 데이터를 다시 렌더링할 필요는 없지만 변경되는 데이터를 전달할 수 있습니다.



기본 ReadingApp 구성 요소는 추가, 삭제 또는 순서가 바뀔 때 책을 렌더링하기 위해 상태 저장이 필요합니다.

ReadingList 구성 요소는 상속된 데이터와 함께 렌더링하는 ReadingListEntry 구성 요소의 주요 책임이 전달되는 것이므로 상태 비저장일 수 있습니다. 다시 ReadingListEntry는 클릭에 대해 상태를 저장합니다. showQuote 속성은 ReadingListEntry 구성 요소의 상태 객체에 설정되며 클릭 시 참/거짓 전환되고 표시되기 전에 확인됩니다. 아래 참조:



구성 요소를 설계할 때 필요한 경우에만 상태를 제공하는 것이 중요합니다. 구성 요소가 데이터를 전달하고 대화형이 아닌 경우 상태 비저장 상태로 유지합니다. 자식이 상태를 가져야 하는 자체적인 이유가 없는 한(클릭 함수의 경우와 같이) 부모에게 자식보다 상태를 부여하십시오.

*React 16.8에서는 클래스 인스턴스화 없이 상태 형식을 사용하는 Hooks가 도입되었습니다. 자세한 내용은 문서에서 확인하세요. React Hooks

ursula k. le guin reading her translation of the tao te ching