search

FE-StudyWithMe / FE-without-framework

프레임워크 없는 프론트엔드 개발을 위한 레포지토리🔥
28 stars 0 forks source link

[4장] attribute/property는 props와 같은 개념일까요? #28

Closed Raihyul closed 3 weeks ago

Raihyul commented 3 weeks ago

🧐 Question

이번주에도 어김없이 저희가 기존에 사용하던 프레임워크(라이브러리)와 비교하는 질문을 가져와봤습니다 ㅎㅎ

'속성 관리' 파트를 읽다가, 문득 attribute를 사용하는 방식이 우리가 흔히 React나 Vue에서 사용한 props의 개념과 비슷하다는 생각이 들었어요. 개인적으로 attributeChangedCallback 메서드로 속성이 변경될 때 마다 무언가 변경을 할 수 있다는 점이 props가 변경되면 컴포넌트가 리랜더링 된다는 것과 상당히 유사하다고 느끼면서 둘이 더더욱 비슷한 것 같다는 생각을 했는데요.

자료를 찾아보니 유사한 역할을 하지만 동일한 방식으로 작동하지는 않는다 라는 결론을 얻었어요.

이 두 가지가 가장 큰 차이점이라고 느꼈는데, 그렇다면 property가 props와 비슷한 개념일까? 하는 의문이 들었어요 🤔

GPT의 힘을 빌려 자료를 찾아보니, 아래와 같은 이유로 attirbute보다 property가 props에 조금 더 가깝다고 해요.

각 특징 정리 표로 마무리하며, 해당 내용에 대한 생각 한 번 공유해보아요:)

특징 Attribute Property Props (Vue/React)
데이터 타입 - 문자열로만 데이터가 전달
- 다른 타입의 데이터를 전달하려면 문자열로 변환이 필요
- 예: <my-element title="Hello"></my-element>		 - 다양한 데이터 타입(숫자, 불리언, 객체 등)을 지원
- JavaScript를 통해 쉽게 설정하고 사용
- 예: element.count = 10;		 - 다양한 데이터 타입(문자열, 숫자, 객체, 배열, 함수 등)을 직접 지원
- JavaScript 객체로 전달되므로 타입 변환이 불필요
- 예: <MyComponent title="Hello" count={5} />
설정 방법 - setAttribute('속성명', '값') 메서드를 사용하여 속성을 설정
- HTML 마크업 내에서도 속성을 직접 정의
- 예: <my-element title="Hello"></my-element>		 - JavaScript를 통해 직접 프로퍼티를 설정
- DOM 요소의 객체 속성으로 접근하여 설정
- 예: element.count = 10;		 - Vue/React에서는 컴포넌트를 사용할 때 JSX 또는 템플릿 구문을 통해 props를 전달
- Vue: <my-component :count="10" />
- React: <MyComponent count={10} />
반응성 자동 처리 - 없음. 속성의 변경을 감지하여 반응적으로 UI를 업데이트하려면 attributeChangedCallback을 수동으로 구현
- 개발자가 직접 변경 사항을 처리		 - 없음. 프로퍼티의 변경을 감지하여 반응적으로 UI를 업데이트하려면 추가적인 로직이 필요
- 개발자가 직접 반응성을 관리		 - Vue/React: 프레임워크의 반응성(Reactivity) 시스템이 props의 변화를 자동으로 감지하고, 필요한 경우 컴포넌트를 자동으로 리렌더링
- 개발자는 별도의 콜백이나 로직을 구현할 필요가 없음
타입 검증 - 없음. 모든 속성은 문자열로 처리되며, 추가적인 타입 검증 로직을 수동으로 구현
- 잘못된 타입의 데이터가 전달될 경우 오류가 발생할 수 있음		 - 없음. 프로퍼티 설정 시 타입 검증을 수동으로 구현
- 잘못된 타입의 데이터가 설정될 경우, 예상치 못한 동작이 발생할 수 있음		 - Vue: props 옵션에서 타입을 명시적으로 지정할 수 있으며, 기본값 설정이 가능
javascript<br>props: {<br>  title: {<br>    type: String,<br>    required: true<br>  },<br>  count: {<br>    type: Number,<br>    default: 0<br>  }<br>}<br>
- React: PropTypes 또는 TypeScript를 사용하여 타입 검증을 수행 가능
jsx<br>MyComponent.propTypes = {<br>  title: PropTypes.string.isRequired,<br>  count: PropTypes.number<br>};<br>MyComponent.defaultProps = {<br>  count: 0<br>};<br>
사용 용도 - 주로 초기 설정값 전달에 사용
- 외부 개발자나 다른 프로젝트에서 재사용 가능한 공통 속성 정의에 적합
- 예: <my-element title="Hello" />		 - 동적 데이터 설정에 사용
- JavaScript를 통해 컴포넌트의 상태를 실시간으로 변경할 때 유용
- 예: element.count = 10;		 - 부모-자식 간 데이터 전달 및 관리에 사용
- 컴포넌트의 재사용성과 유지보수성을 높이는 데 필수적인 역할
- 예: <MyComponent title="Hello" count={5} />
통합 생태계 - 웹 표준 기반으로, 특정 프레임워크에 의존하지 않음
- Vue나 React 외에도 모든 프레임워크 및 순수 JavaScript 프로젝트에서 사용 가능		 - 웹 표준 기반으로, 다양한 프레임워크와 호환
- 프레임워크의 반응성 시스템과는 별도로 동작		 - Vue/React의 생태계와 밀접하게 통합
- 상태 관리, 라우팅, 빌드 도구 등 프레임워크의 다른 기능과 자연스럽게 연동
- 프레임워크 전용 플러그인이나 라이브러리를 쉽게 활용 가능
데이터 전달 방식 - HTML 마크업을 통한 선언적 전달.
- 문자열로 데이터를 전달하기 때문에 간단한 데이터에 적합
- 예: <my-element title="Hello"></my-element>		 - JavaScript API를 통한 직접 설정.
- 다양한 데이터 타입을 다룰 수 있으며, 동적 데이터에 적합
- 예: element.count = 10;		 - 컴포넌트 사용 시 props를 선언적으로 전달.
- JSX나 템플릿 구문을 통해 명확하고 간편하게 데이터를 전달할 수 있습니다.
- 예: <MyComponent title="Hello" count={5} />
데이터 동기화 - 독립적 관리. 속성 변경 시 컴포넌트 내부의 상태와 UI를 수동으로 동기화
- 프레임워크의 자동화된 시스템을 활용할 수 없음		 - 독립적 관리. 프로퍼티 변경 시 UI 업데이트를 수동으로 처리=
- 프레임워크의 반응성 시스템을 그대로 사용할 수 없음		 - 자동 동기화. 프레임워크가 props 변경을 감지하고 자동으로 UI를 업데이트
- 개발자는 데이터 동기화에 대한 걱정 없이 컴포넌트 로직에 집중
- 예: React의 상태 변화 시 자동 리렌더링

