componentDidMount()

componentDidMount() 는 react component 의 lifecycle 이다. 맨 처음 컴포넌트가 호출되면 constructor => render => componentDidMount 의 순서로 진행된다.

이해하기 쉽게 설명하자면 과거에 속도가 느린 컴퓨터로 웹사이트를 들어가 볼때, 흰 화면에 잠깐 웹사이트의 틀이 보였다가 이미지같은게 보여졌던 기억이 있을 것이다.

1. 처음에 constructor 에서 state 의 초기값을 지정하고
2. render 에서 웹사이트의 틀을 잡아놓고
3. componentDidMount 에서 fetch() 함수가 실행되어 이미지 등을 백엔드에서 가져와 화면에 렌더링된다.

이러한 과정으로 인해 느린 컴퓨터로 웹사이트의 lifecycle 순서를 확인할 수 있었던 것이다.

fetch()

fetch() 는 백엔드에서 정보를 가져올 수 있게 해준다.

보통 conponentDidMount 에서 사용된다.

fetch("api 주소 ~~")
	.then(response => response).json() // <1번>
    .then(response => { // data를 응답받은 후의 로직}) // <2번>

fetch() 의 첫번째 인자는 api 주소이다. 이를 통해 백엔드에서 정보를 가져올 수 있다.

하지만 백엔드에서 넘겨주는 데이터는 json 형식으로 넘어온다. 그래서 json 을 javascript 로 변환하기 위해 <1번> 라인을 실행해 주어야 한다. 그리고 <2번> 라인에서 데이터가 잘 넘어왔는지 console.log() 등으로 활용이 가능하다.

자식 컴포넌트로 메서드 넘겨주기

// 부모 컴포넌트

handleChange = (e) => {
	this.setState({
    	userInput: e.target.vale,
    })
}

render() {
	return (
    	<>
        	<child handleChange={this.handleChange} />
        </>
    );
}

👇

// 자식 컴포넌트

class child extends Component {
	render() {
    	<input type="search" onChange={this.props.handleChange} />
    }
}

부모 컴포넌트에서 자식 컴포넌트로 메서드를 넘겨주려면 부모컴포넌트의 속성으로 메서드 이름을 작성하기만 하면 된다.
handleChange={this.handleChange}
이렇게 하면 부모컴포넌트에서 정의한 메서드를 넘길 준비가 된 것이다.

자식 컴포넌트의 input 태그에서는 props 로 받을수 있다.

하지만 결국 원하는 것은 자식 컴포넌트의 input 태그에서 onChange 이벤트가 발생하면 부모 컴포넌트에서 내려받은 메서드를 실행하는 것이기 때문에 자식 컴포넌트에서 <input onChange={this.props.handleChange] 라고 한다.

결과적으로 자식 컴포넌트의 input 에서 onChange 이벤트가 발생하면 부모 컴포넌트에서 내려받은 handleChanege 메서드를 실행할 수 있게 된다.

array.map() 메서드를 활용하여 컴포넌트 배치하기

class CardList extends Component {
	render() {
    	return (
        	<div className="card-list">
            	{[1, 2, 3, 4, 5].map(list => {
                	return <Card />;
                })}
            </div>
        )
    }
}

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

백엔드에서 넘어오는 데이터의 타입을 활용하여 곧바로 map() 메서드를 사용하여 화면에 컴포넌트를 배치할 수 있다.

주의!
jsx 에서 자바스크립트를 사용하려면 {} 를 꼭 사용할 것!