개시하다

Fullstack React: 30 Days of React의 의역.
조금 읽었기 때문에 간신히 번역하려고 했어요.지칠 때까지 계속해.상당히 의역하다.

Day1 - What is React?

Day2 - What is JSX?

Day3 - Our First Components

Day4 - Complex Components

정편

Driving Components Through Data

Day 4까지의 데이터가 하드코딩된 상태에서는 애플리케이션이 전혀 작동하지 않습니다.Day5에서 외부 데이터를 사용하여 데이터 제어 어셈블리를 만듭니다.
지금까지 최초의 구성 요소는 이미 제작되었고 친자 관계를 구축하여 정리되었지만 지금까지의 구성 요소는 데이터(주로 하드웨어 코드)를 읽지 못했다.

Going data-driven

Day4에서는 머리글과 활성 타임라인 어셈블리가 생성됩니다.

Day4에서는 정적 JSX를 사용하여 타임라인을 구성하는 세 개의 어셈블리로 나뉘었습니다.하지만 이렇게 데이터를 업데이트할 수 없으니 불편하다.
그러면 React 구성 요소에 데이터를 전달하는 방법을 살펴보겠습니다.먼저 <Header /> 구성 요소입니다.이 조립품은 언뜻 보기에는 효과적인 조합인 것 같지만 어떤 자리에서든 Timeline 제목이 나와 곤란하다.
React를 사용하여 제목을 설정하는 방법을 살펴보겠습니다.

Introducing props

React에서 HTML의 원자 뷰어 (src와 유사) 와 같은 기법으로 데이터를 구성 요소에 전달할 수 있습니다.React의 prop는 라벨의 src와 같다.
전달된 속성은 구성 요소 내this.props에서 접근할 수 있습니다.<Header /> 구성 요소를 다시 생각해 보십시오.

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">Timeline</span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

이 어셈블리를 모 어셈블리App 어셈블리로 사용할 때는 다음과 같습니다.

<Header />

이 구성 요소에서 제목을 업데이트하기 위해서 title 이것prop을 그에게 건네주자.

<Header title="Timeline" />

구성 요소 내부에서 {this.props.title}를 통해 데이터에 접근할 수 있습니다.이렇게 하면 속성을 전달하여 동적 글쓰기 부분을 할 수 있다.

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

이렇게 하면 문자열을 통해 제목을 자유롭게 변경할 수 있다.예를 들면, 한번 써 보세요.

<Header title="Timeline" />
<Header title="Profile" />
<Header title="Settings" />
<Header title="Chat" />

4개<Header />의 구성 요소는 다음과 같아야 한다.

문자열 외에 숫자, 대상, 함수를 통해 이 속성을 전달할 수 있다.이것에 관해서는 나중에 자세히 보겠습니다.Contents 구성 요소도 마찬가지로 속성을 사용하여 다시 씁시다.Day4의 예는 다음과 같습니다.

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
            Doug
          </div>

          <span className="time">
            An hour ago
          </span>
          <p>Ate lunch</p>
          <div className="commentCount">
            2
          </div>
        </div>

      </div>
    )
  }
}

속성을 사용하여 아래의 물건을 건네주시오.

사용자의 가상 이미지(URL)

활동 시간 스탬프

활성 항목의 텍스트

주석 수

다음 활동 항목의 객체가 있는 경우:.날짜, 문자,user 대상, 주석 대상 배열 등을 포함합니다.

{
  timestamp: new Date().getTime(),
  text: "Ate lunch",
  user: {
    id: 1,
    name: 'Nate',
    avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
  },
  comments: [
    { from: 'Ari', text: 'Me too!' }
  ]
}

<Header />는 구성 요소와 마찬가지로 속성을 사용하여 이 데이터 대상을 연결하고 표시한다.

class Content extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img src={activity.user.avatar} />
            {activity.user.name}
          </div>

          <span className="time">
            {activity.timestamp}
          </span>
          <p>{activity.text}</p>
          <div className="commentCount">
            {activity.comments.length}
          </div>
        </div>
      </div>
    )
  }
}

ES6로 불리는 destructuring 표기법을 사용합니다.다음 두 줄은 투명합니다.

// these lines do the same thing
const activity = this.props.activity;
const {activity} = this.props; 

이렇게 하면 속성을 내용 부분의 구성 요소에 맡겨 사용할 수 있다.

<Content activity={moment1} />

너무 좋아요!이렇게 하면 데이터를 상대방에게 건네주고 표시할 수 있다.하지만 여러 개의 이벤트를 표시하기 위해서는 여러 개의 구성 요소를 써야 한다고 생각할 수도 있습니다.해결 방안으로 대상의 배열을 구성 요소에 전달할 수 있습니다.

const activities = [
  {
    timestamp: new Date().getTime(),
    text: "Ate lunch",
    user: {
      id: 1, name: 'Nate',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Ari', text: 'Me too!' }]
  },
  {
    timestamp: new Date().getTime(),
    text: "Woke up early for a beautiful run",
    user: {
      id: 2, name: 'Ari',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Nate', text: 'I am so jealous' }]
  },
]

<Content activities={activities} />

이렇게 하면 뷰를 업데이트해도 아무 것도 표시되지 않습니다.제대로 작동하기 위해서는 구성 요소에 대한 약간의 업데이트가 필요합니다.JSX는 Javascript이며 Javascript의 함수를 사용할 수 있습니다.map 함수를 사용하여 모든 활동을 표시합니다.

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => {
          return (
            <div className="item">
              <div className="avatar">
                <img src={activity.user.avatar} />
                {activity.user.name}
              </div>

              <span className="time">
                {activity.timestamp}
              </span>
              <p>{activity.text}</p>
              <div className="commentCount">
                {activity.comments.length}
              </div>
            </div>
          );
        })}

      </div>
    )
  }
}

이렇게 하면 여러 개의 활동을 전달할 수 있다.그러나 이 구성 요소는 비교적 복잡해졌다. (주로 맵 내부의 내용이 많고 가독성이 떨어진다.)이것은 React 바람이 아니다.

ActivityItem

여기에서 활성 항목을 가져옵니다.이렇게 하면 복잡도를 완화하고 책임 범위를 명확히 하며 테스트 능력을 높일 수 있다.

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => (
          <ActivityItem
            activity={activity} />
        ))}

      </div>
    )
  }
}

이렇게 하면 이해하기 쉬울 뿐만 아니라 두 개의 구성 요소를 더욱 간단하게 테스트할 수 있다.새 Activity Item 구성 요소는 Activity만 복사하면 됩니다.

class ActivityItem extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="item">
        <div className="avatar">
          <img src={activity.user.avatar} />
          {activity.user.name}
        </div>

        <span className="time">
          {activity.timestamp}
        </span>
        <p>{activity.text}</p>
        <div className="commentCount">
          {activity.comments.length}
        </div>
      </div>
    )
  }
}

나는 이곳에서 부품을 구동하는 방법을 배웠다.Day6에서 완전한 상태의 어셈블리를 만듭니다.