Skip to content

Meta, State

Meta와 State는 LC5 Builder 및 Renderer에서 UI를 렌더링하기 위해 사용되는 서로 다른 데이터 구조입니다. 두 데이터 구조는 Builder에서 생성된 데이터가 Renderer 페이지에서 컴포넌트로 렌더링되어 UI를 구성하는 방식을 정의하고, 각 UI 요소에 데이터를 할당하기 위해 사용됩니다.

Meta와 State에 대해 아는 것은 LC5 Builder와 Renderer가 연동되는 메커니즘을 이해하는 데 큰 도움이 됩니다.

Meta

Meta 데이터란 LC5를 통해 생성한 페이지별 구성 정보를 담은 데이터입니다. 사용자가 LC5 Builder를 통해 생성한 레이아웃 및 컴포넌트 설정, Function에서 생성한 비즈니스 로직 코드, url 경로, 버전과 같이 Builder에서 설정한 모든 데이터는 모두 하나의 Meta 정보로 합쳐져 저장됩니다.

Meta 정보는 Builder 페이지 당 하나씩 저장됩니다. Builder를 통해 생성한 페이지는 각각 하나씩의 Meta 데이터를 가지고 있습니다. 이는 한 Builder에서 여러 경로, 혹은 여러 버전을 지정해도 Meta 데이터는 하나만 저장된다는 뜻입니다. 생성된 Meta 정보는 syntax 분석을 통해 사용자가 의도한 UI로 렌더됩니다.

Meta 정보는 Renderer 페이지 내에서 불변하는 정적 데이터입니다. 한 번 Builder에서 생성한 메타는 Renderer에서 특정 상호작용에 따라 변경되지 않습니다. 렌더링 주기 안에서 변경될 수 있는 데이터는 모두 State에 속합니다. 자세한 내용은 아래 State 섹션을 참고하세요.

LC5를 활용하기 위해 Meta 데이터의 구조를 숙지하고 있을 필요는 없습니다. 모든 것은 블랙 박스 형식으로 구동되며, 사용자는 Meta에 대한 이해 없이도 LC5 Builder를 통해 UI를 구현할 수 있습니다.

State

Meta가 UI를 구성하는 정적인 데이터라면, State는 유저의 상호작용, 데이터 패칭 등에 의해 생성 및 관리되는 동적인 값입니다. 즉 Meta는 UI의 구조와 레이아웃을 정의하는 데이터이고, State는 이 구조 안에서 실제로 표시되고 변경되는 데이터를 나타낸다고 볼 수 있습니다.

LC5에서의 State는 React에서의 State와 비슷한 개념이라고 할 수 있습니다. 웹 페이지나 앱을 사용하는 동안 바뀔 수 있는 모든 정보는(즉, 일반적으로 React 상에서 State를 통해 구현될 만한 데이터는) LC5에서 모두 State에 속합니다. 여기에는 유저 입력에 따라 값이 바뀌는 Form 값이나, 데이터 패칭에 따라 값이 바뀌는 Table 내용 리스트, 유저가 버튼을 누름에 따라 열렸다가 닫히는 Dialog 오픈 정보 등이 포함됩니다. 또한, LC5 State의 변경은 화면의 리렌더링을 초래하여 UI 값이 실시간으로 변경되도록 한다는 점도 비슷합니다.1

유저 상호작용에 따른 기본적인 State 업데이트 로직은 LC5 컴포넌트에 내부적으로 구현되어 있어 별도의 변경 로직을 작성할 필요는 없습니다. 그러나 때로는 Builder 내에서 State 값을 직접 수정해야 할 때가 있습니다. 보통 이러한 State 변경은 Builder 페이지의 Function 코드를 통해 수정되고 관리됩니다. 어떻게 State를 바꾸는지에 대한 자세한 내용은 다음 Function 섹션에서 설명하도록 하겠습니다.

State 데이터의 자세한 구조에 대해서는 State 구조 레퍼런스 페이지를 참고하세요.

Meta vs State

아직 Meta와 State의 차이가 헷갈릴 수 있습니다. 아래 테이블에서 Meta와 State의 차이에 대해 정리해 두었습니다.

Meta State
서비스 화면을 구성하기 위한 구조 데이터 서비스 화면에서 유저 상호작용에 따라 변경되는 데이터
컴포넌트의 구조 나타냄 컴포넌트의 값 나타냄
Builder 페이지 UI 조작을 통해 생성 Builder의 Function 로직에 의해 생성 방법이 정의되고, Renderer에서 동작하면서 생성 및 수정
Renderer 내에서 변경되지 않음 Renderer 내에서 상호작용, 데이터 패칭 등에 따라 변경됨

요약하자면 Meta 데이터는 Builder 페이지에서 정의하여 Renderer 페이지에 전달되는 데이터로, Renderer에 전달된 순간부터 정적이며 변경되지 않습니다.

State 데이터는 Renderer 페이지에서 유저 상호작용에 따라 변경되는 값으로, Meta의 구조에 맞게 생성된 컴포넌트 내의 value값을 나타냅니다.

  1. 예를 들어 Table과 연결된 State가 변경된다면, 화면에서 보이는 테이블 리스트의 항목이 바로 변경된 데이터로 바뀌게 됩니다. ↩