이번 포스트에서는 화면을 구성하는 여러 컴포넌트 간의 통신에 대해 살펴보자. 컴포넌트간 통신과 유효 범위 각각의 컴포넌트는 개별적으로 고유한 유효범위를 가지기 때문에 다른 컴포넌트의 데이터를 직접 참조할 수는 없다. 그럼 서로 다른 컴포넌트들이 데이터를 주고받으려면 어떻게 해야 할까? 이것은 컴포넌트들의 관계가 상/하위 관계인지 아닌지에 따라 달라진다. 상/하위 관계가 있는 경우 부모/자식의 형태를 띄는 상/하위 컴포넌트의 관계에서는 방향에 따라 두 가지를 사용한다. 상위 -> 하위 즉 부모가 자식에게 데이터를 전달할 때에는 사용자 정의 속성(props)을 통해서 값을 전달한다. 하위 -> 상위 즉 자식이 부모에게 데이터를 전달할 때에는 이벤트를 발생(emit) 시켜서 데이터를 전달한다. 상/하위 관계가..
[vue 3] 02. 컴포넌트간 통신 1 props
이번 포스트에서는 화면을 구성하는 여러 컴포넌트 간의 통신에 대해 살펴보자. 컴포넌트간 통신과 유효 범위 각각의 컴포넌트는 개별적으로 고유한 유효범위를 가지기 때문에 다른 컴포넌트의 데이터를 직접 참조할 수는 없다. 그럼 서로 다른 컴포넌트들이 데이터를 주고받으려면 어떻게 해야 할까? 이것은 컴포넌트들의 관계가 상/하위 관계인지 아닌지에 따라 달라진다. 상/하위 관계가 있는 경우 부모/자식의 형태를 띄는 상/하위 컴포넌트의 관계에서는 방향에 따라 두 가지를 사용한다. 상위 -> 하위 즉 부모가 자식에게 데이터를 전달할 때에는 사용자 정의 속성(props)을 통해서 값을 전달한다. 하위 -> 상위 즉 자식이 부모에게 데이터를 전달할 때에는 이벤트를 발생(emit) 시켜서 데이터를 전달한다. 상/하위 관계가..
2023.08.23