단방향 및 양방향 데이터 흐름 - The Ultimate Front-End Interview Questions Guide Pt: 1

Ultimate Front-End 인터뷰 가이드에 오신 것을 환영합니다. 이 일련의 게시물에서는 프런트 엔드 인터뷰에서 가장 요구되는 주제를 모두 잘 수행할 수 있도록 찾을 수 있습니다. 지금 인터뷰를 준비하고 있지 않더라도 이 일련의 게시물을 통해 최신 정보를 얻을 수 있으며 인터페이스 구성의 가장 파생적인 기술과 관련된 복잡한 주제를 설명할 준비가 항상 되어 있습니다.

단방향 무엇?

단방향 및 양방향 데이터 흐름의 개념은 다소 설명하기 쉽지만 동시에 예를 들어 설명할 올바른 단어나 반대되는 사용 사례가 없으면 약간 까다롭습니다.

프런트 엔드 데이터 흐름은 페이지를 렌더링할 때 프로젝트의 둘 이상의 부분 간에 전송되는 데이터 집합입니다. 이 데이터는 여러 가지 방법으로 표현될 수 있지만 오늘날에는 일반적으로 사용되며 상태로 알려져 있습니다. 상태를 변경하고 사용하는 프레임워크가 상태를 변경하기 위해 수행하는 조치는 데이터 흐름을 정의하는 방법입니다.

프론트 엔드 개발을 위한 가장 유명한 라이브러리인 ReactJS는 단방향 데이터 흐름을 사용하고 VueJS와 같은 라이브러리는 양방향 데이터 흐름을 사용합니다. 이제 그들 사이의 차이점을 알아보자.

VueJS 및 Angular의 양방향 데이터 흐름

VueJS 및 Angular와 같은 프레임워크는 양방향 데이터 바인딩을 사용합니다.

Two-way data binding refers to sharing data between a component class and its template. If you change data in one place, it will automatically reflect at the other end.

이것은 .bind() 메서드를 통해 Javascript의 함수에 기본적으로 존재하는 개념이며 상태 흐름을 양방향으로 제어하기 위해 이러한 도구에서 구현되었습니다.



이 개념을 탐구하는 예제 VueJS 코드를 살펴보겠습니다.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

이것은 입력을 입력할 때 변경되는 Vue의 데이터입니다. vue에서 양방향 데이터 바인딩을 사용하기 위해 v-model 속성을 사용합니다.

<div id='app'>
  <p>{{ message }}</p>
  <input v-model='message'>
</div>

이 경우 입력은 기본값 'Hello Vue.js'로 시작됩니다. 입력 필드의 값을 변경하면 뷰가 자동으로 변경되어 데이터가 자동으로 변경됩니다. 마찬가지로 데이터의 기본값을 변경하거나 애플리케이션에서 수정하면 양방향 데이터 바인딩 개념으로 인해 뷰에 반영됩니다.

See a live example on CodePen

실용적이고 요약된 방식으로 이러한 프레임워크에서는 상태가 변경되면 뷰가 변경되고 변경 사항을 적용하기 위해 다시 렌더링됩니다. 마찬가지로 뷰가 변경 사항을 수신하면 상태가 강제로 업데이트되고 화면에 표시되는 내용과 동기화됩니다.

React의 단방향 데이터 흐름

React 라이브러리에는 단방향 데이터 흐름(Unidirectional Data Flow)이라는 개념이 있습니다. React의 경우 화면에 보이는 것을 변경하는 유일한 방법은 데이터(상태)를 수정하는 것입니다. 뷰를 수정할 때 Vue나 Angular와 달리 상태가 변경되지 않습니다.

Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application.

실제로 예제 코드를 살펴보겠습니다.

const { useState } = React

const App = () => {

  const [input, setValue] = useState("");
  const [name, setName] = useState('Chris');

  handleInput = (event) => {
    setValue(event.target.value);
  }

  updateName = (event) => {
    event.preventDefault();
    setName(input);
    setValue("");
  }

  return (
    <div className="box">
      <h1>
        Hello, <span>{name}!</span>   
      </h1>

      <form className="form">

        <div class="field">
          <label for="name-1">Update Name</label>
          <div class="control">
            <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button onClick={updateName} class="button is-dark">Save</button>
          </div>
        </div>
      </form>

    </div>
  )
}

위의 형태를 봅시다. 입력은 h1 태그에 설명된 이름 업데이트를 담당합니다. 상태를 추가하는 유일한 방법은 useState() 후크를 호출하는 버튼으로 반복하는 것입니다. 입력 값을 변경하거나 상태를 값으로 사용하더라도 상태를 변경하는 함수를 호출하지 않으면 효과가 없습니다. 이것은 흐름이 항상 단방향이며 보기가 상태를 변경할 수 없으며 그 반대도 마찬가지이며 모든 것이 단일 흐름으로 진행됨을 나타냅니다.

See a live example on CodePen

결론

오늘날 우리는 다소 복잡하지만 개념을 연습하고 검토함에 따라 내면화될 두 가지 개념을 알고 있습니다. 질문이 있으시면 여기에 댓글로 보내주시면 기꺼이 답변해 드리겠습니다.

이 게시물은 일련의 게시물의 일부입니다. Ultimate Front-end Interview 가이드에 대한 더 많은 게시물을 보려면 여기 dev.to에서 저를 팔로우하고 계속 지켜봐 주세요.

링크드인에서 나를 팔로우하세요: