리액트 공부 - map / input value 추가해서 아래 나타내기

 

 

자바스크립트 배열 map() 함수 

arr.map(callback, [thisArg])

• callback 새로운 배열 요소 생성

• currentValue 현재 처리 요소

• index 현재처리요소 index 값

• array 현재처리 원본 배열

• thisArg(선택항목) 콜백 함수 내부 this 레퍼런스 

 

var numbers = [1,2,3,4,5];

var processed = numbers.map(function(num){

    return num * num;

});

console.log(processed);

(5) [1, 4, 9, 16, 25]

 

콘솔에서 확인 가능 (결론 보기전까지는 shift + 엔터 / 결론 보려면 엔터)

 

    render() {

        const names = ['눈사람', '얼음', '눈', '바람'];

        const nameList = names.map( // 배열이름.map(개별인자)

        (name) => (<li>{name}</li>) // <li></li>로 개별인자 하나씩 콜백 

        )

        //이 배열 개별인자의 바뀐 것을 nameList에 담았다 

        return (

            <ul>

                {nameList}  

            </ul>

        );

    }

 

 

그러나 위와 같이 배열하면 오류가 난다 

index.js:1 Warning: Each child in a list should have a unique "key" prop.

리액트에서 key는 컴포넌트 배열 렌더링 시 원소에 어떤 변동 있었나 알고자 사용 

key가 없어도 가상 DOM 비교하면서 리스트 순차 비교해서 변화 감지 가능하나

key가 있다면 key값 이용하여 빠르게 감지 가능 

 

        const articleList = articles.map(article => (

            <Article 

                title={article.title}

                writer={article.writer}

                key={article.id}

            />

        ))

그래서 키값을 주면 오류가 사라진다 

 

        const nameList = names.map( 

        (name,index) => (<li key={index}>{name}</li>) 

        )

상수 배열 

 

const names = ['눈사람', '얼음', '눈', '바람'];

 

컴포넌트 state 

 

        state = {

            names: ['눈사람', '얼음', '눈', '바람']

        }

 

상수선언은 render() 안에서 

컴포넌트 state 선언은 render() 밖에서 

 

 

 state = {

        names: ['눈사람', '얼음', '눈', '바람'],

        name: ''

    };

    handleChange = (e) => {

        this.setState({

            name: e.target.value

        });

    }

    handleInsert = () => {

        //names 배열에 값을 추가하고 name 값을 초기화합니다.

        this.setState({

            names: this.state.names.concat(this.state.name),

            name: ''

        });

    }

 

    render() {

        const nameList = this.state.names.map(

        (name, index) => (<li key={index}>{name}</li>)

        );

        return (

            <div>

              <input 

                onChange={this.handleChange}

                value={this.state.name}/>

              <button onClick={this.handleInsert}>추가</button>

              <ul>

                  {nameList}

              </ul>

            </div>

        );

    }

*

리스트로 받아와서 <li></li> 하나씩 나열 <ul></ul>

메모앱 만드는데 추가하기