TIL- React ComponentDidMount, Map, function in Event, 동기,비동기 실행

sanghun Lee·2020년 8월 12일

Map Props React State filter

Today I Learned

목록 보기

42/66

1. ComponentDidMount

일단 React는 실행이 된다면 class 내의 constructor, render, componentDidMount순으로 호출이 되며 setstate 발생시 rerender가 된다!

그리고 componentDidMount는 전체실행 후 한번만 실행이되는 특성을 가지는데 이때문에 API를 부르는 용도로 많이 사용이 된다고한다.

따라서 보통의 구조는 아래와 유사하다

import React, {Component} from'react';
//class start
class Practice extends Component {
	constructor(props){
    	super(props)        
        this.state = {
        	sample:       
        }    
    }
    componentDidMount (){
    	fetch("https://www.abcdefg.com")
        .then(response => response.json())
        .then(response => this.setState({sample: response})
    } 
    render(){
    	<div className = "Practice">
        	...
        </div>
    }
}

그리고 이렇게 fetch 메서드를 이용하여 끌고온 자료들은 보통json파일의 형식을 가지고 있다

json파일의형식을 봐보자..

JS의 시각으로 보면 array 안에 다량의 Object가 존재하는 형식이다.

Object에는 당연히 key&value pair가 있다.(아래 map 메서드 이야기에서 꼭 필요한 이야기다)

json으로 받는이유는 원활한 통신을 위해서임(전부다 공용으로 쓰는 언어가 필요해서이다)

정리하자면 componentDidMoundt는 아래의 순서로 사용된다 보면된다.

데이터 요청 : fetch()

response확인 : console.log()를 통해 확인하자

내가원하는 정보를 state에 담는다. : setState() 사전에 백엔드와 합의 후 동일한 키값의 스테이트를 만들어놓는다면 꿀이다

render로 넘어간다. render()

이제 fetch로 요청후 응답이 올때 실행할 함수를 넣는곳이 .then()이다.

아래와 같이 필요한 body를 자바스크립트 언어로 바꿔주는 함수가 json()임

fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())// JSon body => JS 로 변환.
.then((response) => this.setState({sth:response})// JS로 변환된 response를 지정한 state에 저장한다
이제 JS로 변환된 아이를 지정한 state에 저장하게 되고 이는 객체들이 모여있는 배열이 될 것이다.

이런식으로 state에 저장하자마자 monsterFilter 함수를 실행하는 것도 가능하다

.then(response => this.setState({monsters : response}, this.monsterFilter));

setState사용으로 발생된 객체는 완전 다른객체이다.(같은객체에서 값이변경된게 아니다)

2. map

map 메서드를 이용하여 위에서 받은 데이터를 통해 동일한 틀에 다른 데이터를 넣는 작업이 필요한 요소들(Component)에 각 키 값들을 배치해서 구현해준다.

map은 배열을 위해 사용할 수 있는 iterator(method? function??)이기 때문에 지정해준 배열에 사용한다면 처음부터 끝까지 지정한 조건을 실행하여 새로운 배열을 반환해준다.

아래는 간단한 예제이다

class Story extends Component {

    constructor() {
      super()
      this.state  = {
        imagemock : require('./Mockdata/stroyData.json')
      } 
    }
    
    render() {
        return (
            <div className="Story">
                <ul>
                {this.state.imagemock.map(({src, name, alt}) =>(
              <li>
                <div className="storyBoardCircle">
                  <img 
                    alt={alt}
                    src={src}/>
                </div>
                <span className="exampleId">{name}</span>
              </li>))}
                </ul>
          </div>
            );
    }
}

export default Story;

mockdata를 만들어 배열안의 객체들을 state에 저장하고 render하는 과정에 map을 이용하여 반복되는 요소들에 각자다른 src, name, alt값들을 부여해줬다.

이런식으로 Map을 사용하면 10줄이 될 것도 1줄로 바꿀 수 있으니 얼마나 좋은가 싶다.

보통 이런식으로 각 key,value,username, password 등을 지정해주는데

React에서는 특정태그마다(나는 주로 li 마다) key값을 부여하지 않으면 key값을 달라고 빨간창을 미친듯이 띄워대기 때문에 key값에 대한 고민을 해야한다.

보통은 데이터에서 Key값을 받아 배치하면 좋겠지만 상황이 그렇지 않은 경우 index를 사용하여 값을 부여하기도 한다.
하지만, 다른 componenet랑 키 값이 겹칠수도 있는 위험이 존재하고, re-rendering될 시 react가 인지 못할 수 있기때문에 정 쓸 수 있는 수단이 없다면 index를 사용하자

3. Filter

array.filter({key}=> condition}

array.filter( elements => condition}

의 형식이다. 다른형식도 가능하다. 일단 내가 사용했던 방법이 저것이기 때문에 이렇게 적어야겠다.

반환되는 값은 조건(condition)을 만족하는 참값으로 만들어진 새로운 배열이 반환된다.

    this.setState({monsterFiltering :
    this.state.monsters.filter(({name}) => 
    name.toLowerCase().includes(this.state.userInput))});

4. Function in Event

//1. <div onClick ={this.hello()} className="state-header">State / Props 연습!!</div>
//2. <div onClick ={this.hello} className="state-header">State / Props 연습!!</div>
//3. <div onClick ={()=>this.hello()} className="state-header">State / Props 연습!!</div>

1번은 rendering 되는 순간 함수가 정의되기전에 호출되어 버리기 때문에 대부분 오류가 나는 케이스이다.
2번은 함수가 정의되어 있고 이벤트가 발생했을 때 실행되는 케이스
3번은 임의의 함수()를 정의해놓고 Arrowfunction을 통해서 특정 인자를 받을 때 실행을 할 수 있게 만들어 놓은 것이다.
그러니까 임의정의된 상태에서 호출이 되면 필요한 인자를 받아 실행이 된다.