프론트 전체 세션 정리
setState 비동기의 특성
- setState함수는 비동기적 특성을 가지고 있다.
- setState는 변경된 상태값이 적용 되는 것이 아닌 답변을 기다리는 하나의 요청
- 호출이 끝났다고 해서 바로 상태가 변경 되는 것이 아니라 시간이 얼마나 걸릴지 모르는 하나의 요청이라 생각!
setState 예시
handle = () =>{
this.setState({
number : this.state.numebr +1
});
console.log(this.state.number) // 1
}
render (){
return(
this.state.number // 2
)
}
- 위의 코드 와 같이 예상과 다른 결과 값을 console.log에서 확인 가능
해결방법 (1)
- this.setstate안에서 두번째 인자로 콜백함수로 적용시키면 올바른 값이 나옴!
- 비동기 처리가 끝난뒤에 2번째 인자 콜백함수가 작동 됨
- setState 및 state를 사용하면서 굳이 console.log로 확인할 필요 없음
handle = () =>{
this.setState({
number : this.state.numebr +1
},()=>{console.log(this.state.number) // 2});
}
render (){
return(
this.state.number // 2
)
}
해결방법 (2) input 값 확인
- 위의 방법이 아닌 e객체를 이용
- e 객체는 값이 바로 들어오기 때문에 콜백함수를 이용해 콘솔을 사용하는 방법
hadleOnchange = e =>{
this.setState({
text: e.target.value
}}
console.log(e.target.value)
}동기 vs 비동기
동기
- 한줄 한줄 코드가 끝날 때 까지 기다림(forEach,map)
- 모든 forEach,map 이 끝날 때 까지 기다림
비동기
- fetch, setState : 일을 시켜놓고 다른 일을 작업하다가 응답이 오면 그 바로 작업을 실행
- 작업의 우선순위를 두지 않음
Props, Children 사용
Props
- 부모 컴포넌트로부터 자식 컴포넌트에 전달 되는 데이터
- 아래와 같이 객체 형태로 전달 받음
<Child name="json" age=30 position:"mentor"/>
props = {
name: "json",
age:30,
position : "mentor"
}Children
- 특정 틀이 정해져 있는 컨테이너 안에 자식요소들을 컨트롤할 때 사용
// Children.js - 부모 컴포넌트
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import Person from "./Person";
import ApprovalCard from "./ApprovalCard";
import "./Children.scss";
export class Children extends Component {
render() {
return (
<div className="Children">
<h1>React Children</h1>
<hr />
<section className="card-section">
<ApprovalCard>
<Person
name="joonsikyang"
email="joonsik@wecode.com"
position="Frontend Mentor"
/>
</ApprovalCard>
<ApprovalCard>
<Person
name="yerikim"
email="yerikim@wecode.com"
position="Frontend Mentor"
/>
</ApprovalCard>
<ApprovalCard>
<Person
name="jihunpark"
email="jihunpark@wecode.com"
position="Backend Mentor"
/>
</ApprovalCard>
</section>
</div>
);
}
}
export default withRouter(Children);- ApprovalCard 컴포넌트가 ... 이러한 형식으로 작성 됐고 그 안에 이 존재하면 은 props로 children에 포함 된다.
// ApprovalCard.js - this.props.children
import React, { Component } from "react";
import "./ApprovalCard.scss";
export class ApprovalCard extends Component {
render() {
console.log("this.props: ", this.props);
return (
<div className="ApprovalCard">
<div className="top">{this.props.children}</div>
<div className="bottom">
<div className="btn cancel">Decline</div>
<div className="btn okay">Approve</div>
</div>
</div>
);
}
}
export default ApprovalCard;
- props로 전달받은 Person 컴포넌트를 내부에서 사용할 때 {this.props.children} 으로 접근 가능 (console.log 안에 확인)
- children 값으로 컴포넌트 뿐만 아니라 plain text, multiple elements 등 어떠한 것이든 전달 가능
- 필요에 따라서 같은 레이아웃 안에 다른 내용을 보여주고 싶은 경우 children을 사용하면 효율적으로 컴포넌트를 재사용 가능
Front End. Dev