p.s. props 동작의 구현에서 attribute나 property의 개념이 사용되는 지 알아보고 싶었는데 그 부분에 대해서는 못 찾겠더라구요ㅠ 혹시 해당 내용에 대해 자세히 아는 분 있으면 지식 공유 부탁드립니다 🙇

📝 Reference

chhw130 commented 3 weeks ago

@Raihyul 항상 무언가 더 배우고 정리하는 모습 좋습니다! 😆

attribute/property는 props와 같은 개념일까요? 라는 물음에 방향성은 같다?! 라고 생각합니다. 결국 데이터나 element 고유 속성을 정의 하기 위해 어떤 데이터(props)를 넘겨준다라는 게 목적이니까요. 추가로 attribute 혹은 property로 데이터를 전달하는 각각의 장점을 React나 vue에서 잘 혼합했다는 느낌을 받았습니다. (custom element의 동작 방식이 마치 React의 class컴포넌트와 매우 유사해서 그런거 같아요...ㅎㅎㅎ)

Joie-Kim commented 3 weeks ago

Q. react에서 props를 처리하는 내부 로직을 알고 싶어. 브라우저에서 제공하는 web component에서 attribute나 property로 데이터를 넘기는 방식을 사용하는지 궁금해!

React에서 props를 처리하는 내부 로직은 웹 컴포넌트의 attribute와 property 개념과 유사하지만, 더 고차원적으로 동작합니다. 다음은 React의 props 처리 방식과 웹 컴포넌트와의 유사성을 설명한 것입니다.

1. React에서 props 처리

React에서 props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. React의 props는 JavaScript 객체로서 자식 컴포넌트에 전달되고, 전달된 props는 읽기 전용입니다. 이 로직은 React의 재사용 가능하고 컴포넌트 중심적인 아키텍처를 형성하는 중요한 부분입니다.

function Parent() {
  return <Child name="Heeju" age={30} />;
}

function Child(props) {
  return <div>{props.name} is {props.age} years old.</div>;
}

여기서 Child 컴포넌트는 props 객체를 받아서 내부적으로 이를 렌더링에 사용합니다.

2. 웹 컴포넌트에서의 attribute와 property

웹 컴포넌트에서는 데이터 전달을 위해 attribute와 property 두 가지 방법을 사용합니다. 두 개념은 서로 밀접하지만 구분이 있습니다.

<my-element data-name="Heeju"></my-element>

자바스크립트로는 다음과 같이 설정할 수 있습니다:

document.querySelector('my-element').setAttribute('data-name', 'Heeju');
const element = document.querySelector('my-element');
element.someProperty = { name: 'Heeju' };

3. React의 props vs 웹 컴포넌트의 attribute와 property

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['data-name'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-name') {
      this.render();
    }
  }
}

결론

React의 props는 웹 컴포넌트의 property와 유사하며, JSX에서 사용하는 속성 시스템은 웹 컴포넌트의 attribute와 비슷하지만 더 유연하게 다양한 데이터 타입을 지원합니다. React는 변경된 props에 대해 자동으로 컴포넌트를 다시 렌더링하는 반면, 웹 컴포넌트는 attributeChangedCallback과 같은 메서드를 통해 수동으로 처리해야 합니다.

Joie-Kim commented 3 weeks ago

Q. 리액트 내부에서 웹 컴포넌트를 사용하는 건 아니야?

React는 내부적으로 웹 컴포넌트를 사용하지 않습니다. React는 자체적인 가상 DOM과 렌더링 메커니즘을 사용하여 DOM을 효율적으로 업데이트하고 관리합니다. React 컴포넌트는 웹 컴포넌트와 비슷한 개념을 구현하지만, 실제로는 두 시스템은 별개입니다.

React와 웹 컴포넌트의 차이점

구현 방식의 차이:

React 내부적으로 웹 컴포넌트를 사용하지 않는 이유

React는 가상 DOM과 자신의 렌더링 메커니즘을 사용하여 성능을 최적화하고, 코드 간결성과 유지보수를 쉽게 하기 위해 독립적인 컴포넌트 시스템을 제공합니다. 웹 컴포넌트는 브라우저의 표준 API로 작동하는 반면, React는 브라우저 표준에 의존하지 않고, 프레임워크 레벨에서 성능 최적화를 추구합니다.

Joie-Kim commented 3 weeks ago

결론!!!! 🥵