Props6

• 

  [Svelte]부모 컴포넌트의 값 변경 props 전달의 문제점 svelte에서 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 방법 중 가장 대표적인 방법으로 props가 존재합니다. 다음 예제는 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에 cValue라는 이름의 props를 전달합니다. [부모 컴포넌트 - App.svelte] 부모 컴포넌트의 pValue = {pValue} [자식 컴포넌트 - Child.svelte] Double 자식 컴포넌트의 cValue = {cValue} [실행 결과] 실행 결과에서 확인할 수 있듯이 자식 컴포넌트에서 cValue라는 props의 값을 변경하면, 부모 컴포넌트에 영향이 없다는 것을 볼 수 있습니다. bind로 props 전달 Svelte에서 자식 컴포넌트가 부모 컴포.. Svelte 2022. 8. 2.

• 

  [Svelte]props 전달 방법 Props React 및 Vue.js와 같은 다른 프레임워크에서도 사용되는 Props는 컴포넌트 간 데이터를 전달하는 방법 중 한 가지 방법으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 경우 사용됩니다. 이번 포스팅은 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에게 데이터를 props로 전달하는 방법을 살펴봅시다. export 사용 부모 컴포넌트인 App.svelte는 import 키워드를 사용하여 자식 컴포넌트인 Child.svelte를 Child로 명시하였으며, script 영역에 선언된 변수 num을 Child 컴포넌트에 number라는 이름의 props로 전달합니다. 아래 소스 코드에서 알 수 있듯이 부모 컴포넌트에서 전달하는 props의 이름과 변수명은.. Svelte 2022. 7. 30.

• 

  [React]props.children에 props 전달 이번 포스팅에서는 props.children에 데이터를 전달하는 방법을 소개합니다. React에서 props는 읽기 전용이므로 수정이 불가능하며, 마찬가지로 props.children도 수정할 수 없습니다. 만약, props.children을 수정하고 싶다면, Reac.cloneElement 함수를 사용하여 자식 컴포넌트를 복제 후 수정하거나 React.Children.toArray 또는 React.Children.map 함수를 사용하여 새로운 배열을 생성 후 수정할 수 있습니다. 그럼 하나씩 살펴보도록 하겠습니다. 목차 React 엘리먼트를 복제하는 React.cloneElement 함수 props.children복제 props.children 조작 React 엘리먼트를 복제하는 React.clone.. React/React 문법 2021. 10. 20.

• 

  [React]함수형 컴포넌트에 props 전달 이번 포스팅에서는 React에서 함수형 컴포넌트에 props를 전달하는 방법과 props의 개념에 대해 소개합니다. 목차 props 개념 부모 컴포넌트가 자식 컴포넌트에 props 전달 자식 컴포넌트가 부모 컴포넌트에 props 전달 정리 props 개념 React에서 애플리케이션을 설계할 때 컴포넌트 간 데이터의 흐름을 구조하는 것이 중요합니다. 여기서 말하는 컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미합니다. props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 과정을 React와 프로그래밍 개념을 .. React/React 문법 2021. 10. 15.

• 

  [React]super()와 super(props)의 차이 대부분 React 개발자들은 Class 컴포넌트를 구현할 때, constructor(props)에서 super(props)를 당연하게 사용했을 거라 생각합니다. class App extends React.Component { constructor(props) { super(props); //... } //... } 저 또한 super(props)를 당연하게 사용을 해왔기 때문에 아래 의문에 대해 답변을 할 수 없었습니다. 1. 생성자에서 super()를 호출하는 이유 2. super()에 props를 넘겨주는 이유 이번 포스팅에서는 super()와 super(props)의 차이에 대해 정리합니다. StackOverFlow에서 아래 질문에 대해 영감을 얻었으며, Dan Abramov가 작성한 글을 일부 번.. React/React 문법 2021. 8. 5.

• 

  [React]전달받은 props로 state값을 초기화 React는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 구조로 되어있습니다. 그리고 컴포넌트에서 사용되는 값의 상태는 state와 props로 분류가 됩니다. state 현재 컴포넌트에서 사용하는 값(수정 가능) props 부모 컴포넌트에게 전달받은 값(수정 불가능) 이번 포스팅에서는 state를 부모 컴포넌트에게 전달받은 값인 props로 초기화하는 방법에 대해 작성합니다. StackOverFlow의 아래 질문을 질문을 참고하여 작성합니다. https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props React component initialize state from props In Rea.. React/React 문법 2021. 8. 3.