React - 컴포넌트 간의 통신

리액트에서 한 컴포넌트가 다른 컴포넌트와 통신하기 위해서는 '속성' 을 전달해야 하며 

속성을 전달할 때는 아래 두 가지 사항을 염두에 두어야 한다. 

1) 상태나 속성에 대한 접근은 부모 컴포넌트에서 이루어진다.

2) 필요한 데이터는 자식 컴포넌트에 전달한다.

부모 -> 자식 데이터 전달하는 예제 코드

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
 
// simple 한 예제를 위해 상태가 없는 함수형 컴포넌트를 이용
const UserProfile = props => {
  return <img src={`https://source.unsplash.com/user/${props.username}`} />;
};
UserProfile.propTypes = {
  pagename: PropTypes.string
};
 
UserProfile.defaultProps = {
  pagename: "erondu"
};
 
const UserProfileLink = props => {
  return <a href={`https://ifelse.io/${props.username}`}>{props.username}</a>;
};

// UserCard 컴포넌트는 UserProfile 과 UserProfileLink 컴포넌트의 부모 컴포넌트
// 자식들에게 props를 전달한다. 
const UserCard = props => {
  return (
    <div>
      <UserProfileLink username={props.username} />
      <UserProfile username={props.username} />
    </div>
  );
};
 
render(<UserCard username="erondu" />, document.getElementById("root"));

매우 심플한 통신(데이터 전달) 방법이다.

리액트에서는 데이터가 한쪽으로만 전달된다. (단방향)

컴포넌트에 데이터를 전달할 수는 있지만, 속성을 전달하지 않고 다른 컴포넌트의 상태나 속성을 갱신할 수는 없다. 

또한 부모 컴포넌트의 데이터를 수정할 수도 없다. 

하지만 콜백을 이용해 계층 구조에서 부모에 해당하는 컴포넌트로 데이터를 돌려보낼 수는 있다. 

부모는 자식으로부터 콜백을 수신하면 자신의 데이터를 수정하고 변경된 데이터를 다시 자식에게 보낼 수 있다. 

양방향으로 자유롭게 데이터를 주고받는 것이 더 좋을 것으로 생각할 수도 있다.

하지만 이럴 경우 애플리케이션을 이해하기 어려워지고 디버깅하기도 쉽지 않게 된다. 

단방향 흐름은 데이터의 전달 과정을 이해하기 쉽고 예측하기 수월해 진다.