📚 Reference

• 참고 자료 1

📜 Chapter

Two-way data binding (양방향 데이터 바인딩)

React

props

state

Context

‣

One-way Data Flow (단방향 데이터 흐름)

• One-way Data Flow
• 단방향 데이터 흐름
• 컴포넌트의 단방향 통신을 의미한다.
• 컴포넌트 간에 데이터를 전달할 때, 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것이다.

면접

• 면접에서 주요 쟁점은 “단반향 데이터 흐름”을 통해서 React에 어떤 특성이 생기는지가 관건

질문 예시

• Props와 State의 차이점에 대해 이야기해봐라.

  • React에서 props와 state는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있다.
  • props
    • props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터이다. props는 함수의 매개변수나 클래스형 컴포넌트의 this.props 객체를 통해 사용할 수 있다. props는 변경되지 않으며, 자식 컴포넌트에서 전달받은 데이터를 사용하여 렌더링한다.
    • 예를 들어, 부모 컴포넌트에서 props를 사용하여 자식 컴포넌트에 데이터를 전달할 수 있다.
  • state
    • state는 컴포넌트 내부에서 관리되는 변경 가능한 데이터이다.
    • state는 클래스형 컴포넌트에서 this.state 객체를 통해 사용할 수 있으며, setState() 메소드를 사용하여 변경할 수 있다. state의 변경은 render() 메소드를 트리거하고 UI를 업데이트한다.
    • 예를 들어, 클래스형 컴포넌트에서 state를 사용하여 데이터를 관리할 수 있다.
  • 따라서, props는 읽기 전용 데이터를 전달하는 데 사용되며, state는 컴포넌트 내부에서 변경 가능한 데이터를 관리하는 데 사용된다.
  • props는 한 구성 요소에서 다른 구성 요소로 데이터 또는 속성을 전달하는 방법인 반면, state는 해당 구성 요소 내에서만 사용할 수 있는 실시간 데이터라는 것이다.

• Props Drilling과 그것을 해결하는 방법에 대해 이야기해봐라.

  Prop Drilling이란 무엇일까?

  • Prop drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어이다.
  • 이는 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미합니다.
  • 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다.

  장점

  • 명시적인 값의 사용
    • Prop drilling을 통해 값을 전달하는 방식은 어디서 데이터가 사용되는지 명확하게 보여준다. 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 더 명확하게 파악할 수 있다.
  • 값 추적 용이성
    • Prop drilling을 사용하면 값의 흐름을 쉽게 추적할 수 있다. 값이 어떤 컴포넌트를 거쳐 전달되는지를 알 수 있으므로 버그를 디버깅하거나 코드를 변경할 때 더욱 편리하다.
  • 코드 변경 파악 용이성
    • Prop drilling을 통해 데이터가 전달되는 경로를 알 수 있기 때문에 코드 변경이 애플리케이션의 다른 부분에 어떤 영향을 주는지 파악하는 것이 용이하다. 데이터의 흐름을 명확하게 파악할 수 있으므로 변경 사항에 따른 영향을 사전에 예측하고 관리할 수 있다.

  단점

  • 프로퍼티 데이터 형식 변경의 불편함
    • Prop drilling 데이터의 데이터 형식을 변경해야 하는 경우, 컴포넌트 계층 전체에서 업데이트하는 것이 어려울 수 있다.
  • 중간 컴포넌트에 불필요한 프로퍼티 전달
    • 컴포넌트 분리 과정에서 중간 컴포넌트를 통해 불필요한 프로퍼티가 전달될 수 있어 불필요한 복잡성을 초래할 수 있다.
  • 누락된 프로퍼티 인지의 어려움
    • 필요한 프로퍼티가 타겟 컴포넌트에 전달되지 않은 상황을 인지하기 어려울 수 있어 잠재적인 문제를 발견하기 어려울 수 있다.
  • 프로퍼티 이름 변경 추적의 어려움
    • 프로퍼티 이름이 계층에서 변경되면 해당 값을 추적하고 업데이트하는 것이 어려워질 수 있다.