C#의 GUI는 어떻게 동작하게 할 수 있을까? - Winform 기본 코드

안녕하세요, Dibrary입니다.

C#을 활용한 Winform GUI 를 사용할 준비가 끝났습니다.

저번에 기본 프로젝트를 만드는 방법까지 진행 했었죠.

 

2021.07.26 - [프로그래밍/C#] - C#을 사용한 Winform GUI - 본격적으로 C# 시작하기

C#을 사용한 Winform GUI - 본격적으로 C# 시작하기

 

이제 우리는 기본적으로 어떻게 하면 GUI 요소들이 동작할 수 있는지를 구현 해 볼 겁니다.

 

기본적인 원리를 알면, 나머지는 금방이죠? 

아마 C# 문법책으로 공부를 하신 분들도 계시겠지만, 문법이 실제 구현에서 사용됩니다.

즉, GUI를 사용해서 연습하는 것은 곧, C#언어를 연습하는 꼴과 마찬가지라서 종국에는 해당 언어를 잘 하게 되죠.

 

제 시작 화면은 곧바로, 프로젝트를 열고 난 화면 입니다.

 

먼저, 버튼과 라벨을 끌어다가 놓겠습니다.

버튼은 누름으로써 뭔가 하게 하는 용도겠죠?

라벨은 말 그대로 '표시'만 하는 용도입니다. 물론, 여기서 저는 변경이 가능한 점을 이용할 생각입니다.

딱 2개 갖다 놓았네요. 

근데, 버튼 이름이 너무 딱딱하죠? 저는 버튼의 이름을 바꿔보겠습니다.

버튼 이름을 바꿀때는, 버튼을

이렇게 선택하고 난 후에, 오른쪽에 보시면 '속성'창이 뜹니다.

네 여기서 Text라는 부분의 button1 글자를 바꿔보겠습니다. 

제가 '고사리버튼' 이라고 바꾸니까 화면에서 보이는 버튼의 글자도 바뀌었네요!

이렇게 버튼의 이름은 바꿀 수 있습니다.

 

참고로 이 속성 탭에서 굉장히 많은 것들을 할 수 있습니다. 예를 들면, 버튼의 색을 바꿔보겠습니다.

속성에서 ForeColor를 보시면, 색을 선택할 수 있습니다. 여기서 색을 바꿔보겠습니다.

빨간색으로 바꾸니까, 버튼의 글자 색이 빨갛게 바뀌었죠?

버튼의 배경 색도 바꿔보겠습니다. 속성에서 약간 위로 올라가면 BackColor 부분이 있는데, 거기서 선택을 해보세요.

네 글자는 빨간색, 버튼 색은 노란색으로 바뀌었습니다!. 굉장히 쉽죠?

 

이제 본격적으로, 버튼을 눌러서 label의 값이 바뀌게 해보겠습니다.

버튼을 더블클릭 해 보세요. 아마 다른 화면으로 넘어갈겁니다.

이 부분이 실질적으로 버튼을 눌렀을때, 동작하게 할 수 있는 부분입니다.

여기서 저는 이렇게 흐름을 짰습니다.

1. 전역변수(클래스 변수) 설정
2. 버튼이 눌릴 때 마다 전역변수 변경 + label의 글자가 바뀜
3. 마지막 바뀌는 순간에 전역변수 초기화

전역변수가 여러사람과 같이 개발할 경우 좋지는 않지만, 우리는 테스트를 목적으로 하니까, 간단히 보여드릴 요량으로 사용했습니다.

이게 코드 끝입니다. 엄청 간단하죠?

코드를 보죠.

1. int cnt = 0;

가장 먼저 제가 전역변수 처럼 쓸 클래스변수를 초기화 해놨습니다.

2. string[ ] ARRAY = {"first", "second", "third"};

그리고, 순서에 따라 글자가 바뀌게 하려고 미리 글자 배열도 만들어 뒀습니다.

 

그리고 중요한 것은, 아까 실제 버튼이 눌렸을때, cnt를 변경 하고, cnt값에 따라 label에 글자가 바뀌게 하겠다고 했었죠?

그 부분이 조건문으로 구현이 된 것입니다.

3. if(cnt == 2)

만일 cnt가 2라면, 즉, 버튼을 3번째 눌렀을 때를 의미합니다.

4. label1.Text = ARRAY[cnt]

ARRAY배열에서 cnt 숫자 위치의 '문자열'을 label1의 Text에 씁니다. Text 어디서 익숙하지 않나요?

네 아까, 버튼 글자 바꿀때 속성탭에서 보시면 Text가 있습니다.

이 수정을, 직접 속성탭에서 입력해서 수정 할 수도 있고, 이렇게 코드를 이용해서 수정을 할 수 있습니다.

5. cnt += 1

cnt 값이 1씩 증가하게 한다.

 

동작 시나리오는 아래와 같습니다.

• 자, 그러면 버튼을 눌렀을 때, 처음에는 cnt가 0이니까, else 로 넘어가고, ARRAY[0] 즉, "first" 가 label에 써질 겁니다. 그리고 cnt는 1로 바뀝니다. 
• 그 다음에 다시 버튼을 누르면 이제 cnt는 1이지만 아직 2는 아니니까 또 else로 넘어가서 ARRAY[1] 즉, "second"값이 label에 써집니다. 다시 cnt는 +1 증가한 2가 됩니다.
• 다시 버튼을 누르면 cnt가 2이므로 if로 넘어갑니다. ARRAY[2] 즉, "third"값이 label에 써지고, cnt는 다시 0으로 초기화 됩니다.

 

네 이제 실행 해 보시면 됩니다. (실행은 Ctrl + F5를 누르시면 됩니다.)

각기 글자가 다르네요!. 또 계속 버튼을 누르면 글자가 다시 처음으로 왔다가 계속 돕니다.

 

C#의 GUI는 이렇게 이벤트를 실제 보이는 것으로 구현하는 겁니다.

나머지 기능들도 마찬가지입니다.

결국에는, 해당 GUI 요소에 어떤 '이벤트'를 요청 할 때, 해당 '이벤트'가 어떤 처리 혹은 결과를 내게 할 것인지가 코드로 나오면 됩니다.

 

아직은 처음이니까, 어떤 방식으로 '코딩하는 생각'이 진행되었는지를 중점적으로 보시면 좋습니다.