TIL_200528

 

Composition vs Inheritance

 

React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트간에 코드를 재사용하는 것이 좋습니다.

 

컴포넌트에서 다른 컴포넌트를 담기

어떠한 컴포넌트에는 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 이러한 경우에 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 할 수 있습니다.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

 

<FancyBorder> 태그안에 들어간 태그들이 FancyBorder 컴포넌트의 props.children으로 전달됩니다. 그래서 최종적으로 FancyBorder 컴포넌트의 div안에 전달된 props.children이 들어간 형태로 출력됩니다.

 

컴포넌트에 여러개의 구멍이 필요할 때는 자신만의 고유한 방식을 적용할 수도 있습니다.

React 엘리먼트는 단지 객체이기 때문에 prop으로 컴포넌트를 전달할 수 있습니다. 

React에서 prop으로 전달할 수 있는 것에는 제한이 없습니다.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

 

 

특수화

일반적인 컴포넌트에 props를 사용해서 구체적인 컴포넌트로 사용할 수 있습니다.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

 

 

자식컴포넌트를 가져오는 일 또한 가능합니다.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

 

 

---

 

 

React로 사고하기

1단계 UI를 컴포넌트 계층 구조로 나누기

우리가 첫 번째로 할 일은 모든 컴포넌트의 박스를 그리고 각각에 이름을 붙이는 것입니다. 디자이너와 함께 일한다면 디자이너가 목업을 만들때 Photoshop에서 레이어로 구분한 이름이 컴포넌트의 이름이 될 수 있습니다.

 

컴포넌트를 구성할때 한가지를 명심하면 됩니다. 단일 책임 원칙입니다. 하나의 컴포넌트는 한 가지의 일을 해야하고 만약에 컴포넌트가 커지게 된다면 작은 하위 컴포넌트로 분리해야 합니다.

목업에서 컴포넌트를 확인했다면 이를 계층 구조로 나열해봅니다. 모형의 다른 컴포넌트 내부에 나타나는 컴포넌트는 계층 구조의 자식으로 나타냅니다.

 

2단뎨 React로 정적인 버전 만들기

만들어진 컴포넌트 계층구조로 앱을 실제로 구현해봅니다. 가장 쉬운 방법은 데이터 모델을 가지고 아무 동작이 없는 버전을 만들어 보는 것입니다. 생각은 적게 필요하지만 타이핑은 많이 필요로 하는 이 과정은 시작을 가볍게 만듭니다.

 

데이터 모델을 렌더링하는 앱의 정적 버전을 만들기 위해 props를 이용해서 데이터를 전달해주는 컴포넌트를 만듭니다. 아직 state는 사용하지 않습니다. state는 오직 상호작용을 위해서 사용합니다. 정적인 버전을 만들때에는 필요하지 않습니다.

 

앱을 만들때 하향식(top-down) 또는 상향식(bottom-up)으로 코드를 작성할 수 있습니다. 다시 말해 계층구조에서 상위컴포넌트부터 만들거나 하층부의 컴포넌트부터 만들 수 있습니다. 프로젝트가 커지면 하층부의 컴포넌트부터 개발하기가 더 쉽습니다.

 

3단계 UI state에 대한 최소한의 표현 찾아내기

UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야합니다. 이를 React는 state를 이용해 변경합니다. 

 

애플리케이션을 올바르게 만들기 위해서 중복배제의 원칙을 가지고 변경 가능한 state의 최소 집합을 생각해야 합니다. 필요한 최소한의 state를 생각합니다. 예를들어 TODO 리스트를 만든다면 TODO 아이템을 저장하는 배열만 유지하고 갯수를 표현하는 state를 만드는 대신 TODO 리스트의 길이를 가져옵니다.

 

어떤 게 state가 되어야 하는지 알고 싶다면 세가지 질문을 하면 됩니다.

1. 부모로부터 props를 통해 전달됩니까?

2. 시간이 지나도 변하지 않나요?

3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 

세가지 질문에 하나라도 그렇다면 state가 아닙니다.

 

4단계 state가 어디에 있어야 할 지 찾기

최소한으로 필요한 state가 뭔지 찾았다면 어떤 컴포넌트가 state를 변경하거나 소유할지 찾아야 합니다.

React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따릅니다. 그렇기에 어떤 컴포넌트가 어떤 state를 가져야 하는지 바로 결정하기 어려울 수 있습니다. 그러나 다음을 따라서 생각한다면 알 수 있을 겁니다.

- state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요

- 공통 소유 컴포넌트 (common owner component)를 찾으세요 (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트)

- 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.

- state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하세요.

 

5단계 역방향 데이터 흐름 추가하기

지금까지 우리는 계층 구조 아래로 흐르는 props와 state의 함수로써 앱을 만들었습니다. 이제는 계층 구조의 하단에 있는 form 컴포넌트에서 state를 가지고 있는 상위 컴포넌트의 state를 업데이트할 수 있어야 합니다.

 

React는 전통적인 데이터 바인딩과 비교하면 더 많은 타이핑을 필요로 하지만 게이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떨게 동작하는지 파악할 수 있게 도와줍니다.

 

하위계층에 있는 form 컴포넌트에서 input태그의 value속성이 변경된다면 상위계층 컴포넌트의 state가 변경되기를 원할 것입니다. 그러나 컴포넌트는 자신의 state만 변경할 수 있기 때문에 하위 컴포넌트는 다른 방법을 통해서 상위 컴포넌트의 state를 변경해야 합니다. 이를 위해서 상위 컴포넌트에 자신의 state를 변경하는 메서드를 만듭니다. 이 메서드를 props로 하위 컴포넌트에 다른 데이터를 넘기듯이 내려줍니다. 이제 하위 컴포넌트에서 메서드에 콜백을 넘겨서 메서드를 호출하여 상위 컴포넌트의 state를 변경하면 업데이트 될 것입니다.

 

 

React공식문서

---

 

 

 

 

 

Virtual DOMT

만약에 DOM에 변경사항이 생긴다면 적용하기 위해서 전체 DOM Tree를 생성한다면 비효율적입니다. virtual DOM은 효율적으로 DOM을 업데이트하도록 돕습니다. 먼저 변경사항을 확인하여 Real DOM에 추가합니다.