[FE] JS: map / React: State up, list key(react props로 넘길때 key값 지정)

 

forEach: 배열의 모든 원소에 콜백함수를 1회 실행하고 종료

map: 배열의 모든원소에 콜백함수를 1회 실행하고 새로운 배열 리턴해주고 싶을 때 사용

 

map은 return 값이 반드시 있음

 

아래는 habits 라는 배열을 map으로 돌고 하나하나있는 원소의 객체의 id, name, count를 props를 통해 Habit 컴포넌트에 넘기는 과정이다. 

 

habits.jsx

import React, { Component } from 'react';
import Habit from './habit';

class Habits extends Component {
  state = {
    habits: [
      { id: 1, name: 'Reading', count: 0 },
      { id: 2, name: 'Running', count: 0 },
      { id: 3, name: 'Coding', count: 0 },
    ],
  };
  render() {
    return (
      <ul>
        {this.state.habits.map(취미 => (
          <Habit key={취미.id} dadongHobby={취미} /> 
          //dadong으로 부모로(감싸고있는 것으로부터) props 이름을 멋대로 지정해서 옮길 수 있고
          //취미 라는것은 콜백함수에서 임시로 받아오는 데이터의 명! 그것이 바로 habits라는 배열에서 map을 돌며 하나하나 받아오는 요소
        ))}
      </ul>
    );
  }
}

export default Habits;

 

habit.jsx 컴포는트는 render에서 props로 받아온 데이터를 사용할 수 있다.

Habits 컴포넌트에서 habit을 부르면서 데이터를 넣었다. 그때 사용한 요소가 있다 위로 예를 들면 dadong이다.

dadong을 변수에 받아와서 habit.jsx의 render() 함수의 return 값에서 사용할 수 있다. 아래와 같이.

 

class Habit extends Component {

  state = {
    count: 0,
  };

.
.
.



render() {
//    const { name, count } = this.props.habit;
    const { name, count } = this.props.dadongHobby;
    // props 로 가져온 상위 state에서 이름 명이 같아야함 name, count
    // 그리고 map은 콜백으로 호출한것을 모아 새로운 배열 구성

    return (
      <li className="habit">
        <span className="habit-name">{name}</span>
        <span className="habit-count">{count}</span>
        <button
          className="habit-button habit-increase"
          onClick={this.handleIncrement}
        >
          <i className="fas fa-plus-square"></i>
        </button>
        
        
  .
  .
  .
  .
  .
  .

const { name, count }를 통해 props로 받아온 데이터를 넣고(props로 넘겨준 부모컴포넌트의 state로 선언된 객체의 요소명과 같아야 그대로 담긴다.

 

dadong 안에 name과 count 요소가 하나하나 담겨있다. 부모컴포넌트 habits의 habits 배열안에 있는 object들이다.

상위에서 map으로 돌렸기 때문에 habits배열의 요소가 없을때까지 호출된다.

 

 

---

이벤트 처리하기

 

- 특정컴포넌트에서 prop으로 받은 데이터를 보여주기만 한다면 해당 컴포넌트에서 state는 사용할 필요가 없다.

- habit은 props로 받은 habit을 보여주기만 함. 자체 state가 없음. 내부적으로 데이터 처리 X

- 콜백함수들을 단순히 호출만 해주는걸로 만듬 -> habit컴포넌트!

 

Habits..부모 컴포넌트에 콜백함수 다 가지고 있기. 

-> habits..부모 컴포넌트에서 콜백함수 호출 하면 그냥 다 전달 된느 

 

야 해빗 컴포넌트야! 플러스 버튼이 클릭이되면 onIncrement에 handleIncrement를 전달하고,

 

habits라는 부모 컴포넌트에서 prop으로 Haibt 컴포넌트를 호출해. 그러면 

컴포넌트에 들어있는 habit이라는 오브젝트를 인자로 전달함 ->

그럼 habit 오브젝트에 해당되는 것만 카운트가 올라감

 

Habit에도 prop으로 전달된 콜백함수 호출할 수 있게 만들어놓음

 

 

*출처: 앨리의 드림코딩 React 수업 복습

Dream Coding

 

 

리액트는 state를 직접적을수정하는것은 안된다!(안좋다)

 

 

 

콜백함수 복습

 

'use strict'

console.log('1');

setTimeout(



);   


setTimeout( 함수, 1000초);
function() {
   console.log('2');
}



//1000초 뒤에 해당 함수를 실행하라


setTimeoit(function() {
  console.log('2');
  }, 1000);