UI 요소의 접근은 반드시 그 UI를 만든 스레드에서!
의외군요... 이에 관해서 WPF로만 간단하게 언급하고 한 번도 제대로 설명하는 글을 쓴 적이 없었습니다. ^^ 어쨌든, 다음의 질문이 있었으니,
안녕하세요 성태님 도움으로 C# 네이버 카페 스팸글 작성되면 삭제되는 프로그램을 만들었는데요..여쭤볼게 하나 있습니다.
; https://www.sysnet.pe.kr/3/0/5000
이참에 정리를 하는 차원에서 글을 남깁니다. ^^
GUI 환경에서의 프로그램을 보면, 공통점이 하나 있습니다. 바로 "특정 UI 요소에 대한 접근은 반드시 그 UI 요소를 만든 스레드에서 해야 한다"는 것입니다. 윈도우만 알던 시절에는 이것이 윈도우 운영체제만의 제약인 줄 알았는데, iOS도 그렇고 Android도 그렇고 다른 운영체제들도 동일한 제약을 갖고 있었습니다.
지난 글에서 "작업자 스레드"와 "UI 스레드"간의 구분을 알아봤었는데요.
C# - 작업자 스레드와 UI 스레드
; https://www.sysnet.pe.kr/2/0/11287
따라서, UI 요소는 어떤 스레드에서든 만드는 것이 가능합니다. 단지, 별다른 일이 없는 한 최초 실행되는 Main 스레드에서 "윈도우" 창을 하나 만들고 시작하는 것이 일상적입니다. 게다가 UI 요소는 부모/자식 간의 관계로 연결되는 경우가 많기 때문에 윈도우 내에서 다시 생성되는 (TextBox나 CheckBox 등의) UI 요소들은 "윈도우"라는 UI 요소의 자식으로 등록해야 하기 때문에 그 생성을 또한 Main 스레드가 하게 됩니다. 그렇게 해서 결국 대부분의 UI를 Main 스레드가 담당하게 되는 것입니다.
자, 그럼 간단하게 코드를 볼까요? ^^
Windows Forms 프로젝트를 생성하면 다음과 같이 Main 메서드가 기본 처리를 담당합니다.
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1());
}
따라서 Form1 윈도우는 Main 스레드가 생성했으므로 Form1의 메서드나 속성을 호출하고 싶다면 반드시 Main 스레드를 경유해야 합니다. 가령, Title을 Form1.cs의 Window.OnLoad 이벤트에서 다음과 같이 할 수 있습니다.
using System;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
this.Text = "TEST WINDOW";
}
}
}
만약 다른 스레드에서 접근하려면 어떻게 될까요?
private void Form1_Load(object sender, EventArgs e)
{
Task.Run(() =>
{
this.Text = "TEST WINDOW";
});
}
위와 같이 코드를 바꾸고 F5 디버깅으로 실행하면 this.Text = "..."; 코드에서 다음과 같은 예외가 발생하는 것을 볼 수 있습니다.
System.InvalidOperationException
HResult=0x80131509
Message=Cross-thread operation not valid: Control 'Form1' accessed from a thread other than the thread it was created on.
Source=System.Windows.Forms
StackTrace:
at System.Windows.Forms.Control.get_Handle()
at System.Windows.Forms.Control.set_WindowText(String value)
at System.Windows.Forms.Form.set_WindowText(String value)
at System.Windows.Forms.Control.set_Text(String value)
at System.Windows.Forms.Form.set_Text(String value)
at WindowsFormsApp1.Form1.<Form1_Load>b__1_0() in F:\WindowsFormsApp1\Form1.cs:line 18
at System.Threading.Tasks.Task.InnerInvoke()
at System.Threading.Tasks.Task.Execute()
Form1을 생성하지 않은 스레드에서 접근하려고 했다고 자세하게 설명해 주고 있습니다. 그렇다면 UI를 생성한 스레드 이외에는 제목에 대한 설정조차도 할 수 없는 걸까요? 다행히 방법이 있습니다. 바로 UI를 생성한 스레드에게 실행할 코드를 던져 주는 것입니다. 이를 위해 다음과 같이 변경할 수 있습니다.
private void Form1_Load(object sender, EventArgs e)
{
Task.Run(() =>
{
this.Invoke(
(System.Action)( () =>
{
this.Text = "TEST WINDOW";
}) );
});
}
좀 더 쉽게 다음과 같이 풀어볼 수도 있겠죠!
private void Form1_Load(object sender, EventArgs e)
{
Task.Run(() =>
{
SetTitle("TEST WINDOW");
});
}
private void SetTitle(string title)
{
this.Invoke(
(System.Action)(() =>
{
this.Text = title;
}));
}
표면상으로는 UI 접근을 하는 코드를 (Form 객체인) this의 Invoke 메서드를 전달하고 있습니다. (참고로, Invoke 메서드는 Control 타입에서 제공되며 Form은 Control을 상속받은 타입입니다.) 하지만, Invoke 내부에서는 전달받은 메서드를 Main 스레드에 전달해 주는 역할을 합니다. 그러니까, Windows Forms 세계에서 개별 Control은 자신을 만든 스레드를 알 수 있고 그 스레드에 코드를 전달할 수 있는 Invoke 메서드가 제공되는 것입니다.
여기서 Invoke 메서드는 동기적으로 실행됩니다. 즉, 위의 Task.Run 스레드는 this.Invoke로 전달한 메서드가 Main 스레드에 의해 실행이 완료되기까지 대기하게 됩니다. 만약, 이런 대기를 원치 않는다면 Invoke의 비동기 버전인 BeginInvoke를 불러도 됩니다.
this.BeginInvoke(
(System.Action)(() =>
{
this.Text = title;
}));
어떤 차이가 있는지 다음과 같은 변경을 하면 금방 알 수 있습니다.
private void SetTitle(string title)
{
Debug.WriteLine(DateTime.Now);
this.Invoke(
(System.Action)(() =>
{
this.Text = title;
Thread.Sleep(1000);
}));
Debug.WriteLine(DateTime.Now);
Debug.WriteLine(DateTime.Now);
this.BeginInvoke(
(System.Action)(() =>
{
this.Text = title;
Thread.Sleep(1000);
}));
Debug.WriteLine(DateTime.Now);
}
디버그 모드로 실행하면, 다음과 같은 식으로 출력이 됩니다.
2018-06-26 오후 7:23:44
2018-06-26 오후 7:23:45
2018-06-26 오후 7:23:45
2018-06-26 오후 7:23:45
SetTitle 메서드를 다음과 같이 구현했을 때,
private void SetTitle(string title)
{
this.BeginInvoke(
(System.Action)(() =>
{
this.Text = title;
}));
}
사실 이 메서드를 무심코 Main 스레드 및 다른 스레드에서도 호출할 수 있습니다. 하지만, Main 스레드인 경우에는 굳이 BeginInvoke를 거칠 필요 없이 곧바로 this.Text에 접근할 수 있으므로 성능을 위해 할 수만 있다면 그렇게 하는 것이 좋습니다. 그리고 바로 이때 사용할 수 있는 플래그 값이 "InvokeRequired" 속성입니다.
private void SetTitle(string title)
{
if (this.InvokeRequired) // 현재 스레드가 this(Form1) 요소를 만든 스레드를 경유해야 하는지 확인
{
this.BeginInvoke(
(System.Action)(() =>
{
this.Text = title;
}));
}
else
{
this.Text = title;
}
}
좀 더 실질적인 예를 들어 볼까요?
2초에 한 번씩 REST API를 호출한다고 가정해 보겠습니다. 그리고 그 호출이 서버로부터 응답받는데 보통 1초가 걸리고 그 응답을 화면에 뿌려줘야 하는 경우를 보겠습니다.
만약 이때, 2초에 한 번씩 실행하는 코드를 System.Windows.Forms.Timer를 쓰게 되면 어떻게 될까요?
using System;
using System.Diagnostics;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
System.Windows.Forms.Timer _timer;
public Form1()
{
InitializeComponent();
_timer = new System.Windows.Forms.Timer();
_timer.Interval = 2000;
_timer.Tick += timer_Tick;
_timer.Start();
}
private void timer_Tick(object sender, EventArgs e)
{
string result = CallNetworkResult();
this.textBox1.Text = result;
}
private string CallNetworkResult()
{
Thread.Sleep(1000); // API 호출에 1초 걸린다고 가정
return DateTime.Now.ToString(); // API가 반환한 결과라고 가정
}
}
}
일단, timer_Tick 이벤트 처리기에서 this.textBox1 UI 요소를 접근하고 있는 것은 괜찮은 것일까요? System.Windows.Forms.Timer는 Tick 이벤트를 Timer를 생성한 스레드에 실어서 보내기 때문에 결국 그것은 Main 스레드가 되고 this.textBox1을 정상적으로 접근할 수 있습니다.
여기서 문제는, timer_Tick에서 실행되는 1초 지연의 네트워크 호출입니다. Main 스레드는 이 호출을 처리하느라 UI 요소의 Paint를 비롯해 관련 이벤트를 전혀 처리하지 못하게 됩니다. 따라서 UI가 1초씩 얼어버리는 부작용이 발생하게 됩니다.
이 문제를 해결하려면 CallNetworkResult 메서드를 어떤 식으로든 다른 스레드에서 실행하도록 해야 합니다. 그에 대해서는 여러 가지 우회 방법이 있겠지만 위에서는 단지 System.Threading.Timer를 쓰는 것으로 바꿔줘도 좋습니다.
using System;
using System.Diagnostics;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
System.Threading.Timer _timer;
public Form1()
{
InitializeComponent();
_timer = new System.Threading.Timer(timer_Tick, null, 0, 2000);
}
private void timer_Tick(object state)
{
string result = CallNetworkResult();
this.textBox1.Text = result;
}
private string CallNetworkResult()
{
Thread.Sleep(1000);
return DateTime.Now.ToString();
}
}
}
System.Threading.Timer는, 전달된 timer_Tick 콜백 함수를 스레드 풀로부터 빌려온 자유 스레드를 통해 호출해 줍니다. 자, 그럼 여기서 새로운 문제가 하나 발생합니다. 그 자유 스레드는 당연히 this.textBox1 UI 요소를 생성한 것이 아니기 때문에 위와 같이 바꾸면 this.textBox1.Text = result; 코드에서 System.InvalidOperationException 예외가 발생하게 됩니다. 따라서 UI를 접근하는 코드만 별도로 분리해 다음과 같이 구성해야 합니다.
private void timer_Tick(object state)
{
string result = CallNetworkResult(); // 네트워크 호출은 스레드 풀의 자유 스레드에서 실행되고,
SetResult(result); // UI 접근은 BeginInvoke를 통해 Main 스레드에서 실행.
}
private void SetResult(string result)
{
if (this.InvokeRequired == true)
{
this.BeginInvoke((System.Action)(
() =>
{
this.textBox1.Text = result;
}));
}
else
{
this.textBox1.Text = result;
}
}
참고로, 위에서 Form1 객체인 this와 this.textBox1은 모두 Control 객체를 상속받았고 모두 동일한 스레드에서 생성되었기 때문에 다음과 같이 코드를 고쳐도 무방합니다.
private void SetResult(string result)
{
if (this.textBox1.InvokeRequired == true)
{
this.textBox1.BeginInvoke((System.Action)(
() =>
{
this.textBox1.Text = result;
}));
}
else
{
this.textBox1.Text = result;
}
}
(
첨부 파일은 이 글의 예제 코드를 포함합니다.)
이 글에서는 Windows Forms를 기준으로 설명했지만, WPF에서도 (메서드만 다를 뿐) 처리 방식에는 변함이 없습니다.
UWP(유니버설 윈도우 플랫폼) 앱에서 콜백 함수 내에서의 UI 요소 접근 방법
; https://www.sysnet.pe.kr/2/0/11071
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]