반복문

 {[1,2,3,4,5,6].map( (v) => {
                    return (
                    <li>{v}</li>
                    );

보통 태그 안에 복잡한 태그들이 섞여있는 경우에는 이차원 배열을 활용할 수 있습니다.

 

       <ul>
                {[
                    [1,2],
                    [2,3],
                    [3,2],
                    [4,2],
                    [5,2],
                    [6,3]
                ].map( (v) => {
                    return (
                    <li>{v[0]} <b>{v[1]}</b></li>
                    );
                })}
            </ul>

 

객체로도 할 수 있습니다.

           <ul>
                {[
                    {
                        num1 : 1,
                        num2 : 2 
                    },
                    {
                        num1 : 3,
                        num2 : 2 
                    },
                    {
                        num1 : 41,
                        num2 : 2 
                    },
                    {
                        num1 : 21,
                        num2 : 2 
                    },
                ].map( (v) => {
                    return (
                    <li key={v.num1 + v.num2}>{v.num1} <b>{v.num2}</b></li>
                    );
                })}
            </ul>

리액트가 key를 보고 같은 컴포넌트인지 아닌지를 이해하기 때문에  key를 정해주어야 합니다.

map의 두 번째 인자는 index입니다. 

index는 고유하기 때문에 key에 넣을 수 있는데 성능 최적화에 문제가 발생하므로 

index를 키값으로 넣어주면 안 됩니다.

만약 요소가 추가만 되는 배열인 경우에는 i를 써도 되긴 합니다.

 

가독성이 떨어지게 된다.   따라서 props를 이용하여 가독성을 높일 수 있다.

      <div>시도 : {this.state.tries.length}</div>
            <ul>
                {this.fruit.map( (v, i) => 
                   <Try  value={v} index={i}/>
                )}
            </ul>
            </>

import React, {Component} from 'react';

class Try extends Component{

    render() {
        return(
            
    
                <li key={this.props.value}>
                 {this.props.value.num1} 
                <b>{this.props.value.num2}</b>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                  </li>
                
           

        );

    }

}

export default Try;

 

props는 부모가 자식에게 속성을 물려줄 때 사용합니다. 그런데 만약 자식이 자식을 만드는 경우에는 더욱 복잡해지게 됩니다.

이럴 때 사용하는 것이 리덕스, 콘텍스트를 사용합니다.

리액트 자체에 콘텍스트가 존재하며 그러한 콘텍스트의 복잡한 일을 할 경우 사용하는 것이 리덕스입니다.

props를 관리해주는 은행을 생각하시면 됩니다.

 

jsx에서 주석을 처리하기 위해선 {/* */} 주석을 중괄호로 감싸주어야 합니다.

 

리액트에서 push는 중요합니다. 

리액트는 state의 변경에 따라 render을 하는데 arr.push를 할 경우에는  이전 배열과 이후 배열이 true가 되어

렌더링 하지 않습니다  즉 참조가 변경되어야 합니다.

state = {

        result = '',
        value = '',
        answer = getNumbers(),
        tries = [],  //불변성때문에 push안됨
    };

    onSubmitForm = (e) => {
        e.preventDefault();
        if(this.state.value === this.state.answer.join('')){

            this.setState({

                result : '홈런',
                tries : 
                [
                    ...this.state.tries,
                     { try : 
                        this.state.value, 
                        result:'홈런!' },
                ],


            });