React 8. setState, this.props.children

setState 함수

setState함수는 컴포넌트의 상태(state)를 업데이트하는 방법으로 많이 사용된다. 리액트를 처음 사용하여 인스타그램을 클론할 때, 유저가 입력하는 리뷰를 빈 string으로 설정해놓고, 아래와 같은 방법을 통해 state값을 업데이트하려고 시도한 적이 있었다.

 

// 공간 부족 상 일부 코드만

// 컴포넌트 상태값
this.state = {
	userInput : '',
}

// 유저 입력값을 상태에 업데이트하는 함수
handleChange = (e) => {
	this.setState({
    	userInput : e.target.value,
    })
    this.checkUser();
}

//
checkUser = (e) => {
	// 폼 외부 div에 이벤트를 걸어서 유저 정보가 맞는지 확인
}

 

위 코드를 실행하니, userInput 변수에 업데이트되는 값이 입력한 값보다 한 글자씩 늦게 인식하고, 이 때문에 checkUser 함수가 제대로 기능하지 않는 문제가 발생하게 되었다.

 

setState 함수 = 비동기

setState 함수는 비동기적 특성을 가지고 있는 함수이기 때문에, setState을 사용하여 상태값을 업데이트한 직후에 해당 업데이트 내용을 확인할 경우에 바로 반영되지 않는다.

 

콜백 함수 사용

이를 해결하기 위해, setState 함수의 두 번째 인자에 콜백 함수를 선언하여 바로 상태값을 확인하거나 이어지는 함수를 실행할 수 있다. 따라서, 위 코드를 아래와 같이 수정할 수 있다.

// 유저 입력값을 상태에 업데이트하는 함수
handleChange = (e) => {
	this.setState({
    	userInput : e.target.value,
    }, this.checkUser())
}

 

this.props.children

작업을 하다보면, 같은 컴포넌트를 사용하지만 내부의 정보는 서로 다르게 보여주어야 할 때가 있다. 핀터레스트나 스타일쉐어의 카드 형식의 경우, 같은 레이아웃을 사용하지만 내부의 정보는 모두 다르게 보여진다. children은 이 때 적절하게 사용할 수 있는 기능이라고 한다.

 

velog.io/@joonsikyang/React-Children

React | 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);

출처 : 위 블로그

 

위 코드를 살펴보면, <ApprovalCart> 컴포넌트에 <Person> 컴포넌트를 선언하면서 각기 다른 정보를 props로 전달하는 것을 볼 수 있다. 이제 approvalCard 컴포넌트에서 this.props.children을 선언해줄 경우, Person 컴포넌트 전체가 받아온 정보를 가지고 렌더링되게 된다.

 

// 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;

2차 프로젝트에서 레이아웃과 디자인이 똑같은데 다른 정보를 보여줘야 할 경우, 해당 기능을 사용하여 코드를 조금 더 깔끔하게 짜는 연습을 해볼 계획이다.