리액트 할일 앱

계속...

React 기본 사이트 페이지는 Todo 앱의 구성 요소를 보여줍니다. 오늘 우리는 그 코드에 대해 논의합니다.

해야 할 일리스트

목록 코드는 시작하기에 좋은 위치입니다. 템플릿을 사용하여 GUI에 표시되는 각 라인 항목을 생성하는 코드입니다.

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

관심 있는 코드는 다음과 같습니다.

 {
   this.props.items
    .map(item => (
      <li key={item.id}>
        {item.text}
      </li>
    ))
  }

부숴버리자...

'items'라는 속성이 있습니다.

.map 함수 호출로 인해 'items'가 배열이어야 함을 알고 있습니다.

".map"은 "배열의 각 항목에 대해 내 코드에 '항목'을 보내십시오.

Angular does templating a bit differently it uses html attributes for the iteration.
React, because it can; mixes JavaScript and HTML inside brackets {...}. Remember brackets indicate a code block.

각 항목에 대해 이 템플릿이 표시됩니다.

<li key={item.id}>
    {item.text}
 </li>

위의 코드는 "key"가 "item.id"이고 표시되는 텍스트가 "item.text"인 HTMLLineItem 요소를 생성합니다.

이것은 items 속성이 다음과 같아야 함을 의미합니다.

let items = [];
items=[...items, {id:1, text:"abc"];
items=[...items,{id:2, text:"abcd"}]

//etc....

참조:

Javascript Arrays

Array of Objects

Spread Operators

render() 이전의 TODO 앱

class TodoApp extends React.Component {
 constructor(props) {
  super(props);
  this.state = { 
    items: [], text: '' 
  };
 this.handleChange = 
  this.handleChange.bind(this);
 this.handleSubmit = 
  this.handleSubmit.bind(this);
}  

참조:

The Javascript Constructor

Javascript keyword Extends

Javascript function Super()

Javascript keyword this.

이 코드:

this.handleChange = 
  this.handleChange.bind(this);

이 클래스에 대해 handleChange라는 변수를 설정합니다.

그럼; 'this' 클래스 객체를 의미하는 'this'에 바인딩하기를 원한다고 react에 알려줍니다. 이렇게 하면 HTML 코드가 이 변수를 '볼' 수 있습니다.

참조:

Javascript bind

TODO 앱 렌더 코드:

render() {
 return (
 <div>
  <h3>TODO</h3>
  <TodoList items= 
   {this.state.items} 
  />
 <form onSubmit= 
  {this.handleSubmit}>
    <label htmlFor="new-todo">
       What needs to be done?
    </label>
    <input
      id="new-todo"
      onChange=
       {this.handleChange}
      value=
       {this.state.text}
    />
    <button>
     Add #
     {this.state.items.length + 1}
   </button>
 </form>
</div>
);}

...

참조:

The HTML form element

onSubmit event

input onChange event

The value attribute

그리고 이벤트 핸들러:

handleChange(e) {
 this.setState(
  {text: e.target.value }
 );
}
handleSubmit(e) {
 e.preventDefault();
if 
 (this.state.text.length === 0) {
      return;
 }
const newItem = {
  text: this.state.text,
  id: Date.now()
};
this.setState(state => (
 {items:
   state.items.concat(newItem),
   text: ''
 })

...

참조:

JavaScript Event Handers

PreventDefault

React setState

요약:

TODO 앱은 두 부분으로 구성되어 있습니다.

목록 템플릿

사용자 상호 작용

이 응용 프로그램을 연구하고 실제로 무엇을 하는지 알게 된다면 React 개발자가 되는 길에 있는 것입니다.

JWP2021 React Todo 앱